webdevpuneet.com

Space Blaster Game: Diving Aliens, Bosses and Power-Ups

Space Blaster Arcade Game · Games · Plain HTML, CSS & JS · Live preview

CategoryGames

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.

Play freeSource code: Patreon

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.

· Become a supporter

What's included

Features

Galaga-style alien formations that fly in along Bézier curves, sway, and dive at the player in curved swoops
Three pixel-art alien types with two-frame animation and white hit flashes, pre-rendered to off-screen canvases
A mothership boss every fifth wave with a health bar and three attack patterns
Double, spread and rapid-fire weapons, a shield and extra lives as falling power-ups with timer bars
A combo multiplier up to x4 and double points for shooting divers
Additive particle explosions, shockwave rings, screen shake and a hyperspace streak between waves
Parallax starfield over a scrolling nebula, a banking ship with an engine flame
Keyboard, on-screen buttons and drag-to-move with auto-fire for touch
Web Audio lasers, noise-burst explosions and alarms, with a mute button and pause
Best score saved in localStorage with try/catch

About this UI Snippet

Space Blaster: Swooping Alien Formations, a Mothership Boss and Arcade Game Feel

Screenshot of the Space Blaster Arcade Game snippet rendered live

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

  1. 1
    LaunchPress 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.
  2. 2
    Break the formationAliens stream in and take their places. Grunts take one hit, shooters two and tanks four. Shooters aim at you, tanks fire spreads.
  3. 3
    Watch 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.
  4. 4
    Grab 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.
  5. 5
    Build a comboKill aliens in quick succession: every five quick kills raise the multiplier, up to x4.
  6. 6
    Beat 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

Learning curved enemy movement
Quadratic Bézier paths for entering and diving, plus a drifting formation slot, are a compact way to get lively enemy motion without physics.
A shoot-'em-up starter
Waves, a boss, power-ups and a combo system are separated into small functions, so new enemy types, weapons or bosses slot in easily.
Pixel art and juice on canvas
Sprites from strings of characters, additive glows, shockwaves and screen shake show how to make a canvas game feel punchy with no assets.
A touch-friendly arcade template
Drag-to-move with auto-fire makes a shooter comfortable on a phone, alongside keyboard and button controls.
An interactive 404 page or loading screen
A quick, self-contained arcade game works as a distraction on an error page, like the Asteroids Game.

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.