Skip to Content
Snake GameREADME

Last Updated: 2/13/2026

jrn: readme-mlhnrz5bf39e attention:

  • op: file path: src/main.ts
  • op: file path: README.md
  • op: file path: README2.md
  • op: file path: README3.md

Snake Game 🐍

A modern, progressively challenging Snake game built with TypeScript and Vite. Features dynamic grid expansion, adjustable starting grid size, increasing difficulty levels, and a clean, responsive interface.

Snake Game

Vite

✨ Features

  • Adjustable Starting Grid: Use +/- keys to change grid resolution (5x5 to 50x50) before the game starts
  • Progressive Difficulty: Grid doubles in size when you fill 25% of the space
  • Dynamic Levels: Game speed increases with each level
  • Fixed Canvas Size: 300x300px canvas with dynamically calculated cell sizes
  • High Score Tracking: Persistent high scores saved in local storage
  • Responsive Controls: Support for both arrow keys and WASD
  • Pause Functionality: Press ‘P’ to pause/resume the game
  • Clean UI: Modern dark theme with smooth animations
  • Mobile Responsive: Adapts to different screen sizes
  • Check out more detail here Feature Detail

🔮 Coming Soon

  • 2.5D Mode: Isometric view with 3D snake rendering for an enhanced visual experience
  • 2 Snakes at Once: Simultaneous control of two snakes for an extra challenge
  • Rename to “snek”: Future branding update planned
  • Color Blind Mode: Accessibility feature to support players with color vision deficiencies

💬 User Feedback

We’ve received valuable feedback from our community:

  • Request for color blind mode to improve accessibility
  • Interest in viewing other players’ high scores (leaderboard feature)

These features are being considered for future releases. See README3.md for more user feedback.

🎮 How to Play

  1. Click New Game to start
  2. (Optional) Press + or - to adjust the starting grid size (5x5 to 50x50)
  3. Press any Arrow Key or WASD key to begin moving the snake
  4. Eat the red food to grow and increase your score
  5. Avoid hitting the walls or yourself
  6. Press P to pause the game at any time
  7. Press Shift+R to reset and return to the menu
  8. The grid expands when you fill 25% of the space, increasing the challenge!

🚀 Getting Started

Prerequisites

  • Node.js (version 14 or higher)
  • npm or yarn

Installation

  1. Clone the repository:
git clone <repository-url>
cd snake-game
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev
  1. Open your browser and navigate to http://localhost:5173

🛠️ Build

To create a production build:

npm run build

The built files will be in the dist directory.

To preview the production build:

npm run preview

📦 Tech Stack

  • TypeScript: Type-safe game logic
  • Vite: Fast build tool and dev server
  • HTML5 Canvas: For rendering the game
  • CSS3: Modern styling with animations
  • LocalStorage: Persistent high score tracking

🎯 Game Mechanics

Scoring

  • Each food item eaten = +1 point
  • High scores are automatically saved

Level Progression

  • Level 1: Starts with configurable grid (default 10x10, adjustable 5x5 to 50x50)
  • Level 2+: Grid doubles (20x20, 40x40, etc.) when 25% filled
  • Game speed increases with each level (update interval halves: 200ms → 100ms → 50ms, etc.)

Controls

KeyAction
↑ / WMove Up
↓ / SMove Down
← / AMove Left
→ / DMove Right
PPause/Resume
Shift+RReset to Menu
+/-Adjust grid size (before game starts)

📁 Project Structure

snake-game/
├── src/
│   ├── main.ts          # Game logic and class
│   ├── style.css        # Styling
│   └── typescript.svg   # TypeScript logo
├── public/
│   └── vite.svg         # Vite logo
├── index.html           # Main HTML file
├── package.json         # Dependencies and scripts
├── tsconfig.json        # TypeScript configuration
├── README.md            # Project documentation
├── README2.md           # Future plans
└── README3.md           # User feedback

🏗️ Architecture

Component Overview

  • SnakeGame Class: Core game controller managing all game logic
  • Game State: Tracks snake position, food, score, level, and grid dimensions
  • Rendering Engine: Handles all Canvas API drawing operations with fixed 300x300px canvas
  • Input Handler: Processes keyboard events and game controls
  • Game Loop: Manages game tick updates, collision detection, and progression
  • LocalStorage: Persists high scores across sessions

🎨 Customization

You can easily customize the game by modifying these values in main.ts:

const CANVAS_SIZE = 300              // Fixed canvas size in pixels
private gridSize: number = 10        // Starting grid size
private initialGridSize: number = 10 // Default starting grid size
private gameSpeed: number = 200      // Initial game speed in ms
private baseSpeed: number = 200      // Base speed for calculations

The cell size is automatically calculated as CANVAS_SIZE / gridSize, ensuring the grid always fits perfectly within the fixed canvas.

Color scheme can be modified in style.css:

--snake-color: #4ade80;    /* Snake head color */
--snake-body: #22c55e;     /* Snake body color */
--food-color: #ef4444;     /* Food color */
--bg-color: #1a1a1a;       /* Background color */

🤝 Contributing

Contributions are welcome! Feel free to:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📝 License

This project is open source and available under the MIT License.

Feature Detail