Code Warrior 2

Planning
Step 1
In this lesson, we will make projectiles for the player to shoot
2
Step 2
Create a new file named "projectile.js" and add it to the script list
3
Step 3
Add a default class for a projectile

This is how most classes should start off as:

4
Step 4
Add some variables to the constructor function

Notice that we are passing in the x and y variables to the constructor function

7
Information
Step 5
Passing in variables to the constructor functions is useful for changing properties when creating separate objects
6

So passing in x and y variables for the projectiles will help us spawn the projectile at the player's location.

Step 6
The player's projectile will be a text object so it may help to put the text in a rectangle

Add this code to the draw function in the projectile class:

8
Information
Step 7
Text can be placed in a rectangle if given five arguments

This will be useful to have more accurate collision later on

9
Challenge
Step 8
Add code to the move function to make the projectile move UP

Hint: Look at the single line of code that moved the player up

10
Step 9
Let's now create a projectile object and update it

Add this code to index.js:

11
Check Your Work
Step 10
Save your code

You should see a projectile moving like so:

Planning
Step 11
The next steps will have the projectiles spawning from the player when the space bar is pressed
Step 12
Let's make our projectiles variable equal to an array and update all of the array items

Change this code from index.js:

12
Step 13
Let's also filter out the projectiles that are not on the screen.

COPY and PASTE this code to the draw function in index.js:

projectiles = projectiles.filter((p) => {
   return p.y > -p.h && p.x > -p.w && p.x < 500 && p.y < 500;
});
14

Note: You may recognize the filter function from the Helicopter game, it's super useful code to get rid of certain items from an array.

Information
Step 14
For the projectile to be lined up with the player's center, we will need an equation for the x position

The equation is to place the x position of the projectile at the player's x position plus half the player's width and then minus half the projectile's width (20 / 2 === 10)

16
Challenge
Step 15
Create a shoot function in that will spawn a projectile from the player if the space button is pressed

Add this code to player.js:

Hint: Look at previous step for advice on missing code.

17

Note: Since we are in the player's class, player.x is actually referred as this.x

Check Your Work
Step 16
Save your code

Pressing the space bar should now shoot a projectile from the player's position!

This is cool and all, but a bit too easy for our game.

The next steps will lower the fire rate.

Step 17
Let's add some variables that will be used to slow down our fire rate

Add this code to the player class constructor:

18
Information
Step 18
The pseudo-code for our shoot logic is as follows:
IF the player can shoot:
   IF the space key is pressed:
      spawn projectile
      make can shoot equal to FALSE
ELSE:
   IF shoot timer is equal to shoot rate:
      make can shoot equal to TRUE
      make shoot timer equal to 0
   ELSE:
      increase shoot timer by 1
Challenge
Step 19
Let's update our player's shoot function to now use a timer

Look at the pseudo-code above if you're having trouble filling in the blanks

19
Check Your Work
Step 20
Save your code

Holding down the space bar should have the projectiles spawning every 10 frames

Step 21
Let's add some variety to our player's projectiles.

Add this code to the top of projectile.js:

21

This will be each symbol our player can shoot

Step 22
The projectile class needs to choose a random symbol from our symbols list

Add this code to the projectile's constructor:

22

This code might be confusing but just know it's picking a random symbol from the symbols string.

Step 23
The last step is to add the new symbol to our text when we draw the projectile

Change this code in the projectile's draw function:

23
Check Your Work
Step 24
Save your code

The player should now shoot random symbols!

The next lesson will focus on adding an enemy to our game!

Code Warrior 2 Info

Account

MVCode Clubs

Created By

Missing tiny aaronjau101

Course:

Code Warrior

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach