Code Warrior 5

Step 1
Adding Collision

This may be the most important lesson in our project because collision allows our objects to interact with each other!

Players can now dodge projectiles with meaning and destroy their enemies!

Step 2
The first thing we should go over is how our collision function works

Basically, it checks each side of a rectangle has no gap with the opposite side of another rectangle. If there's no gap, then they are colliding!

Check this website for more info.

Step 3
Add the collision function

COPY and PASTE this code to index.js:

function collision(obj1, obj2) {
    if (obj1.x < obj2.x + obj2.w &&
        obj1.x + obj1.w > obj2.x &&
        obj1.y < obj2.y + obj2.h &&
        obj1.y + obj1.h > obj2.y) {
        return true;
        return false;

You may have used this exact function in the Game Design lesson.

It needs two objects and returns true if they are colliding or false if not.

Step 4
To test the collision, we will need a controlled environment

Inside index.js, comment out checkLevel() to stop our game from spawning enemies.

Step 5
Add a slow projectile that we can test with the player object

Add this to the setup function in index.js:

Check Your Work
Step 6
Save your code

We should see our slow test projectile and no enemies.

Step 7
Let's make a new function to check if the player and projectile collide

Add this code to index.js:

Check Your Work
Step 8
Save your code

The collision test text should appear when the player and projectile collide.

Step 9
You may notice we have a problem with our collision

The player is being treated as one big rectangle which causes the top corners to have collision even when the image is not being collided.

Step 10
Add code to draw a hitbox rectangle for the player and projectile objects

In player.js:


In projectile.js:

Check Your Work
Step 11
Save your code

We should see the hitbox for the player and projectile.

Test to see if they do indeed have collision with the white rectangles.

Step 12
To fix this collision box problem we will be splitting our player into two more accurate hitbox rectangles

This is our current hitbox (x, y, w, h):


The first new hitbox will be the wide bottom half (x, y+h/2, w, h/2):


The second new hitbox will be the tall center third(x + w/3, y, w/3, h):

Step 13
Make a function that will return an array containing our two new hitboxes for our player

This new function will be inside our player class, and if you need help then look at the previous step for guidance.

Step 14
Change the drawColliders function for our player to now draw each hitbox

Notice we combine a for loop and our new function to easily access each hitbox

Check Your Work
Step 15
Save your code

We should now see the new hitboxes for our player!

Step 16
Some games use many hitboxes for one object to get very accurate hitboxes

You don't need to do this, but feel free to customize the hitboxes or add more

Step 17
You may have noticed we still have a problem

The projectile collision is still responding to the player's original large hitbox


Let's fix that now

Step 18
Change the checkCollision function inside of index.js:
Check Your Work
Step 19
Save your code

The player's hitboxes should now accurately collide with the projectile!

Step 20
If the player hits a enemy projectile, then the game should be over

Feel free to change the Game Over screen to your liking

Check Your Work
Step 21
Save your code

We should see the game over scene when the player is touching a projectile, which unfortunately also means the player shooting its own projectiles will cause a game over.

Step 22
We need to know how to check if something is not equal to another thing

The inequality symbol is this: !=

Step 23
Now add a condition that checks if the projectile type is not equal to "player"

The hard part is accessing the individual projectile's type (look at the variable we made in the for loop). We also will need a certain symbol covered in the previous step.

Check Your Work
Step 24
Save your code

We should now only see the Game Over text if the enemy projectile collides with the player

Step 25
Add a variable that will stop the game

Add this to the top of index.js:

Step 26
Also add a return statement in the draw function if we should stop playing

This code goes in the draw function:


This will exit the draw function early if playing is false

Step 27
After drawing the GAME OVER screen, set playing equal to false

This code is insidecheckCollision():

Check Your Work
Step 28
Save your code

The game should freeze once the player collides with a enemy projectile

Step 29
We will now start adding collision between other types of objects

Here's the remaining collision logic we need:

1) Enemy projectiles and player projectiles should destroy each other if they collide

2) Enemies and player projectiles should destroy each other if they collide

3) Player hitting an enemy should cause a Game Over

Step 30
Add an "active" variable that will let us know when to destroy a projectile or enemy

Inside enemy.js:


Inside projectile.js:

Step 31
Let's also filter the projectiles and enemies that are not active

This code should be inside the draw function in index.js:

Step 32
Add collision between the player and enemy projectile

This code goes inside the checkCollision function:


Note we have to check if the projectiles are different types or else one projectile could collide with itself.

Check Your Work
Step 33
Save your code

The two projectiles should now destroy each other!

Step 34
Uncomment the checkLevel function and delete the test projectile

It's time to add some collision with our enemy object

Check Your Work
Step 35
Double check that the projectile collision still works with the player
Step 36
The pseudocode for the enemy collision will look like this:
FOR every enemy:
   FOR every hitbox of the player:
      IF enemy collides with player:
         Show Game Over screen
         Playing the game stops
   FOR every projectile:
      IF enemy collides with projectile AND projectile type is "player":
         Projectile should be destroyed
         Enemy should be destroyed
Step 37
Add the enemy collision to the checkCollision function

I supplied the for loops but it's your job to fill in the rest using the pseudocode from above:

Check Your Work
Step 38
Save your code

The collision should work between all objects!

We can also now see our checkLevel() function is spawning more enemies once they are all destroyed!

This is the end of the lesson. The next one will focus on cleaning up our game.

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