This project dates to before my web development career, when I wanted to teach myself JavaScript but didn't quite understand what it's typically used for. So, as a fun learning project, I decided to use JavaScript to develop a video game with accurate physics and fast action that I would personally want to play. Insane as this idea was, it turned out well.
Since I was a beginning developer at the time, I used no library. I never learned <canvas>. I derived the trigonometry with pencil and paper. The player's ship is a dynamically colored CSS drop shadow cast from an offscreen <img>. Asteroids and explosions are CSS radial gradients. Walls and lasers are rotated <div>s. Frames are displayed with requestAnimationFrame, with dynamically calculated frame pacing so that the simulation speed doesn't depend on the device's refresh rate. Asteroid collisions are physically accurate with no randomness. Ray traced lasers bounce indefinitely at reflected angles until they strike an asteroid. I ensured all physics calculations are robust to floating point error, and I wrote continuous collision detection logic that prevents any tunneling glitches even when very small asteroids collide at very high speeds. All of the HTML, CSS, and JavaScript is in a single .html file, hosted for free on a beginner-friendly service called Neocities.
It turns out JavaScript is a pretty good language!
