Snake Game (Matrix)

Classic snake, acid-green Matrix paint job. Arrow keys / WASD to move, swipe on mobile. Full source code on the page — zero deps, zero tracking.

Runs online in your browserNo installNo accountFree

Score: 0Best: 0Ready

↑↓←→orWASDmoveSpacepauseRrestarton mobile: swipe

Source code

Pure TypeScript — no deps, no framework. Auto-synced from src/tools/snake/game.ts.

5291 chars

/**
 * Snake game — pure, testable core. No DOM, no React, no timing.
 *
 * Contract: the UI layer calls `initialState()` once, then `tick(state, dir)`
 * on each animation step. `tick` never mutates — it returns the next state so
 * rendering stays a pure projection of state.
 *
 * Grid coordinates: origin top-left. x grows right, y grows down.
 * A cell `{x, y}` is valid iff `0 <= x < width` and `0 <= y < height`.
 */

export type Direction = "up" | "down" | "left" | "right";
export interface Cell {
  readonly x: number;
  readonly y: number;
}
export interface GameState {
  readonly width: number;
  readonly height: number;
  /** Head at index 0, tail at the end. */
  readonly snake: readonly Cell[];
  readonly food: Cell;
  readonly dir: Direction;
  readonly pending: Direction | null;
  readonly score: number;
  readonly tickCount: number;
  readonly over: boolean;
}

export const GRID_W = 24;
export const GRID_H = 18;

/** Deterministic RNG (mulberry32) so tests stay reproducible. */
export function makeRng(seed: number): () => number {
  let a = seed >>> 0;
  return () => {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

const OPPOSITE: Record<Direction, Direction> = {
  up: "down",
  down: "up",
  left: "right",
  right: "left",
};

function stepOf(dir: Direction): Cell {
  switch (dir) {
    case "up":
      return { x: 0, y: -1 };
    case "down":
      return { x: 0, y: 1 };
    case "left":
      return { x: -1, y: 0 };
    case "right":
      return { x: 1, y: 0 };
  }
}

function cellsEqual(a: Cell, b: Cell): boolean {
  return a.x === b.x && b.y === a.y;
}

/** Pick a food cell uniformly at random from the free squares. */
export function placeFood(
  width: number,
  height: number,
  snake: readonly Cell[],
  rand: () => number,
): Cell {
  const occupied = new Set(snake.map((c) => `${c.x},${c.y}`));
  const free: Cell[] = [];
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      if (!occupied.has(`${x},${y}`)) free.push({ x, y });
    }
  }
  // If the board is literally full the player has won; fall back to head cell.
  if (free.length === 0) return snake[0] ?? { x: 0, y: 0 };
  const idx = Math.floor(rand() * free.length);
  return free[idx] ?? free[0]!;
}

export function initialState(
  width = GRID_W,
  height = GRID_H,
  rand: () => number = Math.random,
): GameState {
  const cx = Math.floor(width / 2);
  const cy = Math.floor(height / 2);
  // Start 3 long, moving right; body trails to the left so the first tick is legal.
  const snake: Cell[] = [
    { x: cx, y: cy },
    { x: cx - 1, y: cy },
    { x: cx - 2, y: cy },
  ];
  return {
    width,
    height,
    snake,
    food: placeFood(width, height, snake, rand),
    dir: "right",
    pending: null,
    score: 0,
    tickCount: 0,
    over: false,
  };
}

/**
 * Queue a direction change. 180° turns are silently dropped — otherwise a
 * fast double-tap on "left then right" would instantly kill the snake.
 * Changes are applied on the next `tick`, so two turns in the same frame
 * don't collapse the snake onto itself either.
 */
export function queueDirection(state: GameState, next: Direction): GameState {
  if (state.over) return state;
  const current = state.pending ?? state.dir;
  if (next === current) return state;
  if (OPPOSITE[current] === next) return state;
  return { ...state, pending: next };
}

