What You'll Build
- A top-down space shooter with:
- Canvas-rendered spaceship with smooth movement
- Waves of enemies that get progressively harder
- Power-ups (shield, rapid fire, spread shot)
- Lives system with 3 starting lives
- Boss fights every 5 waves
- Particle effects for explosions and thruster trails
Tool: Lovable (no coding needed) Difficulty: Intermediate Time: ~30 minutes Coding required: None
You're going to build a classic top-down space shooter — the kind of game where you pilot a spaceship, dodge enemy fire, collect power-ups, and take down massive bosses. Your ship will move with arrow keys or WASD, fire bullets automatically or on command, and survive increasingly difficult waves of alien enemies. It's one of the most satisfying games to watch come together because the action is immediate.
This project is perfect for vibe coding because the prompts translate directly into gameplay mechanics. You describe what you want — "enemies should fly in a zigzag pattern" — and Lovable builds it. No need to understand canvas rendering, collision detection, or game loops. You just describe your vision and iterate with follow-up prompts until your shooter feels right.
What You Need
The Founding Prompt
Go to lovable.dev and start a new project. Paste this prompt:
Build a top-down space shooter game using HTML5 Canvas. Player ship: - Triangle-shaped spaceship at the bottom of the screen - Moves left/right with arrow keys or A/D keys - Fires bullets upward with spacebar - Has a blue thruster flame animation behind it - Starts with 3 lives, shown as ship icons in the top-left corner Enemies: - Red diamond-shaped enemies that spawn at the top and move downward - Enemies spawn in waves of 5-8, with each wave getting faster - Some enemies should zigzag as they descend - Enemies fire red bullets downward at random intervals Scoring: - 10 points per regular enemy destroyed - Score displayed in the top-right corner in white, bold font - Current wave number shown below the score Visuals: - Black background with small white dots as stars, slowly scrolling downward - Particle explosion effects when enemies or the player are destroyed (orange and yellow particles) - Screen flash effect when the player takes damage Collision detection: - Player bullets hitting enemies destroys them - Enemy bullets hitting the player removes one life - Enemy ships touching the player removes one life Game over: - When all lives are lost, show "GAME OVER" with the final score and a "Play Again" button - Game should be responsive and work on desktop browsers - Canvas should be centered on the page with a max width of 600px
Click Generate and wait for Lovable to build your game.
Step 1: Test the Base Game
Once Lovable generates your shooter, click the preview to play it. Move your ship with the arrow keys and press spacebar to fire. Check that enemies spawn from the top, bullets destroy enemies, and the score increments. Note anything that feels off — maybe the ship moves too fast, or enemies are too slow.
Step 2: Add Power-Ups
Your base game works, but it needs power-ups to keep players engaged. Add collectible items that drop from destroyed enemies to give the player temporary advantages.
Add a power-up system. When enemies are destroyed, there's a 15% chance they drop a power-up that slowly falls downward. Three types of power-ups: 1. Blue circle = Shield — absorbs one hit, shown as a glowing blue outline around the player ship. Lasts until hit. 2. Yellow circle = Rapid Fire — doubles fire rate for 8 seconds. Show a small timer bar above the ship. 3. Green circle = Spread Shot — fires 3 bullets in a fan pattern instead of 1 for 8 seconds. Power-ups should gently pulse/glow as they fall. Show active power-up icons in the top-left corner below the lives display.
Step 3: Add Boss Fights
Every great shooter has boss battles. Add a boss enemy that appears after every 5 waves to give players a real challenge.
Add a boss fight every 5 waves. The boss should be: - A large hexagonal enemy, 4x the size of regular enemies - Appears at the top center of the screen with a dramatic entrance (slides in slowly) - Has a health bar displayed below it (red bar that depletes) - Takes 20 hits to destroy - Attack patterns: fires 3 bullets in a spread pattern every 2 seconds, and occasionally fires a burst of 8 bullets in a circle - Moves slowly left and right across the top of the screen - Worth 200 points when destroyed - Show "WARNING: BOSS INCOMING" text flashing before the boss appears - No regular enemies spawn during the boss fight - Drop a guaranteed power-up when destroyed
Step 4: Improve Visual Polish
The gameplay works — now make it look and feel like a polished arcade game with better effects and UI.
Improve the visual polish: - Add a thruster trail effect behind the player ship (small blue particles that fade out) - When enemies explode, show expanding ring of orange particles that fade to yellow - Add screen shake effect when the player takes damage (canvas shifts 3-5px randomly for 200ms) - Add a starfield parallax effect: some stars move faster than others to create depth - Style the score text with a retro pixel-style font (use Press Start 2P from Google Fonts) - Add a subtle scanline overlay effect over the canvas for a retro CRT look - Show a combo multiplier: if you destroy enemies within 1 second of each other, show "x2", "x3" etc.
Step 5: Add Sound Effects
Sound makes the game feel alive. Add audio feedback for every major action so the player gets satisfying responses.
Add sound effects using the Web Audio API (no external files needed — generate tones programmatically): - Player shooting: short high-pitched "pew" sound - Enemy destroyed: low crunchy explosion sound - Player hit: heavy thud with screen shake - Power-up collected: ascending chime (3 quick ascending tones) - Boss entrance: deep rumbling warning tone - Boss destroyed: long satisfying explosion with descending pitch - Add a mute/unmute button in the top-right corner (speaker icon) - All sounds should be generated with oscillators so no audio files are needed
Step 6: Add Mobile Controls
Many players will try your game on their phone. Add touch controls so the game works on any device.
Make the game fully mobile friendly: - Add semi-transparent on-screen control buttons at the bottom of the screen - Left arrow and right arrow buttons on the bottom-left for movement - A large "FIRE" button on the bottom-right - Buttons should be big enough to tap easily (at least 60px) - The game canvas should resize to fit the screen width on mobile - Detect touch vs mouse automatically and show/hide controls accordingly - Add touch-drag on the ship itself as an alternative control method - Prevent page scrolling while the game is active
Step 7: Deploy and Share
Your space shooter is ready. Click the Publish button in Lovable to deploy your game to a live URL. Share it with friends and challenge them to beat your high score. Lovable gives you a shareable link instantly — no server setup needed.
Level Up Your Game
Try these follow-up prompts to make your game even better:
Add difficulty levels:
Add a difficulty selection screen before the game starts. Three options: Easy (enemies move slowly, player has 5 lives), Normal (current settings), and Hard (enemies move 50% faster, player has 2 lives, enemies fire more frequently). Show the selected difficulty on the game HUD.
Add a timer:
Add a survival timer that counts up from 0:00 in the top-center of the screen. Show the total time survived on the game over screen. Format as minutes:seconds.
Add animations:
Add entrance animations: when a new wave starts, show the wave number in large text that fades in, scales up, then fades out over 2 seconds. Add a brief invulnerability period for the player after respawning (ship blinks for 2 seconds).
Add high score saving:
Save the top 5 high scores to localStorage. Show a "HIGH SCORES" section on the game over screen listing the top 5 scores with the date they were achieved. Highlight the current score if it made the list.
Add weapon upgrades:
Add a weapon upgrade system. The player starts with a single bullet. After reaching 500 points, upgrade to double bullets. After 1500 points, upgrade to triple bullets. After 3000 points, bullets become larger and deal double damage. Show the current weapon level on the HUD.
Want persistent high scores? Follow our leaderboard guide to connect your game to a database.
Common Errors
Blank screen after prompt If Lovable generates a blank screen, add to your prompt: "Make sure the game renders immediately on page load with no user setup required."
Game not responding to keyboard Add to your prompt: "Ensure keyboard event listeners are attached to the document, not a specific element. Auto-focus the game container on load."
Mobile touch controls not working Add to your prompt: "Add touch event handlers for mobile. Include visible on-screen buttons for all controls on screens under 768px wide."