This may be the craziest thing I've ever made. Super janky right now, but I'll have the kinks worked out soon enough.

2529914928

Hopefully this project won't turn out like 5126310810.

For those who haven’t seen it yet, here’s my first game: A clone of the classic arcade game Asteroids.

It feels awesome to be done with my first and second gamedev projects (the second being this blog). I’d like to take this opportunity to do a little reminiscing, so please indulge me while I show off the evolution of my first project. These examples will work best on a laptop/desktop since they make heavy use of keyboard events.

The story really starts at Open Source Convention way back in 2013. I wanted to learn more about web technologies for my job while at the conference so I started with javascript. I started classes on (520) 245-9000 and got the basics down pretty quickly (this was not my first time learning a programming language). “So... what now?" The answer was crystal clear and obvious. Like it had been waiting for me all my life. Bubbles.

Click the following images for live demos - controls are described in the captions

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK? Controls: press space to make bubbles

That’s the first commit from my GitHub repo. Neato. The earliest versions of the script had no random motion for each bubble - they just appeared on the screen and sat there motionless, but I don’t have any copies of the project from that early a stage... if only I had learned git earlier. It took me a pretty long time to really get a good grasp on javascript - since I've been using it at work I've definitely improved a lot. Getting the motion of the bubbles correct might seem easy, but it was a pretty big feat for me at the time.

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK? Controls: press space to make asteroids

Now we’re getting somewhere! This is when I got the idea for the Asteroids clone - not sure if I had fully committed to the idea yet, but it seemed like a fun project.

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK? Controls: Arrow keys to move, space to spawn asteroids

Yeah, the player controls are backwards. And your speed is unbounded. You can also just keep accelerating in a single direction until your ship is going so fast that your ship seems to exist in several places at once. Progress!

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK? Controls: Arrow keys to move, space to shoot, ‘a’ to spawn asteroids

Shooting! Well this is pretty crazy. I hadn't quite figured out the right way to calculate bullet velocity and obviously you can shoot an absurd number of shots. Also, I’ve put a speed limit on your ship, but as you can see from the helpful red velocity vector protruding from your vessel that your ship really doesn’t handle correctly when you’re close to top speed and turning... Progress!

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Now you can hit asteroids with your shots! How the hit detection works in this example is by comparing the max radius (the distance from the center of the asteroid to its farthest vertex) to the distance from your bullet. This definitely leaves something to be desired! But hey, it works. Progress!

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Boom! Now the distance formula for colliding asteroids and bullets is much smarter. First, make a first pass to see if the bullet is even close, then calculate the distance between the center of the asteroid and the "radius" of the asteroid at the bullet's angle. Works like a charm! Oh, and you have a score now - that was pretty easy to add. It's boring though - the numbers are just way too low. Also, what a difference those visual flourishes can add! Thrusters AND particles? It’s amazing how much more fun the game gets with these small additions.

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Now you can die! Well this is actually less fun since the collision detection is complete bullshit. Again, a naive first pass just as a proof of concept - seems like there’s a theme developing here. Maybe it’s just me, but this is the only process I know which actually works. You just have to start with bullshit and mold it into something better. The tricky part is probably knowing how to implement your bullshit in a way which allows you to iterate meaningfully on it. That is truly an art.

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Added a death animation. Maybe you'll notice that it looks a bit... off. The ship pieces not only rotate, but change their length (as if rotating in three dimensions, not two). This was another incredibly frustrating and stupidly syntactical bug which made me a bit crazy. If I do a technical writeup at some point I’ll be forced to confront my worst fears and relive this period of temporary insanity. Progress!

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Now the collisions between player and asteroid are much fairer. Basically, this collision detection algorithm calculates the point of intersection between every line creating the ship and asteroid and if that point falls on the actual line segments that make up the ship then that’s a collision.

Whoops! Well this is embarrassing. There ought to be an image here. Let’s just pretend like there is, OK?

Well, here we are with the finished product. There were plenty more steps, but most of them were boring. Hope you enjoyed this odyssey as much as I did - thanks for reading!

Well, how about that? A blag.

I hope to update this somewhat frequently. I'll probably start by writing a few posts about my first ever videogame: a copy (in spirit) of the 1979 arcade classic Asteroids.

If folks on basket carriage are interested, I'll write about the math I had to use to make this game: basic calculus, linear algebra and of course every highschooler's favorite: trigonometry. Or maybe try to document my entire next project from start to finish. Or perhaps a post-mortem about all of the lessons I learned from making this game (protip: surprisingly few). Who knows?

Oh, and I should probably thank makemistakes for the blog theme. It's built using Jekyll and if I can get it up and running in a single night, then they must be doing something right.