Skip to Content
Architecture

Last Updated: 3/6/2026

Architecture Overview

The Snake Game is built as a single-page application using TypeScript and HTML5 Canvas, with a focus on isometric 3D rendering and progressive difficulty scaling.

Project Structure

snake-game/
├── src/
│   ├── main.ts          # Main game class and logic
│   ├── style.css        # UI and canvas styling
│   └── typescript.svg   # TypeScript logo asset
├── public/              # Static assets
├── index.html           # Entry point
├── package.json         # Dependencies and scripts
└── tsconfig.json        # TypeScript configuration

Core Components

SnakeGame Class

The entire game is implemented as a single SnakeGame class that manages:

  • Canvas Rendering: 2D context with isometric projection
  • Game State: Snake position, food location, score, level, grid size
  • Input Handling: Keyboard events for movement and controls
  • Game Loop: Interval-based update cycle with variable speed
  • Persistence: High score storage via localStorage

Key Systems

1. Isometric Rendering System

The game uses a custom isometric projection to render a 2D grid game in pseudo-3D:

  • Basis vectors define the grid-to-screen transformation
  • Perspective projection adds depth perception
  • Painter’s algorithm sorts objects back-to-front for correct overlap
  • Block rendering draws 3D cubes with top, left, and right faces

2. Grid Expansion Mechanic

Unlike traditional Snake, this game features dynamic grid scaling:

  • Grid starts at configurable size (default 10×10)
  • When snake fills 25% of grid, the grid doubles in size
  • Level increments and game speed increases
  • Snake position is preserved during expansion

3. Game Loop Architecture

setInterval(() => this.update(), this.gameSpeed)
  • Fixed time-step updates via setInterval
  • Speed decreases (interval halves) on level up
  • Separate draw and update cycles
  • Pause support via boolean flag

Data Flow

  1. Input → Keyboard event → Direction change
  2. Update → Move snake head → Collision check → Food check → Grid expansion check
  3. Render → Sort objects → Draw ground → Draw shadows → Draw blocks
  4. UI Update → Score, level, grid size display

Build System

Vite is used for development and production builds:

  • Dev server: Hot module replacement at localhost:5173
  • TypeScript compilation: Type checking and transpilation
  • Production build: Optimized bundle in dist/

Performance Considerations

  • Cached isometric coordinates: Pre-computed grid intersections
  • Path2D batching: Ground tiles drawn in two batches (light/dark)
  • Conditional grid lines: Hidden when tiles are too small
  • Canvas size optimization: Fixed dimensions to prevent reflows

Extensibility

The class-based architecture makes it easy to:

  • Add new game modes (multiplayer, obstacles)
  • Customize rendering (different themes, effects)
  • Implement power-ups or special food types
  • Add sound effects and music
  • Create difficulty presets
README3Development