raw Software

HTML5 Snake

Robert Eisele

HTML5 Snake preserves the original 45 by 30 grid, 120 millisecond game clock, and time-sensitive food scoring while adding responsive rendering, swipe and direction-pad controls, pause, reset, and an explicit wall-wrapping option in place of the hidden keyboard sequence.

Read the story

Snake reduces movement to a discrete grid: on every tick, the head advances by exactly one cell and the remaining segments follow. Collecting food keeps the previous tail cell, increasing the length by one. A collision with the body ends the run, while wall behavior can be switched between solid boundaries and wrapping edges.

Movement on a Grid

A direction is one of four unit vectors, \\(d\in\{(-1,0),(0,-1),(1,0),(0,1)\}\\). If the head is at \\(p_t=(x_t,y_t)\\), its next position is

\[ p_{t+1}=p_t+d. \]

Direct reversal is rejected because it would place the new head immediately inside the second segment. A short input queue preserves quick turns between ticks without allowing contradictory commands to accumulate.

Wrapping at the Walls

With solid walls, any coordinate outside the 45 by 30 board ends the game. Enabling Wrap walls maps the next coordinate back into the board using modular arithmetic:

\[ x'=(x+45)\bmod 45,\qquad y'=(y+30)\bmod 30. \]

The option replaces the original hidden keyboard sequence with an explicit setting that can be changed during a run. It affects every input method equally: keyboard, swipe, and the on-screen direction pad all use the same game state and collision rules.

Food and Scoring

Food is selected only from unoccupied cells, so it can never appear under the snake. Its initial value is 50 points and decreases by one on every movement tick, stopping at a minimum of 5. Reaching food sooner therefore improves both the score and the snake's length. The fixed 120 millisecond tick preserves the deliberate rhythm of the original canvas experiment while rendering remains independent from the game clock.

Pause and reset are explicit controls, and game over is displayed inside the board instead of opening a blocking confirmation dialog. The board retains its 45 by 30 logical grid as it scales for desktop, touch, and narrow mobile displays.