Letting the SpaceShip Shoot

In order to let the space ship shoot, we need to introduce more objects onto the canvas: the bullets. However, in order to make coding easier, we have to re-think how we organize our code.

Object-Oriented Programming

Don't let the title of this section scare you. Object-oriented programming, or (OOP), is just a way to organize our code that makes coding easier for larger programs.

We have a cluster of variables that represent the state of a single object, the ship:

• ship_x
• ship_y
• ship_angle
• ship_speed

This is messy because we have variables all over the place. And what happens when we want to have 2 ships? We would then need another four variables to keep track of the state of the second ship.

What we want is a more organized way of keeping track of state variables of an object. Rather than keeping state information in separate variables, we're going to make them properties (x, y, angle, speed) of a single variable, ship.

This means, we have just 1 variable called ship, and we can access that ship's state through it's properties: ship.x, ship.y, ship.angle, ship.speed.

If we wanted to have 2 ships, we could call them shipA and shipB, then we could access their speed through shipA.speed and shipB.speed. Additionally, we could make them shoot by calling shipA.shoot() and shipB.shoot().

Adding a SpaceShip Class

In object-oriented programming, shipA and shipB are objects. They get their property names (x, y, angle, speed) and spaceship-related functions, called methods, like ship.move() and ship.shoot() from the SpaceShip class which we are going to define below.

Create a new file called spaceship.js and save it into the asteroid_dogdger folder. Put in the following line of code, which will help us know that the file is loaded properly by the web browser:

Then, open up game.html in your code editor and add the following line of code:

Then, reload the web browser. You should see the text SpaceShip class loaded! logged to the 2nd line of the console:

The console showing on line 2 of output that the spaceship.js file was correctly loaded.

Defining the SpaceShip Class

Now, let's define out the SpaceShip class. Open spaceship.js in your code editor, and add the remaining lines of code:

Now that we have a SpaceShip class, we're going to have to rewrite some of our lines of code in main.js to make use of the class. Open main.js in your code editor, and add or modify the following lines of code as indicated in yellow:

Wow, that was a lot of code writing! But, object-oriented programming is necessary because we're going to be adding bullets and asteroids into our game. Without OOP, our code would grow to a complexity that we could not maintain.

Save your changes, and refresh the web browser for game.html. If you wrote the code correctly, you should still be able to move the ship around the canvas, and, when you press the space bar, the console should log that a shot was fired:

The console showing that the space bar is correctly detected, and the shoot() method correctly called.

Adding Bullets

We have to make a Bullet class before we can allow the ship to shoot. Create another file called bullet.js, and add the following code:

Now, just like the SpaceShip class, we need to modify the html code to let the Bullet class be loaded. Open game.html in your code editor, and add the following line of code as indicated in yellow:

Then, let's modify main.js so that it draws a bullet on the canvas:

Open main.js in your code editor, and add the following lines of code as indicated in yellow:

Now refresh the web browser and see if a bullet gets rendered and moves up the screen like shown below:

Now to make the SpaceShip actually shoot the bullets, we have to modify the SpaceShip class to make use of the Bullet class.

Modifying the SpaceShip Class to use the Bullet Class

Open spaceship.js in your code editor, and modify the following lines of code as indicated in yellow:

Also, comment out the line of code in main.js that made the test bullet (two slashes indicate the beginning of a code comment, and is ignored by the web browser):

Refresh the browser and see if you can make the space ship shoot! An example is shown below.

Modify the Rate of Fire

Too many bullets are coming out at a time. What we'd like is a delay between when a first bullet is fired to when the next bullet can be fired. Modify SpaceShip.js to add a timer between shots fired:

If you added the fire timer correctly, you should get a result like this when you refresh the page:

Great! Next, we're going to make a quick change to how the spaceship moves!