Ch006 - Adding a Reward

Adding a Reward

In the last chapter, we talked about not having a real goal for our game. In this chapter, we put in place a reward, a goal for us to chase. In this case, it will be to collect coins.

Creating our Coin

We already know how to add images as sprites to our world. We did that with the player. Now we need to do the same a coin.

In the preload function add the following code

  game.load.image("coin", "https://cdn.glitch.com/07341419-e9df-484f-820f-d6799646cfcd%2F22coin.png");

Before adding any coins to the game. We are going to create a group for all of our coins called, coins, this will be useful when we program the part of the game where the player takes the coin. Generally we might want to create groups of objects when we want the same kind of thing to happen to all the members in the group. In this case each time our player touches a coin we will want that coin to disappear.

Add the following code in the create function in our code after where we add the platforms.

  coins = game.add.group();
  coins.enableBody = true;

Instead of adding all of our coins one at a time, which we can see would be quite repetitive, we can use a loop to do the job for us. Let’s add 3 coins to the screen, spaced every 100 pixels. We will add them at the top, but then add gravity so that they fall down until they touch a platform. To do this add the following lines after the code above.

  for (var i = 1; i < 4; i += 1) {
    var coin = coins.create(i * 100, 0, "coin");
    coin.body.gravity.y = 200;
  }

Making the coins disappear

At the moment we have something for our player to head for but when they get there, they just overlap with the coins rather than it seeming like the player takes them. Our next stage is to make them disappear. To do this we rely on another bit of Phaser physics which is especially for cases like this. Add the following code at the top of your update function.

game.physics.arcade.overlap(player, coins, takeCoins);

This line will be explained at the end of this chapter but what it means is that when player and any member of the coins group overlap then run a function called takeCoins (which we still have to write yet). Now let’s write the code that runs when that overlap happens. Add this after the update: code has ended.

var takeCoins = function (player, coin) {
    coin.kill();
};

Checking our Code

You can check what you have in your code with the the completed code for this chapter here - https://jamm-labs.github.io/ggcp/add-a-reward-chapter/game.js

Loops and Iterating

When find ourselves doing the same thing over and over again when coding, there is normally a better way to do this. At times in this guide we do things the longer way in order to make the code easier to read but here we use a loop when creating our coins. There are a few ways to do this but one of the more flexible ways is to create a For Loop which takes three statements. Here is a summary of some more detailed information on how to use a for loop here - https://www.w3schools.com/js/js_loop_for.asp

There are three key parts of For Loop, a starting point, a way of knowing when to end the loop, and a way of changing the loop. Let’s look at a simplified example of how this is used in our code.

  for (var i = 1; i < 4; i++)
  {
    coin = coins.create(i * 100, 0, 'coin');
  }

You can see the following pattern.

  for (statement 1; statement 2; statement 3)
  {
    code block to be executed (normally more than once
  }

Very often a for loop will follow the following convention:

• Statement 1 creates a variable often called i for iterator, (to iterate means to do things more than once).
• Statement 2 sets up when the loop will end using some maths, in this case it will end when i is no longer less than 4.
• Statement 3 runs after every loop and in this case increases the value of i by one each time.

Each time the loop happens, the result will be different as i increases in value in each loop. If i starts off at 1 and increases by one each time the loop runs until i is no longer less than 4, it will run three times. Let’s chart out how it will be different.

 coin = coins.create(i * 100, 0, 'coin');

The code above becomes:

1. Loop One: i = 1 : coin = coins.create(1 * 100, 0, ‘coin’); - so coin created at 100,0
2. Loop Two: i = 2 : coin = coins.create(2 * 100, 0, ‘coin’); - so coin created at 200,0
3. Loop Three: i = 3 : coin = coins.create(3 * 100, 0, ‘coin’); - so coin created at 300,0

Making and calling functions

We added our own function to the playState object called takeCoins when the player overlapped with any coins. This is about the most complicated bit of coding we need to do to make our first game so let’s take some time to explain what is happening.

When creating our overlap statement with the following line.

game.physics.arcade.overlap(player, coins, takeCoins);

If we are new to code then there is quite a lot going on here. Overlap() is a function with several possible parameters. Here we are using just three. These different parameters can be likened do different holes in a block toy.

Let’s look at the specification of the overlap function.

    overlap(object1, object2, overlapCallback)

1. object1: The first object or group of objects to check
2. object2: The first object or group of objects to check
3. overlapCallback: An callback function that is called if the objects overlap.

We pass in two objects or groups, in this case the player and the the group of coins. We also want something to happen when there is an overlap between the player and any of the coins. This is where the overlap callback parameter comes in. We don’t need to know a lot about what a callback function is here. But in a nutshell here is a code that will run if there is an overlap between the player and a coin. In our case it makes it disappear with the coin.kill() code.