Every AI-generated Snake I've seen is technically correct and completely lifeless: a square that jumps one cell per tick with zero feedback. I wanted the arcade-cabinet feeling in a single HTML file.
The naive prompt ("make snake in canvas") gave me exactly the dead grid. The fix was to demand a named list of game-feel effects with concrete timings, and to forbid instant teleport-per-cell movement by requiring interpolation between cells. The eat moment now has a chunky pop and the whole board flinches.
Still tuning the screen shake so it reads on fast eats without becoming nauseating. How do you decay shake so a 4-apple combo doesn't stack into an earthquake?
Build a single-file HTML5 Snake game on a 2D canvas. Playable at 60fps, no libraries.
Core rules: 24x24 cell grid, snake starts length 3, arrow keys AND WASD, wrap-around OFF (wall = death). Base tick 8 cells/sec, speeding up by 4% per apple to a cap of 16/sec.
Game feel (implement ALL, and name each in a comment):
1. Interpolate the snake's visual position between cells with an easeOutQuad over the tick duration so movement is smooth, NOT teleporting per cell.
2. On eat: 6px screen shake that decays exponentially over 180ms, a 1.15x scale-pop on the head over 120ms, and 8 particles bursting from the apple.
3. Combo eats within 900ms increase a score multiplier; show a floating "+N" that rises and fades over 500ms.
4. Death: 250ms hit-stop (freeze), then a red flash and the snake dissolves into falling particles.
5. Subtle idle bob on the apple (2px sine, 1.2s period).
Constraints: cap total screen shake magnitude so stacked combos never exceed 10px; respect prefers-reduced-motion by disabling shake and using instant fades. Use requestAnimationFrame with a fixed-timestep accumulator so logic is frame-rate independent. Before the code, list every effect with its duration and easing.