Stage 4

Challenge 1

So now we're going to take our code from Stage 3 and we're going to track whether our flappy square runs into a wall.

Collision detection is one of the more complicated problems you'll deal with when developing a game. The lesson above demonstrates how complex the calculations are. So take your time with this challenge and don't get discouraged. It's hard stuff.

Luckily because our flappy square is flying constantly to the right we don't need to worry about collisions to the left. This simplifies things a bit. When the flappy square is in the same "x" coordinates as a wall we need to check to see if the flappy square is passing through the hole in the wall.

In each frame we'll find the wall that the flappy square is flying through (if any) and make sure it is not flying through any of the "wall" area.

So, for example, if we wanted to check whether flappy square had passed beyond the right side of a wall (really the right side of the wall has passed the stationary flappy square) we could do something like this:

var left = square.x;
var wallRight = wallX + wall.width;
if (left > wallRight) {
  ... right side of wall has passed the left side of the flappy square ...
}

We'll also need to keep track of the positions of each wall to find the wall the flappy square is flying through.

You can do this by recording the "x" coordinate of each wall in a variable:

var wall = {
  ...
  positions: []
}

...

wall.positions.push(wallX);

Then, you can iterate through these positions like so:

for (var i=0; i < wall.positions.length; ++i) {
  var position = wall.positions[i];
}

You just need to be careful not to store the same wall multiple times. You may want to store values first, only storing the positions of new walls, and then draw all of the walls.

This is a for loop and you can use it to perform an action using each of the positions in your position array.

In the example code below we find the wall that the flappy square is passing through and check to see that the flappy square is above the bottom of the top part of the wall (not going through the hole). If it is then we call the method, endGame(), that we currently call from checkBoundary() to end the game.

var left = square.x;
var right = square.x + square.size;
var top = square.y;
var bottom = square.y + square.size;

for (var i=0; i < wall.positions.length; ++i) {
  var wallLeft = wall.positions[i] - distance;
  var wallRight = wallLeft + wall.width;

  if (wallLeft > right) continue;
  if (wallRight < left) continue;

  var topWallBottom = wall.height;
  if (top < topWallBottom) {
    endGame();
  }
}

Remember this is only checking if the flappy square is hitting the top portion of the wall. You'll need to ensure it isn't hitting the bottom portion as well.

It's a bit complicated. Try to imagine each interaction (e.g. the square moving to the right and running into a top wall) and figuring out how you would know that the right side of the square has connected with the left side of the wall while the square is above the bottom of the wall (for the top part of the wall).

Yea, it's complicated.

Take it slowly and try to work it out.

In the end your flappy square should behave like the example provided at the beginning of this description.

Quick Reference: For Loops

Challenge 2

Our game landscape is a little repetitive. Each wall is equally spaced apart and the holes through the walls are all the same size and in the same position. We need to mix it up a bit more.

Let's take our code from challenge 1 and randomize both the spacing of the walls and the size and position of the holes.

Use the Math.random() method to produce a random decimal between 0 and 1. Then multiply that decimal by a larger number to create a random number between 0 and that number. Use Math.floor() to produce an integer. Then you can add to that randomly produced integer to change the range (for example add 40 to go from 0 - 160 to 40 - 200).

This looks something like this:

40 + Math.floor(Math.random() * 160)

If you run this multiple times you'll get values ranging between 40 and 200.

Use something similar to position walls between 100 and 200 pixels apart.

You also need to keep track of where you position the walls so that they don't move around randomly as you draw each frame. Make sure that your wall collision detection works properly with their new random positions.

This is harder than it sounds when you're dealing with a moving background. You'll need to position enough walls so that as the background moves the walls keep coming, indefinitely.

There are many ways to do this, but I'd suggest you position walls until at least one wall is outside the bounds of the canvas. Once that wall is within the bounds of the canvas then you position the next wall off the canvas. If you continue doing this then you'll always have one wall outside of the bounds of the game ready to come in to view.

Let's also widen the hole in each wall so that we can easily fly through them and observe the random spacing between our walls more easily. Make the height of the walls 75 instead of 100.

In the end your flappy square should behave like the example provided at the beginning of this description.

Quick Reference: random() round() / floor() / ceil() Coordinates fillRect()

Challenge 3

Ok, now that we have a better understanding of randomization let's apply it to the position and size of the hole in each wall.

Rather than having each portion of the wall be the same height (75 pixels) let's vary them by randomizing the height of the top and bottom portion of the wall, creating varying hole positions and sizes.

You can play around with varying sizes, but I'd suggest varying the top portion between 25 and 150 pixels. Then you'll want to create a varying height for the bottom portion that is within the same parameters but you need to be careful. If you randomly create two walls that are 150 pixels then you won't have any room for the hole and you probably want the hole to be at least 75 pixels. Similarly if you both the top and bottom portions of the wall are 25 pixels then your hole will be 225 pixels (300 - 25 - 50), which is very big. So you may want to make your hole no more than 150 pixels as well...

You'll need to store this information as well so that you can draw the same hole in each frame. You may want to store a hash in the "positions" attribute of your "walls" variable that contains the position, the height of the top wall, and the size of the hole.

You'll need to update your wall collision detection to take this information into account as well.

In the end your flappy square should behave like the example to the right.

Quick Reference: random() Coordinates fillRect()