🐍 Snake Game - 貪食蛇

A classic snake game built with pure HTML, CSS, and JavaScript. Control the snake to eat food, grow longer, and achieve high scores!

🎮 Game Features

Core Gameplay

• Classic Snake Mechanics: Control a snake that continuously moves forward
• Food Collection: Eat red food items to grow longer and increase your score
• Collision Detection: Game ends when hitting walls or the snake's own body
• Auto-movement: Snake keeps moving in the current direction
• Direction Control: Use arrow keys or WASD to change direction (cannot reverse)

Difficulty Levels

Choose from 4 difficulty settings that control the snake's speed:

• Easy (慢速) - 150ms update speed - Perfect for beginners
• Medium (中速) - 100ms update speed - Balanced gameplay (default)
• Hard (快速) - 60ms update speed - For experienced players
• Expert (極速) - 35ms update speed - Ultimate challenge!

Score System

• Score Tracking: Earn 10 points for each food item
• High Score: Automatically saves your best score
• Player Names: Customize your player name for saved scores
• Score History: View all saved scores with difficulty levels
• Export Scores: Download scores as a .txt file

Visual Features

• Animated Snake: Realistic snake with directional eyes and animated tongue
• Gradient Body: Body segments with gradient opacity for depth
• Rounded Graphics: Modern, smooth visual design
• Grid Background: Clear grid for better spatial awareness
• Color-coded Difficulty Badges: Easy visual identification of difficulty levels

🚀 How to Play

Getting Started

1. Open index.html in your web browser
2. Enter your player name (optional)
3. Select your preferred difficulty level
4. Click "Start Game"

Controls

• Arrow Keys or WASD to control direction:
  • ⬆️ Up: Arrow Up or W
  • ⬇️ Down: Arrow Down or S
  • ⬅️ Left: Arrow Left or A
  • ➡️ Right: Arrow Right or D

Game Rules

1. The snake starts moving automatically to the right
2. Use controls to change direction (cannot reverse into yourself)
3. Eat the red food to grow longer and earn points
4. Avoid hitting walls or your own body
5. Try to achieve the highest score possible!

Buttons

• Start Game: Begin a new game
• Pause/Resume: Pause or resume the current game
• Save Score: Save your current score with player name and difficulty
• View Saved Scores: Open modal to see all saved scores
• Download scores.txt: Export all scores to a text file

📁 Project Structure

class1/
├── index.html          # Main HTML structure
├── style.css           # Styling and animations
├── game.js             # Game logic and functionality
└── README.md           # This file

🛠️ Technical Details

Technologies Used

• HTML5 Canvas: For game rendering
• Vanilla JavaScript: Game logic and controls
• CSS3: Modern styling with gradients and animations
• LocalStorage: Persistent score and high score storage

Game Configuration

• Canvas Size: 600x600 pixels
• Grid Size: 20 pixels per tile
• Tile Count: 30x30 grid
• Initial Snake Length: 5 segments
• Score per Food: 10 points

Difficulty Settings (Update Speed)

easy: 150ms
medium: 100ms
hard: 60ms
expert: 35ms

💾 Score Storage

LocalStorage Keys

• snakeHighScore: Stores the highest score achieved
• snakeSavedScores: Array of all saved game scores

Score Data Structure

Each saved score includes:

• Player name
• Score value
• Difficulty level
• Date and time

Exported Text File Format

SNAKE GAME (貪食蛇) - SAVED SCORES
==================================================

#1 - PlayerName
Score: 150
Difficulty: HARD
Date: 10/8/2025, 10:15:30 PM
--------------------------------------------------

🎨 Color Scheme

Difficulty Badges

• Easy: Green (#d4edda / #155724)
• Medium: Yellow (#fff3cd / #856404)
• Hard: Red (#f8d7da / #721c24)
• Expert: Blue (#d1ecf1 / #0c5460)

Game Elements

• Snake Body: Green (#4CAF50)
• Snake Head: Dark Green (#2E7D32)
• Food: Orange-Red (#FF5722)
• Background: Light Gray (#f0f0f0)
• Grid Lines: Light Gray (#e0e0e0)

🌟 Features Highlights

Responsive Design

• Adapts to different screen sizes
• Mobile-friendly controls information
• Flexible layout for various devices

User Experience

• Clear visual feedback for game states
• Smooth animations and transitions
• Intuitive controls and UI
• Persistent data across sessions

Game Mechanics

• Prevents backward movement (anti-reverse logic)
• Smart food placement (never spawns on snake)
• Accurate collision detection
• Smooth continuous movement

📝 Future Enhancement Ideas

• Add sound effects and background music
• Implement power-ups and special items
• Add obstacles and maze levels
• Multiplayer mode
• Mobile touch controls
• Leaderboard with online sync
• Different snake skins/themes
• Achievement system

🐛 Known Issues

None currently. If you find any bugs, please report them!

📄 License

This is a free, open-source educational project. Feel free to use, modify, and distribute.

👨‍💻 Development

Running Locally

Simply open index.html in any modern web browser. No build process or dependencies required!

Browser Compatibility

• Chrome (recommended)
• Firefox
• Safari
• Edge
• Any modern browser with HTML5 Canvas support

---

Enjoy the game! 🐍🎮

Classic Snake Game (貪食蛇) - Pure Frontend Implementation