Helicopter Game: Movement and Coins

About this lesson

In the first part of this course we will be making a simplified version of the game which allows the player to move and to collect coins

Concepts Reviewed:

Function declaration vs call
Processing Mouse and Keyboard Input
Object Property Access
For Of Loops
Array Methods
Show Platform Skills
Planning
Step 1
This course will show you how to create a bare-bones helicopter game

Here is a video of the project after completing Lesson 3 of this course

Planning
Step 2
In this first lesson we will create a more simplified version of the above:

In this game the player (blue circle) attempts to hover without exiting the screen, while collecting gold coins

Step 3
Start by creating a draw function and adding a dark background
Planning
Step 4
Next we will add a Player object to our game. For now we'll make it a blue ball

This ball will have 3 properties:

  • x
  • y
  • size
Step 5
Create an object named "player" with these three properties

Here we create player in the Global Scope so that we can refer to player anywhere in the program.

Planning
Step 6
Pressing "Run" still doesn't show our player object yet. We need to tell the program to draw the player

To do this we will create a function named drawPlayer.

Step 7
Create a global function named "drawPlayer"

Whenever this function is called we want it to draw a blue circle at the player's xy-position.

Step 8
This function switches the fill color to blue and draws an ellipse at the player's location

We use . to say 's

So player's size becomes player.size for example.

Check Your Work
Step 9
Pressing "Run" still results in a blank screen

This is because so far we've only defined the drawPlayer function.

Next we have to tell the program to do drawPlayer()...

Step 10
Call the drawPlayer() function after the background is drawn

Calling a function tells the computer to actually do what the function does

We call functions by writing their name followed by ()s

Check Your Work
Step 11
Now hitting "Run" should make the player appear on the screen

Review:

  • we defined an object player.
  • we defined a function that draws player named drawPlayer.
  • we called drawPlayer() in our draw function.
Planning
Step 12
Next we want to make the player fall as if affected by gravity

Any time we want to make something do an action we should create a function.

Step 13
Define a function called "movePlayer"

Put this in the global scope (meaning outside of any other functions).

Step 14
Call the function in your draw loop right after we draw the player

Calling a function means telling the program to do the action.

Planning
Step 15
If we want the player to move down, we need to increase it's y-position

Try answering these questions before going to the next step

How is your player's y-position stored?
How can you change it?

Step 16
Let's try having the "movePlayer" function increase player's y position by 2-pixels

Remember this function is called inside the draw loop. Meaning it will be called* once every frame.

Check Your Work
Step 17
Your player should be moving down at a constant rate
Step 18
Objects affected by gravity tend to fall at faster and faster speeds

We need to vary the rate at which our player falls.

For this we will use a variable

Step 19
Create a global variable named "gravity"

Initialize the value to 0.

Since the player is the only object in the game affected by gravity, we can make gravity a global variable. If we had multiple objects that fell at different times, we could have created player.gravity instead.

Step 20
gravity increases

We'll put this inside of movePlayer.

Step 21
player.y increases by the value of "gravity"
Check Your Work
Step 22
It should now look a bit more like gravity when the player falls
Step 23
Let's lower the rate that gravity increases by

I found 0.4 to be the most comfortable number for control later on in the game.

Feel free to use other values.

Check Your Work
Step 24
Gravity should now increase more gently
Planning
Step 25
Next we'll make the player start to move up if the left mouse button is held

How do you think we'll accomplish this given how we've programmed our game so far?

Planning
Step 26
First we need a way to detect if the left mouse button is currently being pressed or not

To do this we can use javascript's mousePressed() and mouseReleased() functions.

Both of these functions can detect which of the three mouse buttons were pressed/released by using the variable mouseButton

Step 27
First make a global variable that will tell the game if the left mouse button is being pressed

Start with it equal to false.

Step 28
Next we use a special function which is called whenever *any* mouse button is pressed

This function is built-in to javascript (processing.js). So you won't need to call it, javascript does it for you behind the scenes.

Step 29
If the button the was pressed is the left button,set goUP to true

mouseButton and LEFT are also built-in which is why we can use them.

