Project 01 · Beginner path finale

Build a small Snake game

This project joins the beginner lessons into one playable loop: input changes direction, each tick moves the snake, food adds score, and a self-hit ends the run.

Runnable mini Snake

Use the arrow keys. The game refuses an immediate reverse. Choose Restart after a game over.

What you need

Finish setup, drawing, the game loop, input, collision, and state first. This page assumes those six ideas already make sense.

What you will learn

How a small state object turns several separate game ideas into a complete rule set you can restart cleanly.

Build in six checkpoints

Draw a grid and one snake. Store the body as an array of {x, y} cells, not as pixels. Drawing becomes cell * size.
Move one cell per tick. A grid game does not need per-frame sliding. The mini version uses setInterval(tick, 130) so speed stays stable on 60Hz and 120Hz screens.
Queue a direction from the keyboard. Read keys in an event, apply the heading on the next tick, and reject a 180° reverse into the neck. That is the input lesson applied to a grid.
Spawn food and add score. If the new head matches the food cell, grow by skipping pop(). Score is length - startingLength.
End on wall or self-hit. Set alive = false, stop the timer, and leave Restart as the only way back. Do not keep ticking a dead snake.
Reset every live value. Restart rebuilds body, direction, food, and score together. Clearing the canvas is not a restart.

The turn rule that saves cheap deaths

addEventListener('keydown', (event) => {
    const next = { ArrowUp:[0,-1], ArrowDown:[0,1], ArrowLeft:[-1,0], ArrowRight:[1,0] }[event.key];
    if (!next) return;
    event.preventDefault();
    if (next[0] !== -dir.x || next[1] !== -dir.y) queued = { x: next[0], y: next[1] };
});

The shipped remake buffers two turns so a fast left-then-up still counts. Keep one slot here. If the snake can reverse into itself, the input lesson is not finished.

Mini version vs the playable remake

Idea	This page	Playable Snake on InstantGames
Timing	Fixed 130ms tick	Accumulator + requestAnimationFrame, speed rises with length
Input	Keyboard, one queued turn, reverse lock	Keyboard, on-screen buttons, swipe, two-turn buffer, pause
State	alive / score	ready, running, paused, game-over, plus Endless / Blitz / Daily
Save data	None	Best scores in `snake_best_v3`
Extra rules	Walls kill, food only	Near-miss warning, power-ups, combo scoring

Those extras are why a documented 312-point run is a strategy problem, not a rendering problem. Learn the rules here, then read the 312-score notes after you can finish a short game.

Common mistakes

Allowing an immediate reverse into the snake’s neck.
Resetting the picture but leaving the old body or direction in memory.
Moving every animation frame instead of once per grid tick, which makes the same code faster on a 120Hz laptop.

Use it when you want a first complete project with visible rules. It is not a replacement for a larger entity or level system.

Lessons used

Game loop · Input · Collision · State and score

Compare this mini version with the playable Snake game, then either review a missing beginner step or continue to Breakout.

Canvas drawing and animation concepts are based on MDN’s Canvas tutorial. Updated 2026-08-13; the mini game was checked locally with keyboard input, reverse lock, and restart.