Skip to Content
Development

Last Updated: 3/6/2026

Development Guide

This guide covers setting up your development environment, making changes, and deploying the Snake Game.

Prerequisites

  • Node.js 16+ (18+ recommended)
  • npm 7+ (comes with Node.js)
  • A modern web browser (Chrome, Firefox, Safari, Edge)

Local Setup

1. Clone the Repository

git clone https://github.com/jeverest/snake-game.git
cd snake-game

2. Install Dependencies

npm install

This installs:

  • vite - Fast build tool and dev server
  • typescript - Type checking and compilation

3. Start Development Server

npm run dev

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

  • Hot Module Replacement (HMR): Changes reflect instantly
  • TypeScript type checking: Errors shown in terminal and browser
  • Source maps: Debug original TypeScript in browser DevTools

Project Commands

CommandDescription
npm run devStart development server with HMR
npm run buildBuild for production (outputs to dist/)
npm run previewPreview production build locally

Development Workflow

Making Changes

  1. Game Logic: Edit src/main.ts

    • The SnakeGame class contains all game logic
    • TypeScript provides type safety and IntelliSense

  2. Styling: Edit src/style.css

    • UI styles for menus, overlays, and canvas container
    • Dark theme variables at the top

  3. HTML Structure: Edit index.html

    • Game screens and UI elements
    • Canvas element and script loading

Testing Changes

Currently, testing is manual:

  1. Run npm run dev
  2. Play the game and verify behavior
  3. Test edge cases (collision, grid expansion, pause)
  4. Check browser console for errors

Recommended test scenarios:

  • Start game and move in all directions
  • Eat food and verify score increment
  • Fill 25% of grid to trigger expansion
  • Pause and resume mid-game
  • Adjust grid size before starting
  • Rotate view with Q/E keys
  • Adjust perspective with [ and ] keys
  • Test collision detection at boundaries
  • Verify high score persistence (close and reopen browser)

Debugging Tips

Browser DevTools

  • Console: View console.log() output and errors
  • Debugger: Set breakpoints in TypeScript source
  • Performance: Profile canvas rendering performance
  • Application: Inspect localStorage for high score

Common Issues

Game runs too fast/slow:

  • Check gameSpeed and baseSpeed values
  • Verify setInterval is cleared on game over

Rendering glitches:

  • Inspect isoCache values in debugger
  • Verify updateCanvasSize() is called on resize
  • Check painter’s algorithm sort order

Input not working:

  • Ensure canvas has focus (click it)
  • Check handleKeyPress event listener
  • Verify direction validation logic

Building for Production

Create Production Build

npm run build

This:

  1. Compiles TypeScript to JavaScript
  2. Bundles and minifies code
  3. Optimizes assets
  4. Outputs to dist/ directory

Preview Production Build

npm run preview

Serves the production build locally to verify before deployment.

Deployment

The dist/ folder can be deployed to any static hosting service:

  • Vercel: vercel deploy
  • Netlify: Drag dist/ to Netlify dashboard
  • GitHub Pages: Push dist/ to gh-pages branch
  • Cloudflare Pages: Connect repo and set build command to npm run build

Code Style

The project uses TypeScript’s strict mode:

{
  "compilerOptions": {
    "strict": true,
    "target": "ES2020",
    "module": "ESNext"
  }
}

Guidelines:

  • Use const and let, avoid var
  • Prefer arrow functions for callbacks
  • Add type annotations for public methods
  • Use descriptive variable names
  • Comment complex algorithms (e.g., isometric projection)

Performance Optimization

When making changes, consider:

  1. Canvas operations are expensive: Batch drawing calls
  2. Avoid recreating objects: Reuse Position objects where possible
  3. Pre-compute when possible: Use isoCache for grid coordinates
  4. Profile before optimizing: Use browser Performance tools

Adding New Features

Example: Adding Sound Effects

  1. Add audio files to public/sounds/
  2. Create Audio instances in SnakeGame constructor
  3. Play sounds on events (eat food, game over, level up)
private eatSound: HTMLAudioElement
 
constructor() {
  this.eatSound = new Audio('/sounds/eat.mp3')
  // ...
}
 
private update() {
  // ...
  if (head.x === this.food.x && head.y === this.food.y) {
    this.eatSound.play()
    this.score++
    // ...
  }
}

Getting Help

ArchitectureRendering