Skip to content

Creating Asteroids in JavaScript with

I’m a HUGE fan of arcade games. I’ve always had a dream of re-creating classic games, so you can imagine my excitement when I found this awesome tutorial by Zekechan. I learned about the Phaser JavaScript library last summer when I first starting learning JavaScript, and since then I had been dying to try it out. Phaser is a library that gives you all of the functions necessary to make 2d games with JavaScript.

You start out by setting up declaring some variables that contain your game properties and assets.

You set your screen size, game states, graphics, and audio, then you an get started making your game. Next you setup the values for your game objects.

Note the bulletProperties.scatter here. You won’t see that in Zekechan’s tutorial. What I did here is created an array of values to modify the angle of the bullets just slightly. The idea here is that aiming the ship’s gun will be slightly imprecise bringing the element of chance into the equation, and not just skill.

There’s a lot of other steps to get this thing working, and I won’t bore you with all of it, but here’s the basic idea. You have to create a game state variable and prototype to create the initial state when the game loads. Then you create functions to initialize graphics, sound, physics, and keyboard controls. The prototype contains all of the functional logic of the game, and the update function ties it all together.

I thought the original graphics were a little boring so I changed the Asteroids to green alien-blobs that split when you shoot them. Then I made a new spaceship sprite, and started working on the dynamics of the game.

The first thing I noticed about the ship properties in the tutorial is that, it seemed like the ship didn’t move around fast enough. So I reduced the drag, and increased the acceleration. That was much better, but I also needed to increase the angular velocity so that the ship could turn quicker.

I adjusted the number of lives to 5, so that you’d have a better chance at getting a high score, and the game will last a little longer.

Next I worked on the bullet physics. I sped up the bullets, shortened the lifespan so that they won’t wrap around the screen quite as far, and added the scattering of the bullet angle to make it more fun, and less predictable.

I had a great time putting this game together, and I thank Zekechan for the tutorial on it!

Wanna try it out? Play it here.