This project is a classic Snake game built from scratch using only HTML, CSS, and vanilla JavaScript. It is designed for educational purposes to help beginners understand the fundamental concepts of 2D game development in a web browser. The project is created by Valentino Phiri (@Valent-p)
The primary goal is to provide a clear, step-by-step guide to building a game. The code is heavily commented, and the logic is broken down into simple, understandable functions. By following the documentation, you will learn about:
- Setting up an HTML Canvas for rendering.
- Creating a game loop.
- Handling user input (keyboard and touch controls).
- Managing game state (snake position, food, score).
- Collision detection.
- Basic game logic (movement, growing, scoring).
No installation or build process is required!
- Clone or download this repository.
- Open the
index.htmlfile directly in your favorite web browser (like Chrome, Firefox, or Edge). - Use the Arrow Keys / WASD on a keyboard or the on-screen D-pad on a touch device to control the snake.
- Click the "Start Game" button to play.
index.html: The main HTML file that contains the structure of the game page, including the canvas and all UI elements.script.js: The heart of the project. This file contains all the JavaScript logic for the game's functionality.docs/: This directory contains a step-by-step tutorial breaking down how the game was built. It is highly recommended to read these files in order to understand the development process.
To get the most out of this project, please follow the tutorial guides in the /docs directory. They are designed to be read in order, starting from the basic setup and progressively adding more features.