AYOUB.*[ARCADE]

Space Invaders

Score0
Best0
Ships0
Wave0

ENGINE SPECIFICATION // ARCHITECTURAL GUIDE

How to play Space Invaders

Controls for Space Invaders
KeysAction
← → / A DMove
Space / Click / TapShoot (hold to keep firing)
P / EscPause
RRestart
MSound on / off

On phones and tablets, use the on-screen tactile D-pad under the viewport.

About Space Invaders

Space Invaders is a fixed-screen shooter. A formation of 55 aliens, five rows of eleven, marches sideways, and each time it reaches an edge it drops lower, turns and speeds up. You move a cannon along the bottom and shoot upward, with four barriers between you and the aliens. Destroy all 55 to clear the wave.

You have three cannons. When an alien shot hits yours it explodes, the formation holds still, and a new cannon rolls in after a short pause. Lose all three and the run is over. The run also ends if the formation marches all the way down to your cannon's row, crushing any barrier it touches on the way.

Clear all 55 aliens and, after a short breather, the next wave arrives with fresh barriers. Each new wave starts a little lower (for the first few waves), marches faster and fires more often.

Scoring, levels and tips

  • Aliens are worth 10 points in the top row, rising by 10 per row to 50 in the bottom row.
  • A mystery ship crosses the top of the screen every 12 to 22 seconds. Hit it for a 1,000 point bonus.
  • The formation takes a small sideways step every 0.8 seconds at first. At each edge it drops 0.33 squares (0.03 more with every later turn), and the pause between steps shrinks by 0.03 seconds, to a minimum of 0.15. Every alien you destroy speeds it up further: the last one standing moves about three times as fast as the full formation.
  • Only the lowest alien in each column fires, and on wave one no more than three alien shots are in the air at once. Alien shots travel 3 squares per second at first, a little faster each wave; yours travel 8, and you can fire once every 0.4 seconds.
  • Each barrier absorbs 10 hits from either side, fading as it goes, before it disappears. Barriers are rebuilt at the start of every wave.
  • Your best score and total number of runs are saved in your browser.
  • Tip: your own shots wear down the barriers too, so fire through the gaps between them.
  • Tip: some alien shots are aimed at where your cannon is, so keep moving rather than sitting still.
  • Tip: the formation turns when its outermost alien reaches an edge. Clearing the side columns lets it travel further between turns, so it drops less often.

How it's built

This Space Invaders is written from scratch in TypeScript on an HTML canvas, with no game framework. The 18 by 14 square playfield is drawn at 20 pixels per square, and the formation, bullets, barriers and scoring live in a world module with no canvas or DOM code, stepped at a fixed 60 Hz inside requestAnimationFrame.

Held keys are tracked in a set, so the cannon glides at a steady 8 squares per second. A bullet hits an alien when it comes within half a square of the alien's centre on both axes. Sound is synthesised with the Web Audio API. On a touch screen, hold near either edge of the board to move and tap the middle to shoot, or use the on-screen buttons: hold the arrows to move and hold Launch to keep firing.

This is an unofficial tribute written from scratch for the browser. It is not affiliated with or endorsed by the owners of the original game.