/**
 * Advance the simulation by one step. Returns the next state.
 *
 *  1. Apply any queued turn.
 *  2. Move head; if it leaves the board → game over.
 *  3. If head overlaps food → grow (skip tail pop) + place new food.
 *  4. If head overlaps body (after tail pop) → game over.
 */
export function tick(state: GameState, rand: () => number = Math.random): GameState {
  if (state.over) return state;

  const dir = state.pending ?? state.dir;
  const step = stepOf(dir);
  const head = state.snake[0]!;
  const nextHead: Cell = { x: head.x + step.x, y: head.y + step.y };

  const hitWall =
    nextHead.x < 0 || nextHead.x >= state.width || nextHead.y < 0 || nextHead.y >= state.height;
  if (hitWall) {
    return { ...state, dir, pending: null, over: true };
  }

  const ateFood = nextHead.x === state.food.x && nextHead.y === state.food.y;
  const body = ateFood ? state.snake : state.snake.slice(0, -1);
  const nextSnake: Cell[] = [nextHead, ...body];

  // Body collision check — skip head (index 0) since it IS nextHead.
  for (let i = 1; i < nextSnake.length; i++) {
    if (cellsEqual(nextHead, nextSnake[i]!)) {
      return { ...state, snake: nextSnake, dir, pending: null, over: true };
    }
  }

  const nextFood = ateFood ? placeFood(state.width, state.height, nextSnake, rand) : state.food;

  return {
    ...state,
    snake: nextSnake,
    food: nextFood,
    dir,
    pending: null,
    score: ateFood ? state.score + 1 : state.score,
    tickCount: state.tickCount + 1,
    over: false,
  };
}

/** Ticks per second schedule — snake speeds up as you score. */
export function tickRate(score: number): number {
  // Starts at 8 tps, caps at 18 tps around score 40. Feels fair, stays winnable.
  return Math.min(18, 8 + Math.floor(score / 4));
}

Loading tool…

How to use Snake Game (Matrix)

Tap or click the board to focus, then press an arrow key (or W/A/S/D) to start moving. On mobile, swipe in the direction you want to turn.
Steer the glowing snake toward the glyph food. Each pickup grows the snake by one cell and adds a point to your score.
Use Space to pause and resume. Use R to abandon the current run and reset the board.
The snake speeds up every 4 points — plan a route through your own body before the speed ramp catches you out.
When you crash, your best score is kept in browser storage so the next run can target it.

Snake, rendered as Matrix glyphs

A tiny browser game tucked inside dev101's tool box. The game rules are the classic snake you already know — grow by eating food, die on walls or your own body — but every cell is painted as a random character in acid green, turning the whole thing into a moving wall of glyphs. Keyboard first, touch second, zero runtime dependencies, and the full game logic is printed on the page so you can read, copy, or fork it.

The game loop, in one paragraph

initialState() places a 3-cell snake in the center of a 24 × 18 grid with food at a random free cell. tick() advances the head one step in the current direction (or the queued one, if the player just turned), checks the head against the walls and the body, grows the snake if the head lands on food, and places new food on a uniformly-random free cell. The rendering layer calls tick() on a time-accumulator schedule — 8 ticks per second at score 0, ramping up one tick per second every 4 points, capped at 18 tps. That's it. The whole module is under 200 lines, which is the point — shipping the source on the page is only interesting if the source is short enough to actually read.

Why the 180° turn rule matters

A naive snake implementation lets the player change direction on every keystroke. The failure mode: press "left" then immediately "right" (or any opposite-pair sequence) and the snake instantly runs into its own neck, game over. This implementation rejects the opposite-direction input at queueDirection time and also defers all turns to the next tick via a pending slot, so two legal 90° turns in one frame (e.g., "up" then "right") can't collapse the snake either. You can still chain rapid turns — they just land one per tick, which is what you wanted anyway.

Deterministic RNG for tests

