I want build pong game, game has 3 mode easy, normal, hard. game must be mobile friendly
Generated Prompt
## APPLICATION OVERVIEW This project is a web application for a Pong game that features three difficulty modes: easy, normal, and hard. The game is designed to be mobile-friendly, providing an engaging experience for users on various devices. The focus is on simplicity and accessibility, making it easy for players of all skill levels to enjoy the classic arcade-style gameplay. ## CORE FEATURES 1. **Three Difficulty Modes**: The game offers easy, normal, and hard modes, allowing players to choose their preferred challenge level. 2. **Mobile-Friendly Design**: The interface is optimized for touch interactions, ensuring a seamless experience on smartphones and tablets. 3. **Score Tracking**: Players can see their scores during gameplay, with high scores saved for each difficulty mode. 4. **Responsive Controls**: Intuitive touch controls for paddle movement, enhancing gameplay fluidity on mobile devices. 5. **Minimalist Aesthetic**: Clean and simple visuals that keep the focus on gameplay, with a light theme and clear typography. ## 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 will consist of a central game area, with a header showcasing the game title and options for difficulty selection, and a footer for score display. ## TECHNICAL REQUIREMENTS - Framework: React with TypeScript - Styling: Tailwind CSS - UI Components: shadcn/ui - State Management: React's built-in state management or Context API for handling game state and scores. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components. 3. **Create Game Components**: - Develop a `Game` component to handle the gameplay mechanics. - Create a `DifficultySelector` for users to choose between easy, normal, and hard modes. - Implement a `Scoreboard` component to display the current score and high scores. 4. **Implement Game Logic**: - Code the game mechanics using React hooks (useEffect for game loop, useState for score tracking). - Ensure touch controls are responsive for mobile devices. 5. **Design Layout**: Structure the layout using Tailwind CSS classes to achieve the minimalist aesthetic with appropriate spacing and alignments. 6. **Testing**: Test the game across various devices to ensure mobile compatibility and fluid gameplay. 7. **Deployment**: Deploy the application on a suitable hosting platform (e.g., Vercel or Netlify). ## USER EXPERIENCE Users will interact with the application by selecting their desired difficulty mode from the main menu. Upon starting the game, they will use touch controls to move the paddle and keep the ball in play. The score will update in real-time, and players can easily see their performance. The minimalist design will ensure that users can focus on the game without distractions, providing an enjoyable gaming experience across all devices.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
