MCP Server Template for Cursor IDE

# Game Plan: Snake Game with Fruits and Bombs ## Overview This game plan outlines the implementation of a Snake game where fruits increase the snake's length and bombs decrease it. With each new fruit eaten, a new additional bomb appears on the canvas. Bombs remain on the canvas until hit by the snake. ## Project Architecture - **Frontend**: HTML5 Canvas with JavaScript for game rendering and logic - **Game Components**: - Game class: Main controller for game state and loop - Snake class: Manages snake segments, movement, and collision - Food class: Handles fruit generation and consumption - Bomb class: Manages bomb generation and collision - Renderer: Handles drawing all game elements on canvas ## Implementation Stages ### Stage 1: Project Setup **Tasks:** - Create directory structure - Set up HTML, CSS, and JavaScript files - Initialize Canvas element - Set up development environment **Acceptance Criteria:** - Project structure is established - Canvas is properly initialized and visible - Basic styling is applied - Development environment is ready ### Stage 2: Core Game Logic **Tasks:** - Implement game loop using requestAnimationFrame - Create input handling for arrow keys/WASD - Implement basic grid system for game objects - Set up game state management (start, play, game over) **Acceptance Criteria:** - Game loop runs at consistent frame rate - Input handling works correctly - Grid system properly positions game elements - Game states transition correctly ### Stage 3: Snake Implementation **Tasks:** - Create Snake class with segments array - Implement snake movement in four directions - Add collision detection with walls and self - Implement snake growth mechanism **Acceptance Criteria:** - Snake renders correctly on the canvas - Snake moves in response to user input - Snake detects collisions with walls and itself - Snake can grow when eating food ### Stage 4: Food & Bomb Mechanics **Tasks:** - Implement Food class for generating fruits - Create Bomb class for generating bombs - Add collision detection for snake with food and bombs - Implement the mechanic to add a new bomb when food is eaten - Implement snake length decrease when hitting bombs **Acceptance Criteria:** - Food appears randomly on the grid - Bombs appear when food is eaten - Snake grows when eating food - Snake shrinks when hitting bombs - Bombs remain until hit ### Stage 5: Game States & Polish **Tasks:** - Implement start screen with instructions - Create game over screen with score and restart option - Add scoring system - Implement visual and audio feedback - Add final polish and optimizations **Acceptance Criteria:** - Game has clear start and end states - Score is tracked and displayed - Visual feedback enhances gameplay - Game runs smoothly without performance issues ## Implementation Details ### File Structure ``` snake-game/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── game.js │ ├── snake.js │ ├── food.js │ ├── bomb.js │ └── renderer.js └── assets/ ├── images/ └── sounds/ ``` ### Technical Considerations 1. **Canvas Performance**: Use efficient rendering techniques to maintain smooth gameplay 2. **Collision Detection**: Implement grid-based collision for better performance 3. **Game Loop**: Use requestAnimationFrame for consistent timing 4. **Mobile Support**: Add touch controls for mobile devices if time permits ## Reasoning The component-based architecture allows for clean separation of concerns while keeping the codebase maintainable. Using Canvas provides good performance for 2D games with frequent updates. The staged approach ensures we can build and test incrementally, focusing on core functionality first before adding polish. ## Impact Analysis - **Performance**: The game should run smoothly on modern browsers - **Maintainability**: The modular structure makes it easy to extend or modify - **User Experience**: Simple controls and clear feedback will make the game intuitive ## Success Criteria The implementation will be considered successful when: 1. The snake moves smoothly in response to user input 2. Fruits and bombs appear correctly on the canvas 3. Snake grows when eating fruits and shrinks when hitting bombs 4. A new bomb appears each time a fruit is eaten 5. Game states (start, play, game over) transition correctly 6. The game runs without performance issues