Lab
Grid trail, then Snake
Drag your pointer across the grid and it remembers where you have been. Keep going and it asks whether you want to play.
Cost: A plain DOM grid, no canvas and no WebGL. Desktop with a mouse or keyboard only: on touch or a narrow screen you get a note instead of a game.
Wanna play a game?
Snake, on this grid. Steer with the mouse or the arrow keys. Escape stops it.
Move across the grid. Keyboard: focus it and use the arrow keys.
This one is desktop only. It needs a mouse or a keyboard and a wide screen, so on this device there is nothing to play.
How it works
- The grid is plain divs. Moving over a cell sets a data attribute for a moment and a CSS transition fades it out, so the trail costs no React renders.
- After about ten different cells a panel rises and offers a game. Nothing starts until you press Start.
- The snake steers toward the cell under your pointer, or use the arrow keys. It wraps at the edges, and only running into itself ends the game.
- The rules live in a small pure module with a seedable random source, so a game can be replayed from a seed.
- With reduced motion on, there is no trail and the invitation is simply there. On touch or a narrow screen, there is no game at all.