Skip to Content
Technical DocumentationApi

Last Updated: 3/6/2026

API Reference

SnakeGame Class

The main game class that manages all game logic and rendering.

Constructor

constructor()

Initializes the game, sets up the canvas, loads high score, and registers event listeners.

Public Methods

startNewGame()

startNewGame(): void

Resets and starts a new game session.

  • Resets grid to initial size
  • Clears snake to center position
  • Resets score, level, and speed
  • Spawns initial food
  • Clears pause and game over states

Private Methods

updateCanvasSize()

private updateCanvasSize(): void

Recalculates canvas dimensions and isometric projection matrices based on current grid size and viewport.

toIso(gridX: number, gridY: number)

private toIso(gridX: number, gridY: number): { x: number; y: number }

Transforms grid coordinates to isometric screen coordinates with perspective projection.

Parameters:

  • gridX: Grid x-coordinate
  • gridY: Grid y-coordinate

Returns: Screen coordinates { x, y }

draw()

private draw(): void

Renders the complete game scene:

  1. Clears canvas
  2. Draws ground plane (checkerboard)
  3. Draws grid lines
  4. Draws ground border
  5. Sorts and renders all game objects (snake, food) with shadows

update()

private update(): void

Game loop tick function that:

  • Moves snake in current direction
  • Checks collisions
  • Handles food consumption
  • Triggers grid expansion when needed

checkCollision(head: Position)

private checkCollision(head: Position): boolean

Checks if the given position collides with walls or snake body.

Parameters:

  • head: Position to check

Returns: true if collision detected

spawnFood()

private spawnFood(): void

Spawns food at a random empty grid position.

expandGrid()

private expandGrid(): void

Doubles the grid size, advances level, and increases game speed.

togglePause()

private togglePause(): void

Toggles pause state and shows/hides pause overlay.

endGame()

private endGame(): void

Ends the game, saves high score if applicable, and shows game over screen.

Rendering Methods

drawGroundPlane()

private drawGroundPlane(): void

Draws the checkerboard ground pattern using Path2D batching.

drawGridLines()

private drawGridLines(): void

Draws subtle grid lines (skipped when tiles are too small).

drawGroundBorder()

private drawGroundBorder(): void

Draws the border around the game grid.

drawBlock(gx, gy, topColor, rightColor, leftColor)

private drawBlock(
  gx: number,
  gy: number,
  topColor: string,
  rightColor: string,
  leftColor: string
): void

Draws a 3D isometric block at grid position (gx, gy).

Parameters:

  • gx: Grid x-coordinate
  • gy: Grid y-coordinate
  • topColor: CSS color for top face
  • rightColor: CSS color for right-facing sides
  • leftColor: CSS color for left-facing sides

drawBlockShadow(gx, gy)

private drawBlockShadow(gx: number, gy: number): void

Draws a shadow on the ground beneath a block.

getBlockHeight(gx, gy)

private getBlockHeight(gx: number, gy: number): number

Calculates the screen-space height of a block with perspective scaling.

Storage Methods

getHighScore()

private getHighScore(): number

Retrieves high score from localStorage.

Returns: High score value (0 if none saved)

saveHighScore(score)

private saveHighScore(score: number): void

Saves high score to localStorage.

loadHighScore()

private loadHighScore(): void

Loads and displays high score in UI.

Types

Position

type Position = { x: number; y: number }

Represents a grid coordinate.

Direction

type Direction = 'UP' | 'DOWN' | 'LEFT' | 'RIGHT'

Represents snake movement direction.

Constants

ISO_MIN_WIDTH

const ISO_MIN_WIDTH = 300

Minimum isometric view width in pixels.

ISO_MAX_WIDTH

const ISO_MAX_WIDTH = 1200

Maximum isometric view width in pixels.

ArchitectureGuides