Snake Lab
Snake depends on fast turns without illegal reversals; I built a Canvas/JavaScript grid game with timed movement, buffered keyboard/touch input, food placement, growth, collision checks, pace changes, and local best scores.
- Status
- Archived experiment / live demo
- Last updated
- May 2026
- Controls
- Steer the snake, collect food, avoid walls and your own body, and keep the run alive as pace increases.
- Keyboard
- Arrow keys or WASD turn, Space, P, or Escape pauses and resumes, and Enter starts or resumes when not actively playing.
- Touch
- Swipe on the canvas or use the large on-screen direction pad.
- Accessibility
- Score, best score, length, pace, and live run status are readable outside the canvas.
Ready
Snake Lab ready.
Keyboard and touch controls
Keyboard shortcuts
- Arrow keysTurn the snake up, right, down, or left.
- W A S DAlternate direction keys for movement.
- SpaceStart from idle or pause and resume during a run.
- EnterStart or resume when the game is not actively playing.
- P / EscPause or resume a live run.
Touch controls
- SwipeSwipe on the canvas to turn in that direction.
- Direction padUse the four large movement buttons below the canvas.
- Tap canvasStart a run from the idle menu.
Grid state, buffered turns, and pace feedback.
Main state includes the snake segment list, current direction, queued direction, food position, score, length, pace, best score, and run state. The game uses a timed grid step instead of pixel physics, then redraws the board on canvas after each move. Collision logic tests the next head cell against walls and existing body segments; scoring grows the snake, moves food, increases pace, and saves the best run locally. Keyboard input maps Arrow keys and WASD into direction changes, while Space and Enter control pause or start. Touch support uses both swipe detection and on-screen direction buttons. The lesson was using an input buffer so quick turns register without allowing illegal reverse moves.
Grid movement, input buffering, and compact run feedback.
- Implemented grid state for snake segments, food placement, growth, wall/body collision detection, score, and length.
- Built input buffering for Arrow keys, WASD, swipe gestures, and touch buttons while blocking illegal reverse turns.
- Added pace changes, pause/restart/fullscreen controls, viewport-aware canvas sizing, and local best-score persistence.
The classic Snake rules are the reference point; the rendering, state model, controls, and HUD are custom JavaScript.
Archived experiment with solid grid state.
Already solid includes deterministic movement, buffered input, collision checks, local best score, and keyboard/touch controls. Demo-only areas include limited automated tests and canvas-first gameplay. Hardening would add regression tests for turns and collisions, save migration/reset controls, better screen-reader alternatives, and mobile browser QA.
Static browser game with no runtime secrets.
Hosted/run location: GitHub Pages serves snake-lab.html, snake-lab.css, and snake-lab.js. Environment/config: no environment variables are required; grid size, speed, scoring, and input rules are client-side JavaScript. External APIs/services: none beyond Canvas/DOM events, touch input, Fullscreen, and LocalStorage for best score. Local development: run python -m http.server 8000 and open /snake-lab.html. Security: saved scores stay in the local browser.