Code Warrior 3

Planning
Step 1
In this lesson we will be adding enemies of instructor's faces

Feel free to change the images later on if you wish

3
Step 2
Let's start by creating a enemy.js file and adding it to our website
4
Step 3
Let's also begin by downloading the images for our enemies

Click the blue link below:

Download instructors.zip

Since this is a compressed ZIP file, make sure to extract the folder after downloading!

5
Step 4
Add the images to the assets list

You can do it by dragging or dropping or clicking the asset button

Challenge
Step 5
Inside images.js, add variables to load each image

If you need help, look at the step in our first lesson of how we loaded the playerImage.

7
Step 6
Create a default class for our enemy

Add this code to enemy.js:

9
Step 7
The enemy needs some variables when it's constructed

Add this code to your enemy constructor function:

13
Challenge
Step 8
The enemy will choose a random instructor image from an instructors array

Notice that I did not include Doug in the array because he will be our boss enemy later on (only fitting)

14

Hint: Remember how we got the random symbol from the symbols array for our projectile?

12
Step 9
Now add code for the enemy to be drawn as its image and move down
15
Step 10
Now we need an array for our enemies and then update all enemies

Add this code to index.js:

16
Challenge
Step 11
Create a new variable named "level" that starts at 0

To make a function that will spawn a wave of enemies based on the level, add this code to index.js:

17

Make sure to call this function from the draw loop!

Check Your Work
Step 12
Save your code

We should see one enemy falling down every time we reload the website

Step 13
Let's make the enemy go to the top when it reaches the bottom

Add this code to the enemy's move function:

21
Check Your Work
Step 14
Save your code

The enemy should respawn without needing to reload the website

Planning
Step 15
Now we will be making a second type of enemy

The first type we made will be named Bombers and the next type we will make will be called Strafers.

22
Step 16
Start by passing in a new variable to our enemy constructor

This will let us know what the enemy type when it's created

24
Step 17
We need to change the enemy's move function to check what is the enemy type

We already have the bomber code so we can put that in the first if statement

26
Step 18
Let's quickly test the code works so far by passing in a type when we create our enemy

Add this code inside index.js:

27
Check Your Work
Step 19
Save your code

We should still have our first enemy bomber working as before

Information
Step 20
The strafer enemy will need to check its x position to know when to flip its speed direction
28
Information
Step 21
We will need to use a function called "abs" that always return a positive number.

To get the positive value of a number use: abs(number)

To get the negative value of a number use: abs(number) * -1

29
Challenge
Step 22
Add some code to make our strafer enemy move horizontally and bounce off the walls

Hints:

We will need to check the x position in the if statements to see if the enemy is at the edges of the screen.

We then need to appropriately make the speed either its positive or negative value.

30

Note: The previous two steps are guides to solve this challenge!

Step 23
Let's add a strafer enemy when we spawn our enemies at the start of a level

Add this line of code to index.js:

31

I would copy and paste the first enemy and change it.

Check Your Work
Step 24
Save your code

There should be a bomber and strafer enemy moving correctly!

Step 25
Let's add a coin flip so we have a 50-50 chance of spawning either type of enemy

Add this code to index.js:

33
Check Your Work
Step 26
Save your code

The level should now have a random enemy type every time we reload

The next lesson will focus on the enemy's projectile.

Code Warrior 3 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