Skip to Content
🔧 ReferenceConfiguration

Last Updated: 3/18/2026

Snake Game uses sensible defaults for most configuration, but several parameters can be customized to modify gameplay, rendering, and build behavior. This guide covers the available configuration options and how to change them.

TypeScript Configuration

The project uses a strict TypeScript configuration defined in tsconfig.json. Key settings:

Compiler Options

Target — ES2022 for modern JavaScript features including top-level await and class fields.

Module System — ESNext with bundler resolution. Vite handles module bundling, so TypeScript doesn’t emit JavaScript files (noEmit: true).

Strict Mode — Enabled with additional linting rules:

  • strict: true — All strict type-checking flags enabled
  • noUnusedLocals: true — Error on unused local variables
  • noUnusedParameters: true — Error on unused function parameters
  • noFallthroughCasesInSwitch: true — Require explicit break or return in switch cases

These settings catch potential bugs during development but can be relaxed for experimentation. To allow unused variables, set noUnusedLocals: false in tsconfig.json.

Library Includes — ES2022, DOM, and DOM.Iterable for modern JavaScript APIs and browser APIs. Canvas rendering requires the DOM typings.

Vite Configuration

The project uses Vite’s default configuration with no custom vite.config.ts file. Defaults include:

  • Development server — Port 5173, with hot module replacement (HMR)
  • Build output — dist/ directory with minified JavaScript and CSS
  • Public assets — Files in public/ directory served at root path

To customize Vite, create a vite.config.ts file in the project root. Common customizations:

import { defineConfig } from 'vite'
 
export default defineConfig({
  server: {
    port: 3000  // Change dev server port
  },
  build: {
    outDir: 'build'  // Change output directory
  }
})

See Vite documentation  for all available options.

Game Constants

Several constants in src/main.ts control gameplay and rendering behavior. Modify these to customize the game experience:

Canvas and Rendering

ISO_MIN_WIDTH — Minimum canvas width in pixels (default: 300). The canvas never shrinks below this width, even on narrow viewports.

ISO_MAX_WIDTH — Maximum canvas width in pixels (default: 1200). The canvas never exceeds this width, preventing excessively large rendering on wide displays.

Changing these values affects the visual scale of the grid:

  • Smaller values → more compact grid, faster rendering
  • Larger values → more detailed grid, higher GPU load

Game Speed

baseSpeed — Initial game loop interval in milliseconds (default: 200). This controls how fast the snake moves at level 1.

Lower values increase speed:

  • 100 — 10 moves per second (2× faster)
  • 50 — 20 moves per second (4× faster)

Higher values decrease speed:

  • 300 — 3.33 moves per second (slower, easier for beginners)

The game halves baseSpeed on each level increase. If you set baseSpeed: 400, level 2 runs at 200ms, level 3 at 100ms, etc.

Perspective and Rotation

perspectiveRatio — Vertical squash factor for the isometric projection (default: 0.5). Controls how “tall” the 3D view appears.

perspectiveStrength — Depth scaling intensity (default: 0.4). Higher values make closer blocks appear larger.

autoRotateSpeed — Rotation speed in radians per second when bot mode is enabled (default: 0.15). One full rotation takes approximately 42 seconds at default speed.

Adjust these to change the 3D appearance:

private perspectiveRatio: number = 0.6  // Taller blocks
private perspectiveStrength: number = 0.6  // More pronounced depth
private autoRotateSpeed: number = 0.3  // Faster rotation

Grid Limits

initialGridSize — Starting grid size (default: 10). Players can adjust this with + and - keys, clamped between 5 and 50.

To change the default starting size, modify the initialization:

private gridSize: number = 15  // Start at 15×15
private initialGridSize: number = 15

To change the min/max limits, modify the clamping logic in handleKeyPress():

this.initialGridSize = Math.min(this.initialGridSize + 5, 100)  // Allow up to 100×100
this.initialGridSize = Math.max(this.initialGridSize - 5, 3)   // Allow down to 3×3

localStorage Keys

The game uses browser localStorage for persistence:

snake-high-score — Stores the all-time high score as a string.

To clear the high score manually, open the browser console and run:

localStorage.removeItem('snake-high-score')

To inspect the current high score:

localStorage.getItem('snake-high-score')

High scores are scoped per browser and per domain. Deploying to a different domain resets high scores for users.

Bot Scoring Weights

Each bot profile uses a custom scoring function defined in src/bots/. To modify bot behavior, adjust the scoring weights in the respective bot file:

Survival Bot (src/bots/survival-bot.ts)

score += analysis.reachableArea * 25  // Increase to prioritize space more
score += analysis.canReachTail ? 100000 : -100000  // Critical safety check
score += ateFood ? 30000 : 0  // Increase to chase food more aggressively

Hunter Bot (src/bots/hunter-bot.ts)

score += ateFood ? 20000 : 0  // Food priority
score += analysis.pathToFood !== null ? 9000 - analysis.pathToFood * 50 : -6000

Explorer Bot (src/bots/explorer-bot.ts)

score += marginToWall * 120  // Wall avoidance strength
score += analysis.reachableArea * 35  // Space priority

Experiment with different weights to create custom bot personalities. A bot with ateFood ? 50000 : 0 becomes extremely aggressive. A bot with reachableArea * 50 prioritizes space over all else.

What’s Next

  • Game Mechanics: Understanding how the core game logic implements these configurable behaviors
  • Quick Start: Put your configuration changes into practice by playing a game
🤖 Bot Automation