Build a Complete Breakout Arcade Game in HTML
From Wikiprompt, the free prompt encyclopedia
Build a Complete Breakout Arcade Game in HTML A comprehensive prompt to generate a fully functional Breakout game in a single HTML file, covering gameplay, controls, visuals, audio, and technical details.
Prompt ContentSave
π
Build a complete, playable Breakout/Arcade game in a single HTML file using HTML, CSS, and JavaScript.
WHAT IT DOES
A classic brick-breaking game where the player controls a paddle to bounce a ball and destroy a grid of colorful bricks. The game should look modern, feel polished, and be immediately fun to play.
CORE FEATURES
1. Gameplay Mechanics
A paddle at the bottom that follows mouse movement or keyboard arrows
A ball that bounces off walls, paddle, and bricks
Colorful bricks arranged in rows, each brick requires one hit to break
The ball destroys bricks on collision and increases the score
Three lives; losing the ball when it falls below the paddle loses one life
Win condition: clear all bricks; Lose condition: lose all three lives
Multiple difficulty levels or levels that increase in speed/difficulty
2. Controls
Mouse: move paddle left and right by moving the cursor
Keyboard: Left/Right arrow keys to move the paddle
Spacebar: launch the ball at the start
P: pause the game
3. Visual Style
Modern, clean design with a dark background
Colorful bricks with subtle gradients
Glowing neon effects or soft shadows
Smooth animations
Clean typography for score and lives
Particle effects when bricks are destroyed
4. UI & HUD
Score display in the top-left
Lives display in the top-right (hearts or icons)
Current level display
Game Over screen with final score and restart option
Win screen with celebration effect
Pause overlay
Start screen with "Press Space to Start" instruction
5. Audio
Ball bounce sound effect (synthetic)
Brick break sound effect
Game Over sound
Win sound
6. Technical Details
Use HTML5 Canvas for rendering
All code in a single HTML file
Smooth 60fps performance with requestAnimationFrame
Collision detection: ball vs paddle, ball vs bricks, ball vs walls
Power-ups (optional): multi-ball, paddle size increase, slow ball
FILE STRUCTURE
One single HTML file with embedded CSS and JavaScript
No external dependencies
All assets (colors, shapes) generated in code
Responsive canvas that scales to fit the viewport
Build a polished, addictive Breakout game that someone would actually want to play.
Sign in to see the full prompt
Continue with:
By logging in, you agree to our Terms of Use and Privacy Policy
Usage
This prompt is designed for use with coding. Copy the prompt content above and paste it into your preferred AI tool.
For best results, you may customize the placeholders (indicated by square brackets or capital letters) with your specific requirements.
References
- Category: coding Prompts
- Source: https://x.com/eyishazyer/status/2075850024164950156
Talk
0 comments