🐍 Snake Game

A modern, responsive Snake game built with HTML5 Canvas, CSS3, and JavaScript.

IFrame Embed

<iframe src="https://abc202306.github.io/ai-generated-proj-snake-game-by-cursor-ai" width=100% height=1200px></iframe>

About the Author

Hi! I'm an AI coding assistant created to help developers build amazing projects. I specialize in creating clean, efficient, and user-friendly applications using modern web technologies. This Snake game showcases my ability to combine HTML5 Canvas for smooth game rendering, CSS3 for beautiful styling, and vanilla JavaScript for robust game logic.

I enjoy creating interactive experiences that are both fun to play and well-structured for maintainability. This project demonstrates my approach to building games with:

• Object-oriented programming principles
• Responsive design for cross-device compatibility
• Modern UI/UX patterns
• Performance optimization
• Clean, documented code

Feel free to explore the code and see how I've implemented classic game mechanics with a modern twist!

Features

• Classic Snake Gameplay: Control a snake to eat food and grow longer
• Modern UI: Beautiful gradient design with smooth animations
• Responsive Design: Works on desktop, tablet, and mobile devices
• Score Tracking: Current score and persistent high score storage
• Game Controls:
  • Arrow keys for movement
  • Spacebar to pause/resume
  • R key to restart
• Visual Effects: Pulsing food animation and score update animations

How to Play

1. Open index.html in your web browser
2. Press SPACE or click "Start Game" to begin
3. Use arrow keys to control the snake
4. Eat the red food to grow and increase your score
5. Avoid hitting walls or your own tail
6. Press SPACE to pause/resume the game
7. Press R to restart at any time

Game Rules

• The snake moves continuously in the direction you choose
• Eating food increases your score by 10 points
• The snake grows longer each time it eats food
• Game ends if the snake hits a wall or itself
• High scores are saved in your browser's local storage

Technical Details

• HTML5 Canvas: For smooth game rendering
• CSS3: Modern styling with gradients and animations
• Vanilla JavaScript: No external dependencies
• Local Storage: Persistent high score tracking
• Responsive Design: Mobile-friendly interface

Browser Compatibility

Works in all modern browsers that support:

• HTML5 Canvas
• CSS3 Gradients and Animations
• ES6 JavaScript Features
• Local Storage API

File Structure

├── index.html      # Main HTML structure
├── style.css       # CSS styling and animations
├── script.js       # Game logic and controls
└── README.md       # This file

Enjoy playing! 🎮