HTML · CSS · JavaScript · 2023
Nokia Snake
The first page I shipped.
A browser remake of the old Nokia snake, built in February 2023 from a grid of divs, a timer, and the arrow keys. No canvas, no framework.
The copy below is the same rules as that repo, with the layout fixed so the board and the score are actually visible on this site.
HTMLCSSJavaScript10×10 gridFirst project
View repository →Play
Start, then steer.
Click Start / Restart. Arrow keys change direction. On a phone, use the pad under the board. Eat the red apple to grow. The loop gets faster after each apple. A wall or your own tail ends the run.
How it works
One array, one interval.
01
The board is 100 divs
A 10 by 10 flex grid. The snake is the cells that have the snake class. The apple is one other cell.
02
The body is an array
It starts as [2, 1, 0], head first. Each tick drops the tail and pushes a new head one step in the current direction.
03
Direction is a number
Right is +1, left is −1, down is +10, up is −10. That is enough to walk a row-major grid.
04
Apples speed it up
Eating puts the tail back, adds a point, and restarts the timer at 0.9× the previous delay, down to 80ms.
From the 2023 file
What I kept, and what I fixed to embed it.
Kept
The original rules
Wall checks, self-collision, random apple that skips the snake, and the same starting speed.
Fixed
The board sat off-screen
The original frame placed the grid at left: 110%, and the score was black text on a black page. The start button had no styles.
Fixed
Arrow keys erased cell 0
Every keyup removed the snake class from the first cell, even when that cell was part of the body.
Fixed
Game over stays on the board
The repo calls alert. Here the message sits under the grid, and a 180° turn is ignored so the snake does not eat itself instantly.