Snake Game

A TypeScript implementation of the classic Snake game using HTML5 Canvas.

Setup

Prerequisites

• Node.js and npm installed
• Modern web browser

Installation

npm install

Development

Compile TypeScript

npm run build

This compiles snake-game.ts to dist/snake-game.js.

Run the Application

npm run start

This builds the TypeScript code and opens the game in your default browser.

Alternatively, you can:

1. Run npm run build to compile the TypeScript
2. Open index.html in your browser manually

File Structure

├── snake-game.ts      # Main game logic (Snake, Food, Game classes)
├── index.html         # HTML page with canvas and UI
├── dist/
│   └── snake-game.js  # Compiled JavaScript
├── tsconfig.json      # TypeScript configuration
├── package.json       # Project configuration and scripts
└── README.md          # This file

How to Play

Controls

• Arrow Keys or WASD: Move the snake
  • ↑/W: Move up
  • ↓/S: Move down
  • ←/A: Move left
  • →/D: Move right
• Space: Restart game after game over

Game Rules

• The snake starts moving automatically
• Guide the snake to eat the red food squares
• Each food eaten increases your score by 10 points
• The snake grows longer with each food eaten
• Avoid hitting the walls or the snake's own body
• Game ends when you collide with walls or yourself

Scoring

• Starting score: 0
• Points per food: 10
• Score is displayed at the top of the game

Game Features

• Smooth snake movement with collision detection
• Food respawning in random positions
• Score tracking
• Game over detection with restart option
• Responsive controls with direction validation
• Clean TypeScript code with proper typing

Development Notes

The game uses a 20x20 grid system with each cell being 20x20 pixels on a 400x400 canvas. The game runs at 10 FPS (100ms intervals) for classic snake game timing.

TypeScript Classes

• Snake: Handles snake movement, growth, and collision detection
• Food: Manages food positioning and respawning
• SnakeGame: Main game controller with update loop and rendering

Making Changes

1. Edit snake-game.ts for game logic changes
2. Run npm run build to compile
3. Refresh the browser to see changes

Disclaimer

This game was completely written using OpenCode and Big Pickle as the model.

Prompt 1

Write me the code for a snake game in typescript.

Followed the instruction and the game did work. Ran another prompt.

Prompt 2

The game is frozen, only showing a box and score.

The game works. I ran one more prompt.

Prompt 3

Create a readme file to show how to update, compile, and run the application. Also, include how to play the game.