Game Over

Where is the Center?

A quick note, when you are drawing a box in HTML Canvas with context.fillRect(x,y,w,h), remember that x and y are at the top left corner of the box you are drawing, not the center. The center position is (x + width / 2, y + height / 2). This will be important later.

Adding the Player Death:

Now that you understand how we can determine if 2 boxes are touching, we can end our game whenever the player hits the obstacle. We'll add a collision function above the update function. First, we need to calculate the center position of the player and obstacle for our collision testing to work.

Next, we need to calculate the distance between the player and the block. Note: Math.abs() is short for absolute value, and it keeps us from getting negative distances.

Now, let's make 2 variables representing the maximum x and y distances possible for a collision to occur. These variables will have the same value since we are working with squares (where width = height).

We will return true if xDistance is less than or equal to maxXDistance and if yDistance is less than or equal to maxYDistance. Otherwise, we return false.

Now that our collision function is finished, let's call it every time we run the update function. If checkCollision returns true, then we will set gameOver to true and turn the player's speed to zero.

The game should stop whenever the player touches the block, so let's make sure update() doesn't run if the game is already over. Remember, updating a game means changing its data, but once the player is dead, this shouldn't happen anymore.

The Result

Now, the game should completely end whenever the player dies.