Snake
🐍 Snake Game
A customizable Snake game built with JavaScript and HTML5. This game includes:
- Dynamic difficulty adjustment
- Name personalization
- High score tracking
- Keyboard controls
- Adjustable colors for snake and background
📁 Project Structure
project-root/ ├── index.html ├── script.js ← This file contains the core game logic ├── style.css ├── assets/ │ └── [optional images or icons] └── …
🚀 Features
- 🎮 Classic snake game mechanics
- 🎨 Customizable colors
- 📈 Score and high score tracking
- 💀 Game over detection and restart prompt
- ⚙️ Adjustable speed and expansion rate per difficulty
🔧 Game Settings
let SNAKE_SPEED = 5; // Controls frame rate (higher = faster snake)
let EXPANSION_RATE = 2; // How many segments are added per food
let GRID_SIZE = 21; // Size of the game grid
Difficulty options adjust these values dynamically.
🧠 Core Logic
Snake Movement
Controlled by Arrow keys. Snake moves based on inputDirection and updates its body segments.
Food Collision
When the snake head intersects food, new segments are added and the score increases.
Game Over Conditions
Snake hits the wall (outside grid)
Snake collides with its own body
User Interactions
Change Name
Change Snake Color
Change Background Color
Select Difficulty
New Game (resets the board and scores)
🕹️ Controls
Arrow Keys: Move the snake
Prompt Dialogs: Used for customizations (name, color, difficulty)
🧩 Utility Functions
getInputDirection()
expandSnake(amount)
getFoodPosition()
equalPositions(pos1, pos2)
outsideGrid(position)
snakeIntersection()
🖼️ UI Elements
Canvas: Renders the full-screen game
Div elements: Snake and food are dynamically added as <div> blocks styled with CSS Grid
Buttons:
Enter Name
Change Snake Colour
Change Background Colour
Change Difficulty
New Game
📊 Scoring
let currentScore = 0;
let currentHighScore = 0;
High score is only updated when a game ends with a score higher than the previous high score.