My First Browser Game Ep 4: Snake

🧩

Need the game setup? Each episode builds a new game on the same JavaScript skeleton, the <canvas><canvas>, the 2D ctxctx, the draw()draw() function and the requestAnimationFramerequestAnimationFrame loop. If you're starting here or need that boilerplate, grab it in one click: Episode 1 full template → · JS Cheatsheet →

🔲

Grid & Tick Loop

A 25×25 grid stepped every 120 ms

Active

🎯

Goal for this step

Set up grid-based movement on a fixed tick inside rAF.

1500×500 canvas = 25×25 cells of 20 px. The snake: an array of {x, y} cells, head first.
2Tick inside requestAnimationFrame: accumulate timestamps; every 120 ms take ONE grid step.
3rAF passes a timestamp, use it: if (t - lastTick > 120).
4Move = unshift new head + pop tail (the deque trick from C++ Snake, JS edition: unshift/pop).

snake.html

let snake = [{x:12,y:12},{x:11,y:12},{x:10,y:12}];
let dir = {x:1, y:0};
let lastTick = 0;

function loop(t) {
    if (t - lastTick > 120) {
        lastTick = t;
        const head = { x: snake[0].x + dir.x,
                       y: snake[0].y + dir.y };
        snake.unshift(head);
        snake.pop();
    }
    draw();
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);let snake = [{x:12,y:12},{x:11,y:12},{x:10,y:12}];
let dir = {x:1, y:0};
let lastTick = 0;

