The course teaches you how to build a fun game in HTML canvas using nothing but JavaScript.

Created by Rosheen Naeem

HTML Canvas Game Using JavaScript

## Adding collision function

As we saw at the end of the previous lesson, our character object passed through the obstacles like we pass our fingers through the liquid. So, we need to turn these component obstacles into solid. Hence, we will define a method inside the `character` object that will prevent the character from passing through those collisions. 

collision(obj) {
  if((this.y > obj.y+3 && this.y < obj.y + obj.h - 3) || (this.y + this.size > obj.y + 3 && this.y + this.size < obj.y + obj.h - 3))
  {
    // right collision
    if((Math.floor(this.x) <= obj.x + obj.w) && (Math.floor(this.x) >= obj.x + obj.w - 5))
    {
      this.rflag = 0;
      this.deltaX = 0;
    }
    // left collison
    if((Math.floor(this.x + this.size) >= obj.x) && (Math.floor(this.x + this.size) <= obj.x + 5))
    {
      this.lflag = 0;
      this.deltaX = 0;
    } 
  }

  if((this.x > obj.x + 3 && this.x < obj.x + obj.w - 3) || (this.x + this.size > obj.x + 3 && this.x + this.size < obj.x + obj.w - 3))
  {
    // downward collision
    if((Math.floor(this.y) <= obj.y + obj.h) && (Math.floor(this.y) >= obj.y + obj.h - 5))
    {
      this.deltaY = -this.deltaY;
    }
    //upward collision
    if((Math.floor(this.y + this.size) >= obj.y) && (Math.floor(this.y + this.size) <= obj.y + 5))
    {
      this.y = obj.y - this.size;
      this.deltaY = 0;
      this.groundCollision = true;
    }
  }
  
}

The method checks the coordinates of `obj` passed to it as a parameter and limits the character component from visiting the `obj`'s coordinates.  

In the above method, we are checking the collisions between the character and obstacle object in all directions.

* right 
* left
* upward
* downward 

Pass all the obstacles objects to this collision function in the `mainLoop()`, like so:

```JavaScript
  character.collision(obsground1);
  character.collision(obsground2);
  character.collision(obsground3);
  character.collision(obsair1);
  character.collision(obsair2);
  character.collision(obsair3a);
  character.collision(obsair3b);
  character.collision(obsair3c);
  character.collision(obsair4);
  character.collision(obsair5);
  character.collision(worm);
``` 


We have covered all the points of the game and have added all these functionalities. 
><span style="font-size:1.5em;">🤔</span>Are we missing any point????

The answer is yes, remember we need to add the functionality of the `door` and `key` components. 

Let's give the game the finishing touches and start playing it.

We need to update the functions such that the door gets open when `character` acquires the key. The `key` component should vanish so `character` can get the one key only once. 

We will do this by comparing the coordinates of the character object. If the coordinates of the character object matches with the key object, the key vanishes and the door gets open. The code to achieve this functionality is given below at `lines 6-8`.

 

# Adding collision function

As we saw at the end of the previous lesson, our character object passed through the obstacles like we pass our fingers through the liquid. So, we need to turn these component obstacles into solid. Hence, we will define a method inside the `character` object that will prevent the character from passing through those collisions. 

The method checks the coordinates of `obj` passed to it as a parameter and limits the character component from visiting the `obj`'s coordinates.  

In the above method, we are checking the collisions between the character and obstacle object in all directions.

* right 
* left
* upward
* downward 

Pass all the obstacles objects to this collision function in the `mainLoop()`, like so:

```JavaScript
  character.collision(obsground1);
  character.collision(obsground2);
  character.collision(obsground3);
  character.collision(obsair1);
  character.collision(obsair2);
  character.collision(obsair3a);
  character.collision(obsair3b);
  character.collision(obsair3c);
  character.collision(obsair4);
  character.collision(obsair5);
  character.collision(worm);
``` 


We have covered all the points of the game and have added all these functionalities. 
><span>🤔</span>Are we missing any point????

The answer is yes, remember we need to add the functionality of the `door` and `key` components. 

Let's give the game the finishing touches and start playing it.

We need to update the functions such that the door gets open when `character` acquires the key. The `key` component should vanish so `character` can get the one key only once. 

We will do this by comparing the coordinates of the character object. If the coordinates of the character object matches with the key object, the key vanishes and the door gets open. The code to achieve this functionality is given below at `lines 6-8`.

 

Let's turn some of the game components into obstacles to make the game more interesting. 

__default

JS: Game Obstacles

Adding collision function