Asteroids Blaster Game — HTML Canvas Neon Arcade JS

The original Asteroids is the canonical example of *momentum-based* control: you don't steer the ship, you steer its acceleration. That single idea — rotate to aim a thrust vector, then coast on the velocity you've built up — makes it a perfect demonstration of vector movement, and it maps cleanly onto touch as two rotate buttons plus thrust and fire. This snippet builds a complete, polished version on one HTML5 <canvas>: inertia flight, screen wrapping, glowing procedural rocks that split when shot, UFO saucers that shoot back, a kill-chain score multiplier, lives with respawn invulnerability, wave progression, synthesized sound, pause and a saved high score, all wrapped in a neon arcade look.

Rotate the heading, thrust along it, coast on the velocity

The ship stores a heading angle and a velocity vector (vx, vy) that are deliberately independent. Rotating only changes the angle; THRUST adds acceleration *along the current heading*, and every frame the velocity is multiplied by a drag factor slightly below 1, so the ship slows gradually but never stops on its own. That decoupling of facing from motion is the entire feel of the game — you can drift backwards while firing forwards. Speed is capped by normalising the velocity vector when it exceeds MAX_V, and drag is raised to the power of the frame step so the physics behaves the same at 60Hz and 144Hz.

Toroidal screen wrapping

Ship, bullets, rocks and stars pass through one wrap() function that teleports anything crossing an edge to the opposite side, making the field a torus. Bullets have a limited lifetime, so they expire instead of circling back to hit you.

Rocks that split, UFOs that shoot back

Each rock gets a ring of randomised radii, so no two are the same lumpy shape, and a size class (3, 2 or 1) that sets its colour, speed and points. Shooting one removes it and, unless it is the smallest, spawns two faster pieces, which is the escalating swarm the genre is known for. Every so often a UFO saucer sweeps across on a sine path and fires shots aimed at your ship with a little random error; shooting it is worth 200 points, and its shots or the saucer itself cost a life.

Combo scoring and feedback

Kills chained inside a two-second window raise a multiplier from x2 to x5, shown in the HUD with a pop animation, and floating "+points" text rises from every kill. Each explosion adds particles and an expanding shockwave ring, big hits and deaths shake the screen, and thrust throws cyan and amber exhaust. The glow comes from canvas shadowBlur, with a twinkling parallax starfield that drifts against your velocity and a CSS scanline and vignette layer on top.

Sound without any files

All sound effects (shot, explosion, death, wave jingle, UFO) are synthesized with the Web Audio API: short oscillator sweeps with gain envelopes, and filtered noise bursts for explosions. The audio context is created on the first click, which satisfies autoplay rules, and a mute button (or the M key) saves the choice to localStorage.

Lives, waves, pause and crisp rendering

A collision costs a life, respawns the ship at centre and gives a blinking, shielded invulnerability window. Clearing the field starts the next wave with more rocks and a bonus. P or Esc pause the game, which also pauses automatically when the tab loses focus or is hidden. Logic runs in a fixed 400×400 space but the canvas backing store is scaled by devicePixelRatio, so lines stay sharp on retina screens. For a similar canvas shooter see the Space Blaster arcade game.