Skip to Content
Technical DocumentationArchitecture

Last Updated: 3/6/2026

Architecture Overview

The Snake Game is built using TypeScript and HTML5 Canvas, with a modern build setup powered by Vite.

Project Structure

snake-game/
├── src/
│   ├── main.ts        # Core game logic
│   ├── style.css      # Styling
│   └── typescript.svg # Assets
├── public/            # Static assets
├── index.html         # Entry point
├── package.json       # Dependencies
└── tsconfig.json      # TypeScript config

Core Components

SnakeGame Class

The main game class (SnakeGame) encapsulates all game logic:

  • Canvas Management: Handles canvas sizing, rendering, and coordinate transformations
  • Game State: Tracks snake position, food location, score, level, and game status
  • Isometric Rendering: Implements a 2.5D isometric view with perspective projection
  • Game Loop: Manages frame updates and collision detection

Rendering System

The game uses a custom isometric projection system:

  • Grid-based coordinates: Internal game logic uses simple (x, y) grid positions
  • Isometric transformation: Converts grid coordinates to isometric screen positions
  • Perspective projection: Applies depth-based scaling for 3D effect
  • Painter’s algorithm: Sorts objects back-to-front for correct rendering order

Key Features

  1. Dynamic Grid Expansion: Grid doubles when snake fills 25% of the board
  2. Adjustable Resolution: Starting grid size can be configured (5×5 to 50×50)
  3. Rotation Controls: View can be rotated using Q/E keys
  4. Perspective Adjustment: Perspective strength can be modified with [/] keys

Technical Details

Coordinate System

The game uses three coordinate spaces:

  1. Grid Space: Integer coordinates (0 to gridSize-1)
  2. Isometric Space: Rotated and scaled 2D coordinates
  3. Screen Space: Final canvas pixel coordinates with perspective

Performance Optimizations

  • Coordinate Caching: Pre-calculates isometric positions for all grid intersections
  • Path Batching: Groups checkerboard tiles into two Path2D objects for efficient rendering
  • Selective Grid Lines: Skips grid rendering when tiles are too small

Build System

The project uses Vite for:

  • Fast development server with HMR
  • TypeScript compilation
  • Production bundling and optimization

Available Scripts

npm run dev      # Start dev server
npm run build    # Build for production
npm run preview  # Preview production build

Dependencies

  • TypeScript: Type-safe development
  • Vite: Build tooling and dev server

No runtime dependencies required - the game runs entirely in the browser using native Canvas APIs.

READMEApi