For this project, I really wanted to build something fun for my portfolio website. While I've dabbled in making things with game engines before (Unity and Godot), for this project I wanted to really get into the weeds and build the game from scratch.
Click the game screen to focus it and start playing!
No Dependencies
In addion to not using a game engine, another constraint I placed on this project was that it shouldn't require any dependencies. I wanted to see how much you can do with just the tools that the browser provides.
This turned out to be super educational. It's amazing what you can do with just Typescript and the Canvas API!
Game Architecture
Taking cues from my experience using game engines like Godot or Unity, I structured the game around an updateGame function that takes the current game state and a delta time value and returns the next game state. Rendering is handled separately in a dedicated renderer module, keeping the logic for the game and rendering neatly separated. The React component that houses the game is only responsible for running the game loop and handling keyboard input. It doesn't know and doesn't care about how the game works internally.
CRT Effect
One my favorite parts of this project was building the CRT filter. Growing up my folks would take me and my brother to an arcade with an extensive collection of retro games. The CRT displays that were standard at the time gave all of those old games a certain look and feel that I've always loved so I wanted to capture a bit of that magic in this project.
The final filter runes a series of canvas compositing passes. The game itself renders to a buffer at full resolution, then bloom is applied to the image at quarter resolution and blended in, with the aperture grille and scanline overlays being applied after that. Finally, noise is applied to each frame of animation to add in one last bit of analog grit to the image. The whole stack is applied every frame at 60FPS and runs silky smooth.
Game Feel
The original Asteroids, like any classic arcade game, has a really great and really specific game feel. Things like the ship's drifting momentum, the speed and lifetime of bullets, and the way that asteroids break up when hit all required lots of tuning to get right. It may not be 100% accurate to the original, but I'm really happy with the balance that I landed on for this project.