The module ships a makeRng(seed) helper (Mulberry32) so the test suite can replay the same sequence of food placements. placeFood is deterministic given an rng + snake, which lets tests set up contrived "head about to hit food" or "head about to hit body" scenarios and verify the score / over transitions without timing flake. The game defaults to Math.random in production; tests pass a seeded rng when they need reproducibility.

Matrix aesthetic, technically

The snake body is drawn one glyph per cell, with the head rendered in near-white for legibility and the body tapering from acid-green to a dim trailing green. The food is a single katakana/latin/digit glyph with a canvas shadowBlur of 12px to make it glow against the dark background. Cells snap to a faint 1px grid so the playfield reads as a terminal instead of a painting. The glyph alphabet is the same one the site-wide MatrixRain background uses — if you know what dev101.io looks like, the snake feels native.

Keyboard-first, touch-second

Desktop players get arrow keys and WASD with Space to pause and R to reset. Mobile players get native swipe gestures inside the board plus a three-button D-pad under the canvas — preferring the swipe if both are available, but keeping the buttons as an affordance for players who don't realize the canvas is swipe-sensitive. The canvas captures touchmove to suppress iOS pull-to-refresh, so a downward swipe doesn't accidentally reload the page when you're trying to turn south.

About the source block below

Everything in the pre-formatted source panel is exactly what runs the game. A prebuild hook re-reads src/tools/snake/game.ts and writes a TypeScript module that exports the file contents as a string — the component imports that string and pastes it into a <pre>. There's no manual copy step; if the game changes, the on-page source changes on the next deploy. Copy-button copies the literal source; character counter under it matches the file length byte-for-byte (minus encoding of backslashes and backticks, which the generator escapes so the template literal stays valid).

Frequently asked questions

How do I play?

Press an arrow key (↑ ↓ ← →) or a WASD key to start — the snake begins moving in that direction. Eat the glowing glyph to grow by one cell and score a point. Don't run into the walls or your own tail. Press Space to pause, R to restart. On mobile, swipe inside the board or tap the on-screen D-pad. The snake speeds up every 4 points until it caps at roughly double the starting speed — by score 40 it's moving fast enough to force you to plan two moves ahead, not just react.

Why does this look like The Matrix?

The entire dev101.io site is themed around the Matrix terminal aesthetic — acid green (HSL 135 100% 54%), JetBrains Mono glyphs, and a falling-character background. The snake picks up that vibe: each body cell renders as a random latin / digit / katakana character instead of a solid color block, and the food is a single glowing glyph you're chasing across the grid. It's the same palette that the rest of the toolbox uses, so if you live here while debugging you don't get a jarring context switch when you need five minutes of decompression.

Is the source code on the page the real source?

Yes. The source block on this page is auto-generated from the actual game module (src/tools/snake/game.ts) by a prebuild script — every time the site is deployed, the file content gets embedded back into the page. It's not a simplified tutorial version; it's the literal module that the canvas renderer ticks 8-18 times per second. You can copy it, paste it into a blank TS file, and it runs as-is (paired with a tiny canvas wrapper). The rendering layer is intentionally *not* pasted to keep the block short — the game logic is the interesting part and stays under 200 lines.

Does the game phone home?

No. The whole game — input, state, rendering, scoring, high-score persistence — runs in your browser. The only storage used is localStorage for your high score, under the key 'dev101-snake-hi'. Clear your site data and it's gone. There's no analytics event on keystrokes, no network request per tick, nothing streamed back. The site does set an analytics cookie if you opt in via the consent banner, but none of that instrumentation is wired into the game.

Source code

How to use Snake Game (Matrix)

Snake, rendered as Matrix glyphs

The game loop, in one paragraph

Why the 180° turn rule matters

Deterministic RNG for tests

Matrix aesthetic, technically

Keyboard-first, touch-second

About the source block below

Frequently asked questions

Related tools

Source code