Helicopter Game: Scrolling walls

Step 1
In this lesson we will be adding cave-like walls

After finishing this lesson your project will look like this:

The next lesson you will be adding effects and making your game unique!

Step 2
First we need to understand how we are going to make walls like this

The technique I used is to imagine the gap between the walls, moving up and down.

The red line symbolizes the gap I am imagining:

We'll make a gap object and use it to place the walls properly...

Step 3
Create a global object variable named "gap" which has a height and a y-coordinate

That advantage to this method is that you will be able to change the height of the gap.

Perhaps eventually we'll make it so the gap gets smaller as the game goes on..

Step 4
We'll leave the gap in place for now, and we'll use it as we create scrolling walls

First, create a walls array to hold all of the wall objects:

Step 5
When creating a top wall, the question is: based on the height and position of the gap, what is the height of the wall?

We know that for new walls:

  • x is 500
  • y is 0
  • width will be 50
  • height will be ??
Step 6
For now let's add two walls to our array and set their height to 100

Note that I'm calling width and height w and h.

We'll delete these objects later, but we need some test data to make our functions with.

Step 7
Create a function "drawWalls()" which uses a for..of loop to draw each wall of the walls array

Note that we should draw the walls even if the player has crashed, so we don't want to place it isn't the if/else block.

Step 8
Note that it helps to temporarily comment out "movePlayer()" and "doCoin()" while testing the walls
Check Your Work
Step 9
You should see your two walls drawn on the screen now

We'll get rid of the outlines around the walls once we have this working properly.

(It will make debugging easier if the outlines are there).

Step 10
Create a separate function named "moveWalls()" which for now moves each wall 3 pixels to the left

We want the walls to only move if the player has not crashed. So call this function from here:

Check Your Work
Step 11
Each wall should now be moving to the left
Step 12
Add code to moveWalls which creates and then pushes a new wall object into the walls array
Check Your Work
Step 13
Now we should be creating LOTS of walls (too many walls!)
Step 14
If you have completed the above Work Check step you should have code that looks like this"

Next we're going to add a timer which makes the walls get created less frequently.

Step 15
Create a variable named "wallTimer" which starts equal to 0

In your moveWalls function we can decrease wallTimer by 1 every frame.

We reset the timer to 16 because (50 pixels) / (3 pixels per frame) = 16.666 ~= 16

Check Your Work
Step 16
Confirm that your walls are now being created at the correct interval
Step 17
Remember, we want to use the gap object to help us figure out the height of our wall

The wall should extend to the top of the gap.

How can we use gap.height and gap.y to figure out wall.h?

Step 18
Watch how subtracting half the gap height from the gap's y position gets us the height

First start by going down a distance of gap.y

Then go back up (subtract) half the gap's height gap.height/2:

Step 19
Edit the height property of your new walls to reflect the formula derived above

The height of each wall should be the gap's y position minus half it's height

Check Your Work
Step 20
At first it won't look as though anything has changed, however if you change gap.height you'll see a difference

Here I've set gap.height to 50:

The first two walls are the ones we created when we initialized the walls array. You can delete them now:

Step 21
When we create a top wall, we should create an addition bottom wall at the other side of the gap

We can set the height of the bottom walls to something like 500 so that it's always large enough...

...But what should we set y-position of the wall to

Here I've added half the height of the gap to the y position of the gap

Step 22
Create a bottom wall for every top wall

Follow the comments in the image below:

Step 23
You should now have pairs of bottom and top walls which depend on the size of the gap

Here is a gap height of 150

Set your gap height to 300 and you should see:

Step 24
Next we're going to have the gap randomly move up and down to create a wavey path

Like this:

To do this, we want to randomly increase or decrease the gap's y position by either 0 or 25 pixels whenever we create new walls

Step 25
Here is a formula that produces only -25, 0, or 25

Prove it to yourself by following step by step:

  1. Pick a random number in your head between 0 and below 3 (You can't choose 3, but you can choose 2.99).
  2. Take the floor of that number (remove the decimals: 1.7432 -> 1)
  3. Multiply by 25
  4. Repeat a couple times until you see how this works
Check Your Work
Step 26
You should now have a randomly moving gap
Step 27
Lets prevent the gap from going below 150 or above 350- so that it never goes too far off screen
Step 28
Now that your walls are displaying properly, we can get rid of the outlines and make it look a little nicer
Step 29
Now we must check for collision between the player and each of the walls

In this lesson we'll be doing an approximation of circle to rectangle collision- but it won't be perfect. It'd be a good exercise to try to create a more accurate system later on!

Step 30
First let's check the player is between the sides of the wall

We'll need to check if the player is between the wall's left and right sides

Step 31
Add inequalities to your moveWalls() function

Make sure this happens for each wall of the walls array!

Step 32
We can find the bottom of the player by adding half its size to its y-position

Similarly the top of the player would be its y-position minus half its size...

Step 33
Complete the collision check by checking if...

The bottom of the player is below the top of the wall:

And that the top of the player is above the top of the wall:

Try completing the function yourself. In the next step I will post the solution:

Step 34
Here is the solution to the above challenge

the top of the player is above the bottom of the wall
the bottom of the player is below the top of the wall

Step 35
Un-comment all the player and coin controlling function calls so you can test your project
Check Your Work
Step 36
The game now should end if the player touches a wall
Step 37
Lastly let's reset the walls array when the player restarts the game
Step 38
In the next lesson you will see suggestions on how you can improve your project from here

Here is how my project looked afterwards

Helicopter Game: Scrolling walls Info



Created By



Helicopter Game

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