Space Invaders
Thirty-three of them, one of you, and a formation that drops a row every time it touches the wall. Clear the board before it reaches you.
- Arcade
- Shooter
This one was built for a keyboard. The on-screen controls work, but it plays better on a desktop.
The whole game is arithmetic on a flat array of 400 cells. The formation is a
list of indices; moving right adds 1 to each, moving left subtracts 1, and
dropping a row adds 20. Edge detection is index % 20. There is no collision
system — a shot lands when the laser’s index is in the invader list.
That’s why it was worth porting first. The original was a React component that recomputed the board through state on every tick; the logic underneath is plain enough to lift straight out and re-hang on the DOM.
What changed on the way over
Porting something is a good way to find out what was wrong with it. Four things were:
- The laser stalled at index 0. The original tracked “no laser in flight”
as an empty string and tested it with
if (laserIndex). Cell 0 is the top-left corner, and0is falsy — so a shot that reached the top-left corner silently stopped being a shot. It now uses-1. - The invaders could march off the board and the game would carry on. The
lose check was
alienGroup.includes(shooterIndex)— an exact-cell collision. An invader passing one column to the left of the jet missed the check entirely, walked off the bottom of the grid, and the game continued forever with nothing on screen. Losing now triggers when any invader reaches the jet’s row. - A shot off the top of the board left a negative index rescheduling itself.
- Every shot built a new
Audioobject. One element, reused.
Still true to the original
The 500ms invader tick, the 50ms laser step, one bolt in flight at a time, and the three-row opening formation are all unchanged. It plays the way it played.
Arcade
