TypeScript Asteroids

In 2010 Doug McInnes made this cool JavaScript+HTML5 Asteroids clone. I’ve converted it to TypeScript; it’s live here!

Asteroids

Asteroids is one of my favorite video games. Many years ago, the daycare I grew up in (!) had an original tabletop Asteroids game for us munchkins to play with. I spent hours on that thing instead of playing sportsball or getting vitamin D. Asteroids is super cool in both its simplicity, and its use of vector graphics—as in, the original CRT didn’t just do the horizontal scan thing; the tube traced out the vector pattern on the screen, resulting in things like small shapes showing up brighter.

So I have spent random minutes playing Doug McInnes’s JS asteroids clone to reset my brain, for years since he first published it back in 2010.

TypeScriptification

I wanted to play with ML reinforcement learning (more on that below), which requires me first to do some code refactoring on the game. Notably, to do training I want to be able to programmatically:

1. Reset the game,
2. Seed the RNG,
3. Single-step the game loop,
4. Extract internal state for observation,
5. Provide precise control inputs, and
6. Decouple UI from business logic, so we can run the game logic without a full browser (for both simplicity and speed).

I’m not a good enough JS programmer to safely refactor piles of raw JS, so … I converted it to TypeScript! I added some OOPyness here and there and generally cleaned up some of the code. More refactoring and cleanups to come…

This uses:

• Vite to manage the dev and build toolchain,
• ESLint for code linting,
• Prettier for formatting, and
• Github Actions for CI/CD.

While all of this improves developer experience, the funny thing is: Doug’s original JS Asteroids works unmodified 15 years later. It’s highly unlikely this new one (which depends on all of the above, and NPM, and TypeScript itself) will work longer than a year without maintenance to handle changes in dependencies!

ML reinforcement learning??

This is still a TODO and will get another post if I manage to operationalize anything.

My weird idea is to replace the game’s demo screen with a live machine-operated game, maybe operated by TensorFlow.js. There has already been extensive research in training robots to play Asteroids; what I want to try differently here is specifically train on this browser-playable game.

Meanwhile, click here for the game as it is, in glorious modern TypeScript form.