Snake on a torus, a Klein bottle and a projective plane, with the real surface turning beside it.
The board is a square whose edges are glued: straight across for a torus, with one pair flipped for a Klein bottle, and with both pairs flipped for the projective plane. Slivers of the glued neighbors frame the board, so you can see where the snake will come out, and the inset renders the actual surface (a ring torus, the classic bottle immersion of the Klein bottle, and Boy's surface via the Bryant-Kusner formula) as a painter-sorted, lit quad mesh with the snake and the seams mapped onto it. The snake wears a dashed stripe on its left flank; cross a flipped edge and the stripe lands on its other side and your arrow keys mirror, which is exactly what non-orientable means. The autopilot runs a breadth-first search that knows when each body cell will be vacated and only takes the food if it can still reach its own tail afterwards.
Try it. Steer with the arrow keys, WASD or a swipe; after a few idle seconds the autopilot takes back over. Pick a surface with the tabs or keys 1 to 3, drag the 3D surface to turn it, and press R to restart.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a snake game on a Klein bottle with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens (scale by devicePixelRatio). Draw a 16 by 16 board in the middle as a dark checkerboard.
- Write a step(x, y, direction) function that handles the edges. Leaving through the left or right edge wraps around, but also flips: you come back in at row N - 1 - y. Leaving through the top or bottom edge just wraps straight across. That gluing is a Klein bottle.
- Keep a flag that toggles every time the snake crosses a flipped edge, and when it is set, swap what the up and down arrow keys mean. That is the snake living in a mirrored frame.
- Run the classic game on top: the snake moves ten cells a second, eats food to grow, and restarts if its head hits its body.
- Add a simple autopilot so it plays itself: breadth-first search from the head to the food over the glued board, avoiding the body.
Once that works, make it beautiful:
- Draw a thin strip of the neighboring copies of the board around each edge, flipped where the gluing flips, so you can see where the snake will come out.
- Draw the snake as a thick rounded line with a stripe on its left side, so you can watch the stripe change sides when it crosses a flipped edge.
- Color the edges and add arrows like a topology textbook gluing diagram.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a torus and projective plane mode, a 3D view of the surface with the snake drawn on it, or an autopilot that checks it can still reach its tail before eating.
