Skip to content

Commit

Permalink
Apply formatting changes
Browse files Browse the repository at this point in the history
  • Loading branch information
bpcreech authored and github-actions[bot] committed Feb 5, 2024
1 parent e02c3d3 commit 562cd4c
Showing 1 changed file with 34 additions and 12 deletions.
46 changes: 34 additions & 12 deletions content/post/typescript-asteroids.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,37 +12,59 @@ tags:
- "asteroids"
---

In 2010 Doug McInnes [made](https://github.com/dmcinnes/HTML5-Asteroids) [this cool JavaScript+HTML5 Asteroids clone](http://www.dougmcinnes.com/2010/05/12/html-5-asteroids). I've [converted it to TypeScript](https://github.com/bpcreech/typescript-asteroids); it's live [here](https://bpcreech.com/asteroids/)!
In 2010 Doug McInnes [made](https://github.com/dmcinnes/HTML5-Asteroids)
[this cool JavaScript+HTML5 Asteroids clone](http://www.dougmcinnes.com/2010/05/12/html-5-asteroids).
I've
[converted it to TypeScript](https://github.com/bpcreech/typescript-asteroids);
it's live [here](https://bpcreech.com/asteroids/)!

<!--more-->

## Asteroids

Asteroids is one of my favorite video games. The day care I grew up in (!) had an original tabletop Asteroids game for the munchkins to play with, so I spent hours on that thing instead of playing sportsball or getting vitamin D. It's 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.
Asteroids is one of my favorite video games. The day care I grew up in (!) had
an original tabletop Asteroids game for the munchkins to play with, so I spent
hours on that thing instead of playing sportsball or getting vitamin D. It's
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](https://github.com/dmcinnes/HTML5-Asteroids) to reset my brain, for years since he first published it back in 2010.
So I have spent random minutes playing
[Doug McInnes's JS asteroids clone](https://github.com/dmcinnes/HTML5-Asteroids)
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 later), which requires me first to do some code refactoring on the game. Notably, to do training I want to be able to programmatically:
I wanted to play with ML reinforcement learning (more on that later), 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. Single-step the game loop,
3. Seed the RNG,
4. Extract internal state for observation, and
5. Decouple UI from business logic, so we can run the game logic without a full browser (for both simplicity and speed).
5. 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](https://bpcreech.com/asteroids)!
I'm not a good enough JS programmer to safely refactor piles of raw JS, so ...
[I converted it to TypeScript](https://bpcreech.com/asteroids)!

This uses:

* [Vite](https://vitejs.dev/) to manage the dev and build toolchain,
* [ESLint](https://eslint.org/) for code linting,
* [Prettier](https://prettier.io/) for formatting, and
* [Github Actions](https://github.com/features/actions) for CI/CD.
- [Vite](https://vitejs.dev/) to manage the dev and build toolchain,
- [ESLint](https://eslint.org/) for code linting,
- [Prettier](https://prettier.io/) for formatting, and
- [Github Actions](https://github.com/features/actions) for CI/CD.

## ML reinforcement learning

**This is still a TODO and will get another post if I manage to operationalize anything.**
**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](https://www.tensorflow.org/js). There has already [been extensive research in training robots to play Asteroids](https://www.gymlibrary.dev/environments/atari/asteroids/); what I'll try to do differently here is specifically train on this browser-playable game.
My weird idea is to replace the game's demo screen with a live machine-operated
game, maybe operated by [TensorFlow.js](https://www.tensorflow.org/js). There
has already
[been extensive research in training robots to play Asteroids](https://www.gymlibrary.dev/environments/atari/asteroids/);
what I'll try to do differently here is specifically train on this
browser-playable game.

0 comments on commit 562cd4c

Please sign in to comment.