Space Blaster Game: Diving Aliens, Bosses and Power-Ups
Space Blaster Arcade Game · Games · Plain HTML, CSS & JS · Live preview
For supporters
Source Code
Want the source code?
Play the game for free. Become a WebDevPuneet supporter to unlock the complete HTML, CSS and JavaScript source code, the exports (HTML, React, Vue, Angular, Tailwind) and Fork.
Extend with AI
Take This Snippet Further With AI
The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.
What's included
Features
About this UI Snippet
Space Blaster: Swooping Alien Formations, a Mothership Boss and Arcade Game Feel

Space Blaster is a vertical arcade shooter in the style of Galaga: alien formations fly onto the screen along curved paths, sway in place, and break off one by one to dive-bomb your ship. This snippet builds the complete game on one HTML5 <canvas> with no libraries and no image files. It plays with the arrow keys or A and D and Space, with on-screen buttons, or by dragging a finger on the game, which moves the ship under your finger and fires automatically.
Formations that fly in, sway and dive
Every alien has a slot in a formation whose centre slowly drifts from side to side. A new wave starts with each alien following a quadratic Bézier curve from off-screen to its slot, staggered by a few hundredths of a second, so the formation streams in. Once in place, aliens fire now and then (shooters aim at you, tanks fire a three-way spread) and, a few at a time, break into a dive: a curve that starts at the alien, swings sideways and ends just past your ship's position below the screen. A diving alien that misses you reappears at the top and drops back into its slot. Hitting a diver is worth double, and the number of simultaneous divers, the dive rate and the fire rate all grow with the wave.
Three alien types and a mothership
Green grunts take one hit, purple shooters two and orange tanks four; each is pixel art with two animation frames, pre-rendered into small off-screen canvases (plus a white copy for the hit flash) so drawing dozens of them costs only a drawImage each. Every fifth wave is a mothership boss with a health bar: it sweeps across the top and cycles through a rotating ring of bullets, aimed three-shot bursts, and launching kamikaze grunts. Destroying it scores 1000 plus 100 per wave and drops two power-ups.
Power-ups, combos and game feel
Destroyed aliens sometimes drop a capsule: double shot, a three-way spread, rapid fire, a shield that absorbs one hit, or a rare extra life. Weapons last ten seconds, shown as timer bars along the bottom. Kills in quick succession build a combo, and every five raise the score multiplier, up to x4. Explosions combine additive particles, an expanding shockwave ring, screen shake and a filtered-noise boom from the Web Audio API; the background is a three-layer parallax starfield over a slowly scrolling nebula, and clearing a wave triggers a hyperspace streak. The ship banks as it moves, has a flickering engine flame, and blinks while it is invulnerable after a hit.
Fair and readable
The ship's hitbox is a 9-pixel circle, smaller than the drawing, and enemy bullets are bright glowing orbs so they read clearly against the stars. Losing a life clears the enemy bullets and gives two seconds of invulnerability. The game pauses on P, Escape, the pause button or a tab switch, sound can be muted, and the best score is saved in localStorage.
Step by step
How to Use
- 1LaunchPress Launch. Move with the arrow keys or A and D (or the on-screen arrows) and hold Space or FIRE to shoot. On a phone, drag on the game: the ship follows your finger and fires automatically.
- 2Break the formationAliens stream in and take their places. Grunts take one hit, shooters two and tanks four. Shooters aim at you, tanks fire spreads.
- 3Watch for diversAliens break away and swoop at your ship. Dodge them or shoot them mid-dive for double points; a diver that touches you costs a life.
- 4Grab power-upsCatch falling capsules: D for double shot, S for a spread, R for rapid fire, a shield, or a heart for an extra life. Weapons last ten seconds.
- 5Build a comboKill aliens in quick succession: every five quick kills raise the multiplier, up to x4.
- 6Beat the mothershipEvery fifth wave a mothership with a health bar fires rings, aimed bursts and kamikaze grunts. Take it down for a big bonus and two power-ups.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Each alien follows a quadratic Bézier curve. When a wave starts the curve goes from a point off-screen, through a control point on the other side, to the alien's slot in the formation. A dive goes from the alien's current position, through a random point beside it, to just below your ship. After a dive the alien reappears above the screen and slides back into its slot.
Every fifth wave (5, 10, 15...). Its health is 50 plus 12 per wave, and it cycles through a ring of bullets, three aimed spread bursts, and launching two kamikaze grunts. It gets faster at switching patterns on later waves.
D gives a double shot and S a three-way spread, each for ten seconds (the newest replaces the other). R doubles the fire rate for ten seconds and can stack with either. The shield absorbs one hit, and the heart adds a life (up to five). Aliens drop a capsule 7% of the time and the mothership always drops two.
Grunts are 10, shooters 20 and tanks 40 points, doubled if the alien was diving, then multiplied by your combo (1 plus one for every five quick kills, up to x4). Each hit on the mothership is 5 points and destroying it is 1000 plus 100 per wave.
Yes. Drag anywhere on the game and the ship follows your finger and fires automatically, or use the arrow and FIRE buttons. The game pauses by itself when you switch tabs.
Each alien frame is drawn once into a tiny off-screen canvas (plus a white copy for the hit flash). Drawing the formation is then one drawImage per alien instead of dozens of fillRect calls, which keeps the frame rate steady with many enemies, particles and bullets on screen.