Hidden Snake in the blog — how I built a game in an afternoon

Every tech blog needs an easter egg. This one has Snake.

Why Snake

Because it's easy to grasp, hard to master, and ideal for practicing the Canvas API. Plus — who hasn't played Snake on a Nokia?

How it works

Canvas rendering

The whole game runs on HTML5 Canvas — no DOM, no CSS animations. The playing field is a 20×20 cell grid, the snake moves by cells, not by pixels.

// Game loop — every tick moves the snake one cell
const tick = () => {
  const head = { ...snake[0] }
  if (dir === 'UP') head.y--
  if (dir === 'DOWN') head.y++

  // Collision with wall or self = game over
  if (head.x < 0 || head.x >= GRID) return gameOver()
  if (snake.some(s => s.x === head.x && s.y === head.y)) return gameOver()

  snake.unshift(head)
  if (head.x === food.x && head.y === food.y) {
    score += 10
    spawnFood()
  } else {
    snake.pop()
  }
}

Mobile controls

Arrow keys on desktop, swipe gestures on mobile. Detection is simple — I compare the finger position on touchstart and touchend:

const dx = touchEnd.x - touchStart.x
const dy = touchEnd.y - touchStart.y

if (Math.abs(dx) > Math.abs(dy)) {
  // Horizontal swipe
  direction = dx > 0 ? 'RIGHT' : 'LEFT'
} else {
  // Vertical swipe
  direction = dy > 0 ? 'DOWN' : 'UP'
}

The game runs in a fullscreen modal, so swipes don't conflict with page scrolling.

Try it

Open the terminal and type snake:

What I learned

Canvas API is surprisingly pleasant. requestAnimationFrame + a simple state machine = a smooth game. No framework, no library.

Touch events aren't complicated. Two event listeners and a bit of math. Swipe detection in 15 lines of code.

Vercel Blob is ideal for small data. A JSON file with 10 entries? Perfect use case. No Postgres, no Redis.