Code Warrior 4

Step 1
This lesson will focus on shooting projectiles from our enemy

The projectiles will be images of errors and warnings

Step 2
Start by downloading the new images and adding it to the Assets list

Click the blue link below to download the compressed folder with our images


After EXTRACTING the images, drag and drop both images to our assets list


Refer to the start of the 3rd lesson if you need help adding images

Step 3
Make sure you add the image variables to load the asset images inside images.js

Refer to the start of the 3rd lesson if you need help

Step 4
We will start by making the strafer projectile which will shoot straight down

It needs to be placed centered with the x position and underneath the enemy

Step 5
Update the enemy's shoot function to spawn a strafer projectile
Check Your Work
Step 6
Save your code

We should see this weird spray of projectiles, but at least they started underneath the enemy!

Step 7
We will need to add types to our projectiles, similar to how we did different enemy types
Step 8
Pass in an argument to our projectile constructor so we know the type
Step 9
Let's also add a random image for the projectile using the new images

If you need help, then refer to how we received the random symbol

Step 10
Let's also add if statements to our projectile's draw function to draw each type
Step 11
Also add if statements to the projectile's move function to move each type
Step 12
To test this code, we need to pass in the projectile type for the player and enemy

Inside player.js:


Inside enemy.js:

Check Your Work
Step 13
Save your code

The enemy projectiles should be images moving down (bomber enemies will look weird because they move at the same speed down) and the player projectiles should be normal.

Step 14
The bomber enemy will shoot two projectiles on both sides
Step 15
Start by changing the enemy's shoot function to check the enemy types
Step 16
Now add code to spawn two projectiles on either side of the bomber

The blank code should place the projectile on the right side of the enemy

Step 17
Let's update projectile's draw function to also draw an image for the bomber enemy
Step 18
Let's also update the projectile's move function to move the bomber's projectile in the x axis
Check Your Work
Step 19
Save your code

The bomber's projectiles should be flying sideways correctly!

Step 20
It may look like a cool pattern, but we will want the enemy to space it's shooting using a timer
Step 21
Start by adding some variables we will use to time our shooting and moving

Add these variables inside the enemy's constructor function:


Note the shoot rate is 60 because there is 60 frames per second by default

Step 22
Let's now add a "checkShoot" function in our enemy's class

This will toggle the moving every second and shoot when it first stops

Step 23
Let's replace calling the shoot function with our new checkShoot function
Step 24
Lastly, add an if statement to the enemy's move function to check if it can move

Hint: We need to check IF the enemy CAN'T MOVE to return early

Check Your Work
Step 25
Save your code

We should see a one second delay between moving and shooting

Step 26
How can we shorten the delay?

Hint: I made it wait 20 frames instead of 60 in the video below

This lesson is now complete! The next lesson will focus on COLLISION!

Code Warrior 4 Info


MVCode Clubs

Created By

Missing tiny aaronjau101


Code Warrior

Access Level


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