Bullet In The Gun

In this post I will be adding bullets to the game. As part of that work I will also be adding an Object class that both the bullet and player classes will extend. This will allows me to lump all of the game objects together in one big list and treat them all exactly the same way, which makes things way easier to manage.

Each object will need to support just a few basic operations:

• Creation - This will be done through the constructor
• update() - I've split the update and rendering of the object into two steps. Update is where the object calculates it's new state based on the current one and any inputs
• render() - The current state of the object is rendered to the canvas
• isAlive() - This is a function that returns true if the object is still alive, or false if it isn't. For instance: a bullet can be considered "dead" when it has traveled outside the screen area

Object Class

You can see the base "Object" class being defined on line 4. This class holds an x/y position pair and an Image element for the object. This allows the render() function to render the object to screen without any further help. The update() function is blank - each object type will need to implement this for itself. The isAlive() function defaults to returning true, indicating that the object never dies. Any object that can die, like the bullets, will override this.

Below this base object class you can see the player class (line 21), which encapsulates the player control code that used to be in the main loop, and the new bullet class (line 40). The bullet class is very simple. The constructor takes a position and a direction, given in radians, and creates an x/y velocity vector from that. That velocity is then added to the position during each update. The "* 5" part means that the bullet will move at a velocity of 5 pixels per update. The isAlive() function figures out when the bullet is no longer on screen and returns false (which causes the bullet to be removed) when it does so.

Changes To Main Loop

Just a few changes to the main loop. First, you'll notice a new Image element being created for the bullet on line 7. I also add a frameCount variable on line 12. I will increment this every frame to keep track of the current frame number. Since we're running things at 30fps, this number will go up by 30 every second.

The most important changes are in the mainLoop function on line 44. First off, the code starting at line 45 is used to randomly spawn a new bullet every two seconds. The bullet is created at a random screen position and with a random heading. Not very exciting, and there's no collision with the player yet, but it's a big first step to get bullets into the game.

When the bullet is added, I simply push it to the end of the objects list. You'll also see that I add the player object to this list on line 39. This list is then manipulated in the following lines of code. On line 52 I loop through every object and call it's update() function. Next (line 54) I update the objects list by filtering out all objects that are no longer alive - this part works to remove bullets as they go off screen. Finally we come to line 57, which uses another forEach loop to render() all remaining objects.

Review

In this update I added bullets to the game. Before I did this I created a base class for all objects in the game to make it easy to manage all of the different types of game objects in exactly the same way.

The code for this post is on BitBucket, and you can follow this link to run the code directly in your browser.

Next?

Next time I will be adding a bullet spawner object. This will spawn bullets according to a bunch of configuration parameters. With one of these on the playfield you'll already be able to start creating some complex and beautiful bullet hell patterns.