Skip to Content
GuidesDevelopment

Last Updated: 3/6/2026

Development Guide

This guide covers setting up your development environment and contributing to the Snake Game project.

Prerequisites

  • Node.js: Version 16 or higher
  • npm: Version 7 or higher (comes with Node.js)
  • A modern web browser (Chrome, Firefox, Safari, or Edge)

Setup

  1. Clone the repository
git clone https://github.com/jeverest/snake-game.git
cd snake-game
  1. Install dependencies
npm install
  1. Start the development server
npm run dev

The game will be available at http://localhost:5173.

Project Structure

snake-game/
├── src/
│   ├── main.ts        # Core game logic and SnakeGame class
│   ├── style.css      # Global styles
│   └── typescript.svg # TypeScript logo asset
├── public/            # Static assets (served as-is)
├── index.html         # HTML entry point
├── package.json       # Project metadata and dependencies
├── tsconfig.json      # TypeScript compiler configuration
├── README.md          # Main documentation
├── README2.md         # Future plans
└── README3.md         # User feedback

Development Workflow

Hot Module Replacement (HMR)

Vite provides instant HMR during development. Changes to TypeScript and CSS files will update in the browser without a full reload.

TypeScript

The project uses TypeScript for type safety. The compiler is configured in tsconfig.json with:

  • Target: ES2020
  • Module: ESNext
  • Strict mode: Enabled

Debugging

Browser DevTools

Use browser DevTools to:

  • Set breakpoints in TypeScript source (source maps enabled)
  • Inspect canvas rendering
  • Monitor performance
  • Check localStorage for high scores

Console Logging

Add console logs to debug game logic:

console.log('Snake position:', this.snake[0])
console.log('Food position:', this.food)

Testing Changes

  1. Visual testing: Play the game and verify behavior
  2. Edge cases:
    • Test grid expansion (fill 25% of grid)
    • Test collision detection (walls and self-collision)
    • Test pause/resume functionality
    • Test keyboard controls (arrows, WASD, special keys)
  3. Responsive design: Test at different viewport sizes

Building for Production

Build Command

npm run build

This:

  1. Compiles TypeScript to JavaScript
  2. Bundles all assets
  3. Minifies code
  4. Outputs to the dist/ directory

Preview Production Build

npm run preview

Serves the production build locally for testing.

Code Style

TypeScript Conventions

  • Use camelCase for variables and methods
  • Use PascalCase for classes and types
  • Use UPPER_CASE for constants
  • Prefer const over let when possible
  • Add type annotations for function parameters and return values

Example

class SnakeGame {
  private readonly canvas: HTMLCanvasElement
  private gameSpeed: number = 200
  
  constructor() {
    this.canvas = document.getElementById('canvas') as HTMLCanvasElement
  }
  
  private calculateScore(length: number): number {
    return length - 1
  }
}

Common Tasks

Adding a New Feature

  1. Identify where the feature fits in the SnakeGame class
  2. Add private methods or properties as needed
  3. Update the game loop (update()) or rendering (draw()) if necessary
  4. Add keyboard controls in handleKeyPress() if applicable
  5. Test thoroughly

Modifying Rendering

  • Ground plane: Edit drawGroundPlane()
  • Grid lines: Edit drawGridLines()
  • Blocks: Edit drawBlock() and color constants
  • Isometric projection: Adjust isoAngle, perspectiveRatio, or perspectiveStrength

Changing Game Mechanics

  • Speed: Modify baseSpeed and speed adjustment in expandGrid()
  • Grid expansion: Change threshold in checkGridExpansion()
  • Collision rules: Edit checkCollision()

Troubleshooting

Canvas not rendering

  • Check browser console for errors
  • Verify canvas element exists in index.html
  • Ensure updateCanvasSize() is called on initialization

Performance issues

  • Check grid size (larger grids = more rendering)
  • Verify coordinate caching is working (isoCache)
  • Use browser Performance profiler

TypeScript errors

  • Run npm run build to see all compiler errors
  • Check type annotations match actual values
  • Ensure all properties are initialized

Future Development

See Future Plans and User Feedback for upcoming features:

  • Color blind mode
  • Online high score leaderboard
  • Multiplayer (2 snakes)
  • Additional themes

Resources

GuidesDeployment