Games · Beginner
Snake in the Browser
Build the classic Snake game in vanilla JavaScript on an HTML canvas, with a game loop, growth, collision detection, scoring, and a game-over state.
This project is the classic Snake game running entirely in the browser with vanilla JavaScript and the HTML canvas element. You build a game loop that moves the snake on a grid, grows it when it eats food, detects collisions with walls and itself, tracks the score, and shows a game-over screen. It is worth building because it teaches the core structure of every real-time game, the loop, state, and rendering, while keeping the rules simple enough to finish in an afternoon. Snake is a genuinely impressive portfolio piece because it is playable, visual, and shippable as a single static page, and it demonstrates that you understand timing, input handling, and rendering without any framework.
What you build
- Renders a grid-based playfield and the snake on an HTML canvas
- Runs a fixed-timestep game loop that advances the snake on each tick
- Reads arrow-key or WASD input to change the snake's direction
- Grows the snake by one segment each time it eats food
- Spawns food at a random empty cell after each one is eaten
- Detects collisions with the walls and the snake's own body to end the game
- Tracks and displays the current score and a game-over screen with restart
What it teaches
- Structuring a real-time game loop with consistent timing
- Managing mutable game state across frames
- Handling keyboard input and direction changes
- Rendering shapes and text with the HTML canvas API
- Collision detection on a grid
Sign in to open the build guide
Free account. Get the step-by-step build and every resource link.
Take it further
- Add increasing speed as the score climbs to ramp up difficulty.
- Persist a high score in localStorage so it survives page reloads.
- Add wrap-around walls or obstacles as a selectable game mode.