Step 30
Now we'll do the same thing for mouseReleased

When the player releases the LEFT mouse button: goUp becomes false.

Check Your Work
Step 31
If you were to console.log the value of "goUp" here is what you'd see

You may wish to try this by writing a console.log call in your draw function

Here is what you would see (the red circle indicates when I'm clicking):

Step 32
Now we can use "goUp" to decide if the player should move upwards or downwards

Change your movePlayer function to decrease gravity if goUp is true

and to only increase gravity if goUp is false

Check Your Work
Step 33
Try to control your character with the mouse. It takes some practice!

Part of the fun is the difficulty of controlling the player.

Planning
Step 34
The next rule in this game is that if the player goes off the screen (top or bottom) it counts as crashing

We're going to make a simple "You lose" screen which pauses the game when it comes up

Step 35
First let's add a new global variable that records whether the player has crashed or not

We start with crashed initialized to false when the game begins.

Step 36
In the movePlayer() function we check if the player goes below the bottom or above the top of the screen

The | key (bar) is between thebackspace and enter key on your keyboard (press shift).

Step 37
In the draw function we should only call "movePlayer()" if not crashed

You can write either of these.

The ! symbol is read as "not".

So !true (not true) is equal to false

Check Your Work
Step 38
Now the movePlayer() function is only called if the player has not crashed

If the player goes off the screen, crashed is set to true.

The movePlayer() function will only run if crashed is set to false.

Step 39
Designing a "You Lose" screen

Create a new function named youLoseScreen()

Here we are using the text() function which takes three inputs inside its ()s

Step 40
In our draw function we have "if not crashed: movePlayer()" now we'll say "else: show the youLoseScreen"

If not crashed, move the player, else (if you have crashed) display the "you lose" screen

Check Your Work
Step 41
Now the lose screen should display when the player crashes

Of course, clicking to restart doesn't work. So we'll make that happen next.

Take a moment to think about how we will make the game play again when the user clicks on the screen.

Challenge
Step 42
We can use the mousePressed function to check if the left mouse button has been pressed

Read the comments and new code added below

Replace the last 3 comments with code that does what each comment says

Check Your Work
Step 43
You should now be able to reset by clicking on the screen
Step 44
One nice thing to add is to make sure the gravity never gets too fast

Basically if the gravity goes above 8, we set it back to 8
if the gravity goes below -6, we set it back to -6.

These values are just my preference, you may play with these values and find what works best for you!

Planning
Step 45
Next we're going to add a coin for the player to collect. I'll tell you what to do, but you'll have to write the code

Here's how it will look:

The coin will start at a the right side of the screen, at a random y coordinate

Challenge
Step 46
Create a new object named "coin"

This object should have three properties:

  • an x position greater than 500
  • a y position of random(0, 500)
  • a size of around 20
Step 47
We're going to combine drawing and moving the coin into one function named "doCoin"

Define doCoin() in the global scope (outside of any other function).

Call doCoin() from your draw loop. (But only if the player has not crashed)

Making one function will be useful when we have multiple coins later in the lesson.

Challenge
Step 48
Write code to do what these comments say

We'll go over the solution in the next step, but please try to figure it out yourself first:

  • Remember, how do you write coin's y in javascript?

  • If += means increase by, how would you write decrease by?

Check Your Work
Step 49
You should see this if your program is working properly

If you do not have this yet, keep trying for a bit longer! We will go over the solution in the next step.

Check Your Work
Step 50
Solution: our doCoin() function so far
  1. switch fill color to yellow
  2. draw an ellipse at (coin.x, coin.y) with a width and height of coin.size
  3. move the coin by decreasing it's x position by 3 pixels
Planning
Step 51
Now we're going to "collect" the coin if the player collides with it
Step 52
Add a property to the coin which records if it's been collected or not

When the game starts it should be marked as "not collected" (thus collected: false).

Step 53
We'll end the doCoin function if the coin has been collected

This way the coin won't draw itself or move if collected is true

Note that return automatically ends the function and returns to where the function was called.

Planning
Step 54
We can detect if the player is "touching" the gold by comparing their distance to each other

Consider: if the player's radius + the coin's radius is more than the distance between them, then they must be touching.

Challenge
Step 55
We can write this using the built-in function "dist"

If we look at the processing.js reference we can see how to use the dist() function

try to add this functionality to doCoin():

Check Your Work
Step 56
The coin should now disappear when it collides with the player
Challenge
Step 57
Next we'll make a score variable, and increase it if the player touches the coin.
  • Create a global variable for score.
  • score should increase by 1 when the player touches the coin

Then use the text function to draw score to the screen

Remember to call drawScore() from within your draw loop!

Check Your Work
Step 58
Check your score goes up by 1 when you collect the coin
Planning
Step 59
We're going to modify our program so that we can have multiple coins

We're going to use a new data type called an array.

Arrays are variables that can hold multiple values:

Information
Step 60
Why use arrays instead of singles variables

Compare the amount of code we would need to create five coins:

The above work out to 95 lines of repeated code. (With 18 more lines per coin).

Below comes out to just over 20:

Step 61
First turns your "coin" variable to an array named "coins"

Add square brackets [ ] around the coin object and it will become an array

Step 62
Add 5 coin objects to the coins array

Each object should be separated by a ,

The square brackets should go on either side of the entire array. (One pair which surrounds all five coins.)

Check Your Work
Step 63
It's worth mentioning that your program will not run properly right now

We can't use the entire array in individual statements.

For example we can't just say:

//This would result in an error
ellipse(coins.x, coins.y, coins.size, coins.size);

We need to still draw each coin one at a time...

Step 64
Add a "for...of loop" around the code in your doCoin() function

Now it says "for each coin of the coins array... do all the coin stuff"

Check Your Work
Step 65
The coins should now be appearing and working properly... almost

Notice after I collect the first coin, all of the coins stop showing up...

Step 66
Right now our code says to end the function entirely if it runs into a coin that is collected

If we change return to continue, we have it say "skip this coin and go to the next one."

Check Your Work
Step 67
Now all of the coins should appear and continue to work even after you collect some

Next we'll make the game continuously create new coins randomly.

Step 68
Let's add a 10% chance for every frame to create a new coin, and push it into the array

.push() adds things to the end of an array

Check Your Work
Step 69
Maybe this is too many coins...

Right now there is a 10% chance of creating a new coin every frame

(60 chances per second means about 6 new coins a second)...

Step 70
Lower the chance a new coin will be created by changing this number

Here is how it looks with a 1% chance. It's still a little much for my tastes. How could you make it an even lower chance?

Planning
Step 71
Last bit of this lesson- we need to do some clean up

As our program goes on and on, it continues to keep adding more and more coins to the array...

...eventually we have an enormous array of coins.

We need to filter out the coins we don't need...

Information
Step 72
What is a filter?

Imagine all of the coins that have either gone off the screen or have been collected have a big red X through them

A filter let's us take out just the ones we want from an array:

Step 73
Here we add the filter at the top of the doCoins() function

You can read the filter statement like this:

Check Your Work
Step 74
If you Run your program it shouldn't look any different

However you can prove to yourself that the filter worked by removing the part of your doCoins() code which skips coins that have been collected:

You don't need this anymore because collected coins no longer exist in the array!

Step 75
You can also delete the initial coins in the array

Our program adds new coins continuously, so we don't need to start with some already in the array

remove what is highlighted in red:

Step 76
Make your game reset properly when the player clicks to restart

You may have done this already, but we need to set the score back to 0 and clear the coins array:

Check Your Work
Step 77
You should now be able to restart *properly* by clicking the screen after the lose screen displays
Planning
Step 78
In the next lesson we will learn to add walls

Here is how it will look after Lesson 2

This will incorporate a bunch of the ideas we briefly covered in this lesson and will be a bit more advanced

Helicopter Game: Movement and Coins Info

Account

MVCode

Created By

jamie

Course:

Helicopter Game

Access Level

public

Created over 3 years ago

Published Assigned 1635 times
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