Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a classic Brick Breaker game with modern graphics using HTML5 Canvas. The application will feature multiple levels, power-ups, a scoring system, and responsive controls, all designed to provide an engaging gaming experience. The game will be optimized for mobile devices, ensuring a wide accessibility across different platforms.

## CORE FEATURES
1. **Multiple Levels**: A variety of levels with increasing difficulty, each featuring unique brick layouts and challenges.
2. **Power-Ups**: Various power-ups that enhance gameplay, such as extra balls, wider paddles, and explosive bricks.
3. **Score System**: A comprehensive scoring system that tracks player scores and displays high scores.
4. **Lives Mechanic**: Players have a limited number of lives, adding a challenge to the gameplay.
5. **Sound Effects**: Engaging sound effects for actions like brick breaking and power-up collection to enhance the gaming experience.
6. **Particle Animations**: Visual effects such as particle animations when bricks are broken, adding flair to the gameplay.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography.
- **Color Mode**: Light theme with dark text on light backgrounds.
- **Primary Color**: #1978E5 (accent for buttons, links, highlights).
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The main layout structure will include a full-screen canvas for gameplay, a score display at the top, and buttons for starting/restarting the game at the bottom, ensuring all elements are easily accessible and visible.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use React's built-in state management for handling game states.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Game Canvas**: Implement a full-screen HTML5 Canvas for the game area.
3. **Develop Game Logic**: Code the core game mechanics, including ball movement, collision detection, and brick-breaking logic.
4. **Implement Levels**: Set up multiple levels with varying configurations of bricks and difficulties.
5. **Add Power-Ups**: Create different power-ups, coding their effects and how they integrate into the game.
6. **Score Tracking**: Implement a scoring system that updates the score display in real-time.
7. **Sound Effects**: Integrate sound effects for key actions using a suitable audio library.
8. **Responsive Design**: Ensure the game is responsive and works seamlessly on mobile devices, adjusting the canvas size accordingly.
9. **Testing & Debugging**: Rigorously test the game for bugs and ensure all features work as intended.

## USER EXPERIENCE
Players will start the game with a simple interface featuring a play button. Upon starting, they will be presented with a full-screen canvas where the game will unfold. The score will be displayed prominently at the top, and players will receive feedback through sound effects and visual animations as they break bricks and collect power-ups. The game will offer a clear indication of lives remaining and allow players to restart the game easily upon losing all lives or completing a level. The minimalist design will ensure that players can focus on the gameplay without distractions.