🐍 SvelteKit Snake Game

A modern, fully-featured snake game built with SvelteKit. This project demonstrates advanced Svelte concepts including reactive stores, canvas rendering, and component-based architecture.

✨ Features

• Smooth Canvas-Based Rendering - 60fps gameplay with HTML5 Canvas
• Reactive State Management - Built with Svelte stores
• Keyboard Controls - Arrow keys and WASD support
• Pause/Resume Functionality - Never lose your progress
• Modern UI Design - Beautiful dark theme with neon aesthetics
• Score Tracking - Real-time score display
• Game Over Screen - In-app game over UI (no annoying alerts!)
• Responsive Layout - Works on different screen sizes

🎮 How to Play

Controls

• Arrow Keys or WASD - Move the snake
• Space - Start the game
• P or ESC - Pause/Resume game

Rules

• 🟢 Eat the green food to grow your snake and score points
• ⚠️ Avoid hitting the walls or it's game over
• ⚠️ Don't run into yourself or the game ends
• 📈 Each food eaten = 10 points
• 🎯 Try to beat your high score!

🚀 Getting Started

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Installation

1. Clone the repository

   git clone https://github.com/User17745/sveltekit-snake.git
   cd sveltekit-snake
   

2. Install dependencies

   npm install
   

3. Start the development server

   npm run dev
   

4. Open your browser Navigate to http://localhost:5173

Building for Production

npm run build
npm run preview

📁 Project Structure

src/
├── routes/
│   ├── +layout.svelte          # App layout
│   └── +page.svelte            # Main game page
├── lib/
│   ├── components/            # Svelte components
│   ├── stores/                 # Svelte stores for state management
│   ├── types/                  # TypeScript type definitions
│   └── utils/                  # Utility functions
└── assets/                    # Static assets

🎨 Features in Detail

Game Mechanics

• Snake Movement: Smooth grid-based movement
• Food System: Random food spawning with score tracking
• Collision Detection: Wall and self-collision detection
• Game Loop: Consistent 100ms update interval for predictable gameplay

State Management

• Game State: Tracks game status (menu, playing, paused, game over)
• Snake State: Manages snake position, direction, and body segments
• Score State: Real-time score tracking
• Food State: Handles food positioning and spawning

UI Components

• Game Overlay: Start screen with centered button
• Game Over Screen: Beautiful in-app game over UI
• Controls Display: Clear control instructions
• Responsive Canvas: Adapts to different screen sizes

🔧 Technology Stack

• Framework: SvelteKit 2.x
• Language: TypeScript
• Build Tool: Vite
• Rendering: Canvas API
• State Management: Svelte Stores
• Styling: Scoped CSS

📝 Development

Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Run type checking
npm run check

Adding Features

The game is designed to be easily extensible. Here are some ideas for enhancements:

• Power-ups: Speed boost, slow motion, invincibility
• Multiple Game Modes: Classic, Time Attack, Obstacles
• High Score System: LocalStorage-based persistence
• Sound Effects: Audio feedback for actions
• Mobile Controls: Touch/swipe support
• Difficulty Levels: Easy, Medium, Hard
• Particle Effects: Visual polish
• Level Progression: Increasing difficulty
• Leaderboard: Multiplayer competition

🤝 Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Built with SvelteKit
• Inspired by the classic Snake game
• Created as a demonstration of modern web development with Svelte

🎯 Future Enhancements

• Add power-ups system
• Implement multiple game modes
• Add high score persistence
• Mobile touch controls
• Sound effects and background music
• Difficulty levels
• Particle effects and visual polish
• Level progression system
• Leaderboard (if backend is added)

📞 Support

If you encounter any issues or have questions, please open an issue on GitHub.

Enjoy playing! 🎮🐍