Classic Snake Game — Free HTML CSS JS Snippet

Snake is the archetypal grid-based arcade game: a growing line of segments moves continuously across a fixed grid, eating food to grow longer while avoiding collisions with the walls or its own body. This snippet is a complete, dependency-free implementation using the HTML5 Canvas API, a fixed-tick game loop, and a direction queue that correctly prevents the classic "instant death by reversing into yourself" bug found in many amateur Snake clones.

Grid state as an array of coordinates, not pixels

The snake is not tracked in pixel space — it is an array of { x, y } grid-cell coordinates, snake = [{x:9,y:9}, {x:8,y:9}, {x:7,y:9}], where index 0 is always the head. A single cellSize constant (canvas.width / GRID_SIZE, an 18x18 grid on a 360px canvas) converts grid coordinates to pixels only at draw time inside draw(). This separation between logical grid state and pixel rendering is what makes collision detection trivial: checking whether the new head coordinate matches any existing segment, snake.some(seg => seg.x === newHead.x && seg.y === newHead.y), is a simple integer comparison rather than a bounding-box or pixel-overlap calculation.

The fixed-tick game loop

Movement runs on setInterval(tick, TICK_MS) with TICK_MS = 130, meaning the entire game state — direction, head position, growth, collision — advances exactly once every 130 milliseconds regardless of how fast the player presses keys. This is deliberate: Snake's difficulty and feel come from the fixed cadence of movement, unlike a requestAnimationFrame-driven action game where movement speed should track the display refresh rate. Each tick() call applies the queued direction, computes a new head cell, checks for wall and self collisions, and either grows the snake (on eating food) or moves it (by pushing a new head and popping the tail) before triggering a full redraw.

The direction queue: solving the reversal bug

A common Snake implementation bug is that pressing the opposite of the current direction (for example pressing Down while moving Up) causes the snake to immediately try to move into the cell occupied by its own second segment, ending the game unfairly on a single mistaken keypress. This snippet solves it with two separate variables: direction (the direction actually applied on the last tick) and queuedDirection (the direction requested by the most recent keypress). setDirection(x, y) checks isOpposite(proposed, direction) — comparing against the direction the snake is *currently* moving, not the queued one — and silently discards the keypress if it is a direct reversal. Only non-reversing keypresses update queuedDirection, and queuedDirection is copied into direction at the very start of each tick(), so rapid key-mashing between ticks cannot queue up multiple direction changes that would let a reversal slip through.

Food placement, growth, and scoring

placeFood() repeatedly generates a random grid cell and rejects it with a do...while loop if it lands on any current snake segment, guaranteeing food never spawns inside the snake's own body. When the new head coordinate matches the food coordinate, the score increments and a new food cell is placed without popping the tail — since the tail is only removed on non-eating moves via snake.pop(), leaving it in place is exactly what makes the snake one segment longer.

Persisted best score and canvas rendering

The best score persists across page reloads using localStorage.getItem('snake-best-score') and localStorage.setItem, checked and updated inside gameOver() whenever the current run's score exceeds the stored best. Rendering itself is straightforward canvas drawing: the food is a filled circle via ctx.arc(), and each snake segment is a filled, slightly-inset rectangle via ctx.fillRect(), with the head segment drawn in a brighter green (#4ade80) than the body (#22c55e) so the direction of travel is always visually obvious at a glance.