Snake Game (React)

A simple Snake game built with React. Move the snake to eat bait, grow longer, avoid obstacles and your own tail.

Features

• Classic snake gameplay
• Keyboard controls (arrow keys)
• Bait and obstacles with random positioning
• Score tracking and game over screen

Getting Started

Prerequisites: Node.js (14+) and npm or yarn.

Install dependencies:

npm install
# or
yarn

Run the development server:

npm start
# or
yarn start

Build for production:

npm run build
# or
yarn build

Run tests:

npm test

Controls

• Arrow keys or W/A/S/D to move
• P to pause (if implemented)
• Refresh or restart button to play again

How to Play

• Guide the snake to eat the bait to score points and grow longer.
• Avoid hitting walls, obstacles, or the snake's own body.
• The game ends on collision; try to beat your high score!

Project Structure

• src/ – React source files
  • components/ – UI components: snake.js, bait.js, obstacle.js, score.js, gameover.js, instructions.js
  • utils/ – helper utilities for random positions and debouncing
  • App.js – main app component

High-level Design

• Architecture: Single-page React application. App.js holds the main game state and loop; presentational components in src/components/ render UI elements.
• Data flow: App maintains core state: snake (array of positions), direction, bait, obstacles, score, and status (playing, paused, gameover). Child components receive props and emit events (callbacks) for user actions.
• Game loop: A timed tick (e.g., setInterval) in App advances game state each frame: move snake, detect collisions, spawn bait/obstacles, and trigger re-render.
• Utilities: src/utils/ provides deterministic helpers: random position generators and debouncing for input handling.

Low-level Design

• Grid & Coordinates: Fixed grid with a GRID_SIZE constant. Positions are { x, y } pairs where 0 <= x,y < GRID_SIZE.
• Snake representation: An array of Position objects (head at index 0). On move: compute the new head by adding a direction delta, unshift it, and pop the tail unless bait was eaten.
• Bait & Obstacles: Bait is a single Position; obstacles is an array of Position. Use getRandomPositionForBait() and getRandomPositionForObstacle() to generate positions that do not collide with the snake or existing obstacles.
• Collision detection: On each tick check in order: wall collisions (if walls are fatal), obstacle collisions, self-collision (head equals any body segment). If collision, set status = 'gameover'.
• Movement & Input: Keyboard handlers update a queued nextDirection to avoid 180° reversals. Input may be debounced to prevent overly-fast direction changes.
• Key functions / modules:
  • moveSnake() — advances the snake and handles growth
  • changeDirection() — validates and sets new direction
  • spawnBait() / spawnObstacles() — pick non-colliding positions
  • checkCollision() — returns collision type (none / wall / obstacle / self)
  • resetGame() — reinitializes game state
• Timing & performance: Tick rate is configurable (e.g., TICK_MS); keep render work minimal and use React state updates sparingly for smooth gameplay.
• Testing: Unit tests for movement and collision are in src/components/snake.test.js and src/components/bait.test.js.

Contributing

Contributions are welcome. Open issues or submit pull requests for bug fixes and enhancements.