Snake in HTML5: complete classic game with Cerewro

Snake is perfect for learning HTML5 Canvas mechanics: game loop, grid movement, collision detection and state management. With Cerewro you get the complete game in seconds and can customize it to your liking.

Prompt to generate complete Snake

Cerewro Chat
Create the complete Snake game in a single HTML5 file:
- 600x600 canvas with 20x20 grid
- Snake that grows when eating
- Random food placement (avoiding body)
- Controls: arrow keys and WASD
- Score +10 per food
- Speed increases every 5 points
- 3 lives (snake respawns after hitting walls)
- Game over when hitting own body
- Save high score in localStorage
- Design: black background, neon green snake, red food
- 8-bit sounds with Web Audio API

Core Snake logic

Game loop and movement
const GRID = 20, CELL = 30;
let snake = [{x:10,y:10},{x:9,y:10},{x:8,y:10}];
let dir = {x:1,y:0}, nextDir = {x:1,y:0};

function update() {
  dir = nextDir;
  const head = {x: (snake[0].x+dir.x+GRID)%GRID, y: (snake[0].y+dir.y+GRID)%GRID};

  if (snake.some(s => s.x===head.x && s.y===head.y)) {
    lives--; if (lives<=0) { showGameOver(); return; }
    init(); return;
  }
  snake.unshift(head);
  if (head.x===food.x && head.y===food.y) { score+=10; spawnFood(); }
  else snake.pop();
  render();
}
Quick customization: Ask Cerewro: "Modify the Snake so that food leaves a golden particle trail when eaten and add a dark/light mode toggled with the M key". The AI makes the change in seconds without breaking the rest of the game.