function loop(t) {
    if (t - lastTick > 120) {
        lastTick = t;
        const head = { x: snake[0].x + dir.x,
                       y: snake[0].y + dir.y };
        snake.unshift(head);
        snake.pop();
    }
    draw();
    requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

📦 Full starter file , paste this into snake.html and press play

A complete, runnable page: the <canvas>, the 2D ctxctx, a draw()draw() that renders the snake, and the tick loop. Open it in a browser and a green snake glides right. Every step below adds to this file.

snake.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:10px;
         background:#0d1117; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#0a0e14; border:2px solid #1e2733; border-radius:8px; touch-action:none; }
</style>
</head>
<body>
<canvas id="game" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const CELL = 20;                 // 25 x 25 grid of 20px cells

let snake = [{x:12,y:12}, {x:11,y:12}, {x:10,y:12}];
let dir = {x:1, y:0};
let lastTick = 0;

function draw() {
  ctx.clearRect(0, 0, 500, 500);
  ctx.fillStyle = "#33d17a";
  snake.forEach(function(c) {
    ctx.fillRect(c.x*CELL + 1, c.y*CELL + 1, CELL-2, CELL-2);
  });
}

function loop(t) {
  if (t - lastTick > 120) {          // one grid step every 120ms
    lastTick = t;
    const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
    snake.unshift(head);
    snake.pop();
  }
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:10px;
         background:#0d1117; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#0a0e14; border:2px solid #1e2733; border-radius:8px; touch-action:none; }
</style>
</head>
<body>
<canvas id="game" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const CELL = 20;                 // 25 x 25 grid of 20px cells

let snake = [{x:12,y:12}, {x:11,y:12}, {x:10,y:12}];
let dir = {x:1, y:0};
let lastTick = 0;

function draw() {
  ctx.clearRect(0, 0, 500, 500);
  ctx.fillStyle = "#33d17a";
  snake.forEach(function(c) {
    ctx.fillRect(c.x*CELL + 1, c.y*CELL + 1, CELL-2, CELL-2);
  });
}

function loop(t) {
  if (t - lastTick > 120) {          // one grid step every 120ms
    lastTick = t;
    const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
    snake.unshift(head);
    snake.pop();
  }
  draw();
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
</script>
</body>
</html>

✏️

Fill in the Blanks

+15 XP

JavaScript arrays grow at the front with and shrink at the back with . One step happens every milliseconds.

🧠

Knowledge Check

+15 XP

Drawing happens every rAF frame but movement only on ticks. Why split them?

ATo confuse readers

BSmooth 60 FPS rendering with classic chunky Snake movement, each system at its right rate

CrAF requires it

📥

The Input Queue

Fix Snake’s most famous bug properly

Locked

🎯

Goal for this step

Queue direction changes so fast double-presses cannot reverse the snake.

1The bug: pressing up-then-left inside one tick lets the second press reverse you into your neck.
2The pro fix: push wanted directions into a QUEUE; each tick, shift ONE off and validate it against the current direction.
3Validation: reject exact reversals (new.x === -dir.x && new.y === -dir.y).
4Queued input also FEELS better, fast corner combos come out exactly as typed. This is how real Snake implementations do it.

snake.html

let inputQueue = [];

document.addEventListener("keydown", function(e) {
    const map = { ArrowUp:{x:0,y:-1}, ArrowDown:{x:0,y:1},
                  ArrowLeft:{x:-1,y:0}, ArrowRight:{x:1,y:0} };
    if (map[e.key]) inputQueue.push(map[e.key]);
});

// at each tick, before moving:
while (inputQueue.length) {
    const want = inputQueue.shift();
    if (want.x !== -dir.x || want.y !== -dir.y) {
        dir = want;
        break;                      // one turn per tick
    }
}let inputQueue = [];

document.addEventListener("keydown", function(e) {
    const map = { ArrowUp:{x:0,y:-1}, ArrowDown:{x:0,y:1},
                  ArrowLeft:{x:-1,y:0}, ArrowRight:{x:1,y:0} };
    if (map[e.key]) inputQueue.push(map[e.key]);
});

// at each tick, before moving:
while (inputQueue.length) {
    const want = inputQueue.shift();
    if (want.x !== -dir.x || want.y !== -dir.y) {
        dir = want;
        break;                      // one turn per tick
    }
}

⌨️

Code Challenge

+20 XP

Take one valid direction per tick from the queue:

snake.html

const want = inputQueue.const want = inputQueue.();
if (want.x !== ();
if (want.x !==  || want.y !== -dir.y) {
    dir = want;
     || want.y !== -dir.y) {
    dir = want;
    ;
};
}

💡 Hint: Remove from the queue front; reject the exact opposite of the current direction; stop after one accepted turn.

🧠

Knowledge Check

+15 XP

Why is a queue better than the "nextDir" single-buffer fix (C++ episode)?

AQueues are newer

BFast combos (up-left within one tick) are BOTH remembered and applied over two ticks instead of one being lost

CArrays are cheaper

🍎

Food, Growth & Score

Spawn-avoid-the-snake plus eat-to-grow

Locked

🎯

Goal for this step

Add food that respawns safely and grows the snake.

1Food = one {x, y}. Eating: new head equals food → skip the pop (grow) and respawn.
2Safe respawn: loop random cells until none of the snake matches (Array.some!).
3Score = snake.length − 3, drawn in the corner.
4Draw food as a pulsing circle, scale its radius with Math.sin(t / 150) for a free animation.

snake.html

function spawnFood() {
    while (true) {
        const f = { x: Math.floor(Math.random() * 25),
                    y: Math.floor(Math.random() * 25) };
        const onSnake = snake.some(c => c.x === f.x && c.y === f.y);
        if (!onSnake) return f;
    }
}
let food = spawnFood();

// in the tick:
snake.unshift(head);
if (head.x === food.x && head.y === food.y)
    food = spawnFood();          // grew, no pop
else
    snake.pop();function spawnFood() {
    while (true) {
        const f = { x: Math.floor(Math.random() * 25),
                    y: Math.floor(Math.random() * 25) };
        const onSnake = snake.some(c => c.x === f.x && c.y === f.y);
        if (!onSnake) return f;
    }
}
let food = spawnFood();

// in the tick:
snake.unshift(head);
if (head.x === food.x && head.y === food.y)
    food = spawnFood();          // grew, no pop
else
    snake.pop();

✏️

Fill in the Blanks

+15 XP

The safe-spawn check uses the array method , which asks if ANY cell matches. Growth happens by skipping the .

🧠

Knowledge Check

+15 XP

snake.some(c => c.x === f.x && c.y === f.y) returns…

AThe matching cell

Btrue if at least one body cell is at the food position, the "is it on the snake?" answer

CA new array

🌀

Death, or Wrap-Around

Classic walls vs Pac-Man edges, as a toggle

Locked

🎯

Goal for this step

Implement both wall modes and self-collision death.

1Classic mode: head outside 0-24 → dead. Wrap mode: teleport across, (head.x + 25) % 25 handles both edges in one line!
2A checkbox above the canvas toggles the mode.
3Self-bite: head matches any body cell (some again) → dead.
4Death: stop ticking, dim the board, show score, Space restarts. Wrap mode is friendlier, mode choices widen your audience.

snake.html

const wrapMode = document.getElementById("wrap").checked;

if (wrapMode) {
    head.x = (head.x + 25) % 25;
    head.y = (head.y + 25) % 25;
} else if (head.x < 0 || head.x > 24 ||
           head.y < 0 || head.y > 24) {
    dead = true;
}

if (snake.some(c => c.x === head.x && c.y === head.y))
    dead = true;const wrapMode = document.getElementById("wrap").checked;

if (wrapMode) {
    head.x = (head.x + 25) % 25;
    head.y = (head.y + 25) % 25;
} else if (head.x < 0 || head.x > 24 ||
           head.y < 0 || head.y > 24) {
    dead = true;
}

if (snake.some(c => c.x === head.x && c.y === head.y))
    dead = true;

⌨️

Code Challenge

+20 XP

Wrap the head across the edges in one line per axis:

snake.html

head.x = (head.x + head.x = (head.x + ) % ) % ;;

💡 Hint: Adding the grid size first makes -1 wrap to 24; the remainder brings 25 back to 0.

🧠

Knowledge Check

+15 XP

Why add 25 before taking % 25?

ABecause % is broken

BJavaScript’s % keeps the sign: -1 % 25 is -1, but (-1 + 25) % 25 is the desired 24

CTo slow the snake

📱

Touch Controls

Swipe detection makes it a phone game

Locked

🎯

Goal for this step

Add swipe input so the game works on any phone.

1Record the touch start point (touchstart); on touchend compare positions.
2The bigger delta axis wins: |dx| > |dy| → left/right swipe, else up/down. Push into the SAME inputQueue, new input, zero new game logic.
3Add e.preventDefault() and the touch-action CSS so the page does not scroll while swiping.
4Open it on your phone (same Wi-Fi + a local server, or just send the file). Mobile game: done.

snake.html

let touchStart = null;
canvas.addEventListener("touchstart", function(e) {
    touchStart = { x: e.touches[0].clientX,
                   y: e.touches[0].clientY };
    e.preventDefault();
});
canvas.addEventListener("touchend", function(e) {
    if (!touchStart) return;
    const dx = e.changedTouches[0].clientX - touchStart.x;
    const dy = e.changedTouches[0].clientY - touchStart.y;
    if (Math.abs(dx) > Math.abs(dy))
        inputQueue.push({ x: dx > 0 ? 1 : -1, y: 0 });
    else
        inputQueue.push({ x: 0, y: dy > 0 ? 1 : -1 });
});let touchStart = null;
canvas.addEventListener("touchstart", function(e) {
    touchStart = { x: e.touches[0].clientX,
                   y: e.touches[0].clientY };
    e.preventDefault();
});
canvas.addEventListener("touchend", function(e) {
    if (!touchStart) return;
    const dx = e.changedTouches[0].clientX - touchStart.x;
    const dy = e.changedTouches[0].clientY - touchStart.y;
    if (Math.abs(dx) > Math.abs(dy))
        inputQueue.push({ x: dx > 0 ? 1 : -1, y: 0 });
    else
        inputQueue.push({ x: 0, y: dy > 0 ? 1 : -1 });
});

✏️

Fill in the Blanks

+15 XP

A swipe’s direction comes from comparing (dx) against abs(dy). Touch input pushes into the same input as the keyboard, no new game logic.

🧠

Knowledge Check

+15 XP

Feeding touch into the existing inputQueue demonstrates…

ALazy coding

BGood architecture: input SOURCES vary, the game logic stays one clean system

CA browser quirk

🏅

Speed, Score & Polish

Faster ticks, gradient body, saved best

Locked

🎯

Goal for this step

Finish with a speed curve, a pretty snake and a persistent record.

1Tick time shrinks with length: Math.max(60, 120 − snake.length * 2).
2Gradient body: colour each segment by its index (HSL makes this one line, hsl(140, 70%, L%) with L fading tailward).
3Best score in localStorage (Episode 1 skill, same three lines).
4Four browser games down. The finale upgrades your platformer to a full game!

snake.html

const tickTime = Math.max(60, 120 - snake.length * 2);

// gradient body while drawing (i = segment index):
snake.forEach(function(c, i) {
    const light = 55 - Math.min(35, i * 1.5);
    ctx.fillStyle = "hsl(155, 70%, " + light + "%)";
    ctx.fillRect(c.x * 20 + 1, c.y * 20 + 1, 18, 18);
});const tickTime = Math.max(60, 120 - snake.length * 2);

// gradient body while drawing (i = segment index):
snake.forEach(function(c, i) {
    const light = 55 - Math.min(35, i * 1.5);
    ctx.fillStyle = "hsl(155, 70%, " + light + "%)";
    ctx.fillRect(c.x * 20 + 1, c.y * 20 + 1, 18, 18);
});

⌨️

Code Challenge

+20 XP

Speed up with length, with a floor:

snake.html

const tickTime = Math.const tickTime = Math.(60, 120 - snake.(60, 120 - snake. * 2); * 2);

💡 Hint: The floor function picks the larger of the minimum (60) and the shrinking value based on how long the snake is.

🧠

Knowledge Check

+15 XP

HSL colour ("hsl(155, 70%, 40%)") beats hex codes for the gradient body because…

AIt is shorter to type

BYou can compute ONE number (lightness) per segment, hex would need string maths on three channels

CBrowsers render it faster

✅ See the complete finished Snake , all 6 steps assembled

Grid ticks, the input queue, food & growth, wall death vs wrap-around, touch swipes, the speed curve, gradient body and a saved best score , one file. Save it as snake.htmlsnake.html, open it, and play. Stuck on a step? Diff your file against this.

snake.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Hunter - Snake</title>
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:12px;
         background:#0d1117; color:#e8eaf2; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#0a0e14; border:2px solid #1e2733; border-radius:8px; touch-action:none; }
  .row { display:flex; gap:16px; align-items:center; font-size:.95rem; }
  label { display:flex; gap:6px; align-items:center; cursor:pointer; }
</style>
</head>
<body>
  <h2>🐍 Pixel Hunter</h2>
  <div class="row">
    <span>Score: <b id="score">0</b></span>
    <span>Best: <b id="best">0</b></span>
    <label><input type="checkbox" id="wrap"> Wrap-around walls</label>
  </div>
  <canvas id="game" width="500" height="500"></canvas>
  <div class="row">Arrow keys / swipe to move · Space to restart</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const CELL = 20, GRID = 25;

let snake, dir, inputQueue, food, dead, lastTick, score, best;
best = Number(localStorage.getItem("snakeBest") || 0);
document.getElementById("best").textContent = best;

function reset() {
  snake = [{x:12,y:12}, {x:11,y:12}, {x:10,y:12}];
  dir = {x:1, y:0};
  inputQueue = [];
  dead = false;
  lastTick = 0;
  score = 0;
  food = spawnFood();
  updateScore();
}

function spawnFood() {
  while (true) {
    const f = { x: Math.floor(Math.random()*GRID), y: Math.floor(Math.random()*GRID) };
    const onSnake = snake.some(c => c.x === f.x && c.y === f.y);
    if (!onSnake) return f;
  }
}

function updateScore() {
  score = snake.length - 3;
  document.getElementById("score").textContent = score;
}

// --- input: keyboard + touch both feed the SAME queue ---
document.addEventListener("keydown", function(e) {
  if (e.key === " " && dead) { reset(); return; }
  const map = { ArrowUp:{x:0,y:-1}, ArrowDown:{x:0,y:1},
                ArrowLeft:{x:-1,y:0}, ArrowRight:{x:1,y:0} };
  if (map[e.key]) inputQueue.push(map[e.key]);
});

let touchStart = null;
canvas.addEventListener("touchstart", function(e) {
  touchStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  e.preventDefault();
});
canvas.addEventListener("touchend", function(e) {
  if (!touchStart) return;
  const dx = e.changedTouches[0].clientX - touchStart.x;
  const dy = e.changedTouches[0].clientY - touchStart.y;
  if (Math.abs(dx) > Math.abs(dy)) inputQueue.push({ x: dx > 0 ? 1 : -1, y: 0 });
  else                              inputQueue.push({ x: 0, y: dy > 0 ? 1 : -1 });
  touchStart = null;
});

function step() {
  // one valid turn per tick
  while (inputQueue.length) {
    const want = inputQueue.shift();
    if (want.x !== -dir.x || want.y !== -dir.y) { dir = want; break; }
  }

  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
  const wrapMode = document.getElementById("wrap").checked;

  if (wrapMode) {
    head.x = (head.x + GRID) % GRID;
    head.y = (head.y + GRID) % GRID;
  } else if (head.x < 0 || head.x > GRID-1 || head.y < 0 || head.y > GRID-1) {
    dead = true; return;
  }

  if (snake.some(c => c.x === head.x && c.y === head.y)) { dead = true; return; }

  snake.unshift(head);
  if (head.x === food.x && head.y === food.y) { food = spawnFood(); updateScore(); }
  else snake.pop();
}

function draw(t) {
  ctx.clearRect(0, 0, 500, 500);

  // pulsing food
  const r = 8 + Math.sin(t/150) * 2;
  ctx.fillStyle = "#ff5470";
  ctx.beginPath();
  ctx.arc(food.x*CELL + CELL/2, food.y*CELL + CELL/2, r, 0, Math.PI*2);
  ctx.fill();

  // gradient body
  snake.forEach(function(c, i) {
    const light = 55 - Math.min(35, i*1.5);
    ctx.fillStyle = "hsl(155, 70%, " + light + "%)";
    ctx.fillRect(c.x*CELL + 1, c.y*CELL + 1, CELL-2, CELL-2);
  });

  if (dead) {
    ctx.fillStyle = "rgba(0,0,0,.6)";
    ctx.fillRect(0, 0, 500, 500);
    ctx.fillStyle = "#fff";
    ctx.font = "bold 34px system-ui";
    ctx.textAlign = "center";
    ctx.fillText("Game Over", 250, 235);
    ctx.font = "18px system-ui";
    ctx.fillText("Score " + score + " · press Space", 250, 270);
  }
}

function loop(t) {
  const tickTime = Math.max(60, 120 - snake.length*2);
  if (!dead && t - lastTick > tickTime) {
    lastTick = t;
    step();
    if (dead && score > best) {
      best = score;
      localStorage.setItem("snakeBest", best);
      document.getElementById("best").textContent = best;
    }
  }
  draw(t);
  requestAnimationFrame(loop);
}

reset();
requestAnimationFrame(loop);
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pixel Hunter - Snake</title>
<style>
  body { display:flex; flex-direction:column; align-items:center; gap:12px;
         background:#0d1117; color:#e8eaf2; font-family:system-ui, sans-serif; padding:16px; }
  canvas { background:#0a0e14; border:2px solid #1e2733; border-radius:8px; touch-action:none; }
  .row { display:flex; gap:16px; align-items:center; font-size:.95rem; }
  label { display:flex; gap:6px; align-items:center; cursor:pointer; }
</style>
</head>
<body>
  <h2>🐍 Pixel Hunter</h2>
  <div class="row">
    <span>Score: <b id="score">0</b></span>
    <span>Best: <b id="best">0</b></span>
    <label><input type="checkbox" id="wrap"> Wrap-around walls</label>
  </div>
  <canvas id="game" width="500" height="500"></canvas>
  <div class="row">Arrow keys / swipe to move · Space to restart</div>

<script>
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const CELL = 20, GRID = 25;

let snake, dir, inputQueue, food, dead, lastTick, score, best;
best = Number(localStorage.getItem("snakeBest") || 0);
document.getElementById("best").textContent = best;

function reset() {
  snake = [{x:12,y:12}, {x:11,y:12}, {x:10,y:12}];
  dir = {x:1, y:0};
  inputQueue = [];
  dead = false;
  lastTick = 0;
  score = 0;
  food = spawnFood();
  updateScore();
}

function spawnFood() {
  while (true) {
    const f = { x: Math.floor(Math.random()*GRID), y: Math.floor(Math.random()*GRID) };
    const onSnake = snake.some(c => c.x === f.x && c.y === f.y);
    if (!onSnake) return f;
  }
}

function updateScore() {
  score = snake.length - 3;
  document.getElementById("score").textContent = score;
}

// --- input: keyboard + touch both feed the SAME queue ---
document.addEventListener("keydown", function(e) {
  if (e.key === " " && dead) { reset(); return; }
  const map = { ArrowUp:{x:0,y:-1}, ArrowDown:{x:0,y:1},
                ArrowLeft:{x:-1,y:0}, ArrowRight:{x:1,y:0} };
  if (map[e.key]) inputQueue.push(map[e.key]);
});

let touchStart = null;
canvas.addEventListener("touchstart", function(e) {
  touchStart = { x: e.touches[0].clientX, y: e.touches[0].clientY };
  e.preventDefault();
});
canvas.addEventListener("touchend", function(e) {
  if (!touchStart) return;
  const dx = e.changedTouches[0].clientX - touchStart.x;
  const dy = e.changedTouches[0].clientY - touchStart.y;
  if (Math.abs(dx) > Math.abs(dy)) inputQueue.push({ x: dx > 0 ? 1 : -1, y: 0 });
  else                              inputQueue.push({ x: 0, y: dy > 0 ? 1 : -1 });
  touchStart = null;
});

function step() {
  // one valid turn per tick
  while (inputQueue.length) {
    const want = inputQueue.shift();
    if (want.x !== -dir.x || want.y !== -dir.y) { dir = want; break; }
  }

  const head = { x: snake[0].x + dir.x, y: snake[0].y + dir.y };
  const wrapMode = document.getElementById("wrap").checked;

  if (wrapMode) {
    head.x = (head.x + GRID) % GRID;
    head.y = (head.y + GRID) % GRID;
  } else if (head.x < 0 || head.x > GRID-1 || head.y < 0 || head.y > GRID-1) {
    dead = true; return;
  }

  if (snake.some(c => c.x === head.x && c.y === head.y)) { dead = true; return; }

  snake.unshift(head);
  if (head.x === food.x && head.y === food.y) { food = spawnFood(); updateScore(); }
  else snake.pop();
}

function draw(t) {
  ctx.clearRect(0, 0, 500, 500);

  // pulsing food
  const r = 8 + Math.sin(t/150) * 2;
  ctx.fillStyle = "#ff5470";
  ctx.beginPath();
  ctx.arc(food.x*CELL + CELL/2, food.y*CELL + CELL/2, r, 0, Math.PI*2);
  ctx.fill();

  // gradient body
  snake.forEach(function(c, i) {
    const light = 55 - Math.min(35, i*1.5);
    ctx.fillStyle = "hsl(155, 70%, " + light + "%)";
    ctx.fillRect(c.x*CELL + 1, c.y*CELL + 1, CELL-2, CELL-2);
  });

  if (dead) {
    ctx.fillStyle = "rgba(0,0,0,.6)";
    ctx.fillRect(0, 0, 500, 500);
    ctx.fillStyle = "#fff";
    ctx.font = "bold 34px system-ui";
    ctx.textAlign = "center";
    ctx.fillText("Game Over", 250, 235);
    ctx.font = "18px system-ui";
    ctx.fillText("Score " + score + " · press Space", 250, 270);
  }
}

function loop(t) {
  const tickTime = Math.max(60, 120 - snake.length*2);
  if (!dead && t - lastTick > tickTime) {
    lastTick = t;
    step();
    if (dead && score > best) {
      best = score;
      localStorage.setItem("snakeBest", best);
      document.getElementById("best").textContent = best;
    }
  }
  draw(t);
  requestAnimationFrame(loop);
}

reset();
requestAnimationFrame(loop);
</script>
</body>
</html>

🎉🏆🎮✨🎉

Workshop Complete!

Grid ticks, input queues and touch support, Snake that plays great on desktop AND phone. Up next: a full Browser Platformer!

Total XP

Level

Best Streak

Accuracy

▶ Episode 5: Browser Platformer →
⭐ View My Progress & Certificates

This workshop was free and took many hours to build. If it helped you learn something new, consider supporting the project.

☕ Support on Ko-fi

Pixel Hunter!Browser Snake

Pixel Hunter!
Browser Snake