Skip to Content
Contributing

Last Updated: 3/6/2026

Contributing Guide

Thank you for your interest in contributing to Snake Game! This guide will help you get started.

Ways to Contribute

1. Report Bugs

Found a bug? Please open an issue  with:

  • Description: What happened vs. what you expected
  • Steps to reproduce: Exact steps to trigger the bug
  • Environment: Browser, OS, screen size
  • Screenshots: If applicable

2. Suggest Features

Have an idea? Open an issue with the enhancement label:

  • Describe the feature and its use case
  • Explain why it would benefit users
  • Consider implementation complexity

3. Improve Documentation

Documentation improvements are always welcome:

  • Fix typos or unclear explanations
  • Add examples or diagrams
  • Expand API documentation
  • Write tutorials or guides

4. Submit Code

Ready to code? Follow the workflow below.

Development Workflow

1. Fork and Clone

# Fork the repo on GitHub, then:
git clone https://github.com/YOUR_USERNAME/snake-game.git
cd snake-game

2. Create a Branch

git checkout -b feature/your-feature-name
# or
git checkout -b fix/bug-description

Branch naming conventions:

  • feature/ for new features
  • fix/ for bug fixes
  • docs/ for documentation
  • refactor/ for code improvements

3. Make Changes

npm install
npm run dev

Make your changes and test thoroughly:

  • Functionality: Does it work as intended?
  • Edge cases: Test boundary conditions
  • Performance: No significant slowdown?
  • Cross-browser: Test in Chrome, Firefox, Safari

4. Commit Changes

Write clear, descriptive commit messages:

git add .
git commit -m "Add multiplayer mode with split-screen support"

Good commit messages:

  • Start with a verb (Add, Fix, Update, Refactor)
  • Be specific (not “Fix bug” but “Fix collision detection at grid edges”)
  • Keep under 72 characters
  • Add details in the body if needed

5. Push and Open PR

git push origin feature/your-feature-name

Then open a Pull Request on GitHub:

  1. Go to your fork on GitHub
  2. Click “Compare & pull request”
  3. Fill out the PR template:
    • What: Describe your changes
    • Why: Explain the motivation
    • How: Outline the implementation
    • Testing: Describe how you tested

6. Code Review

A maintainer will review your PR:

  • Address feedback promptly
  • Push additional commits to the same branch
  • Be open to suggestions

7. Merge

Once approved, your PR will be merged. Congratulations! 🎉

Code Guidelines

TypeScript Style

  • Use strict types: Avoid any when possible
  • Prefer const: Use let only when reassignment is needed
  • Arrow functions: Use for callbacks and short functions
  • Descriptive names: snakeHeadPosition not shp

Code Organization

  • Keep methods small: Each method should do one thing
  • Comment complex logic: Especially math-heavy code (isometric projection)
  • Avoid magic numbers: Use named constants

Example

// Good
const GRID_EXPANSION_THRESHOLD = 0.25
if (snakeLength / totalCells >= GRID_EXPANSION_THRESHOLD) {
  this.expandGrid()
}
 
// Avoid
if (this.snake.length / (this.gridSize * this.gridSize) >= 0.25) {
  this.expandGrid()
}

Testing Guidelines

Currently, the project uses manual testing. When submitting a PR, please test:

Core Functionality

  • Snake moves in all four directions
  • Food spawns at random positions
  • Score increments when food is eaten
  • Collision detection works (walls and self)
  • Grid expands at 25% fill
  • Level and speed increase on expansion
  • High score persists across sessions

Controls

  • Arrow keys and WASD work
  • Pause/resume with P key
  • Restart with R key
  • Grid size adjustment with +/- (pre-game)
  • View rotation with Q/E
  • Perspective adjustment with [ and ]

UI/UX

  • Game starts on first directional input
  • Pause screen appears/disappears correctly
  • Game over screen shows correct score
  • High score updates on new record
  • Canvas resizes on window resize

Browser Compatibility

  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

Feature Ideas

Looking for something to work on? Here are some ideas:

Easy

  • Add sound effects (eat, game over, level up)
  • Add color themes (light mode, neon, retro)
  • Add difficulty presets (slow, normal, fast)
  • Add keyboard shortcuts to pause screen

Medium

  • Add obstacles that spawn randomly
  • Add power-ups (speed boost, invincibility)
  • Add leaderboard (top 10 scores)
  • Add touch controls for mobile
  • Add game statistics (total games, average score)

Hard

  • Add multiplayer mode (2 snakes, shared grid)
  • Add AI opponent
  • Add procedurally generated mazes
  • Add WebGL rendering for better performance
  • Add replay system to watch past games

Project Structure

Understanding the codebase:

src/
├── main.ts          # SnakeGame class (all game logic)
├── style.css        # UI styles
└── typescript.svg   # Logo asset

index.html           # HTML structure
package.json         # Dependencies and scripts
tsconfig.json        # TypeScript config

Key files to understand:

  • src/main.ts: Start here - contains the entire game
  • docs/architecture.md: System design overview
  • docs/rendering.md: Isometric rendering explanation

Getting Help

  • Questions: Open a GitHub Discussion
  • Bugs: Open an issue
  • Real-time chat: (Add Discord/Slack link if available)

Code of Conduct

Be respectful and constructive:

  • Welcome newcomers
  • Provide helpful feedback
  • Be patient with questions
  • Credit others’ work
  • Focus on the code, not the person

License

By contributing, you agree that your contributions will be licensed under the same license as the project.

Thank you for contributing to Snake Game! 🐍✨

RenderingGame Mechanics