Learn JavaScript with Phaser
Create a Game Space
Now let's add some elements to make a more realistic game space. We will chose the platform game genre as that is easy to recognise and to create code for.
We create some platforms for our player to jump onto and some coins to collect.
Have a Play: with Platforms
Challenge One: Fix those Platforms
Click here for this chapter's Code Playground - https://create-game-space-broken.glitch.me/
Play the game and see what is wrong. Hit the fishes to remix the code and see if you can fix it. Clue look for the keyword immovable
Challenge One Answer: You will notice some of the platforms are not working correctly they fly away when you jump on them.-
Unhide the lines which make the platforms move. The line below is an example.
//platform1.body.immovable = true;
To unhide the lines and make them active remove the // marks at the start of the code.
Challenge Two: Increase the difficulty
At the moment it is very easy to move between platforms.
Can you alter the code to change where they appear in the game to make it harder to jump between them?
Challenge Two Answer: Find this code below
platform1 = platforms.create(75, 100, 'grass:4x1');
The numbers 75 and 100 here represent x and y coordinates on the screen. Change the numbers for the platforms and you wil be able to make them higher or lower or further apart horizontally to make it harder to jump between them.
Hands on: Creating a Group for our Platforms and Ground
We already know how to add images to our game but when we add our platforms we are going to do it in a way that allows us to change the properties of all the platforms at once. You will see how this will be useful in a bit.
To do this we will first create a group, and then when we create each platform we will add them to that group.
To add specific platforms we now need to follow this pattern.
- load images in preload
- add images in create
- add them to the platforms group
- add code to make the player stand on the platform
First let's add the variable platforms to the start of our code. We can actually put it on the same line as our player. This is a javascript short cut, so let's do that. Change the line.
var player;
so that it now reads
var player;
var platforms;
In the preload function let's load up an image for ground and a platform from an artist called Kenny taken from his Platformer pack and converted to phaser sprites by Belen Albeza.
game.load.image('ground', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1171931/ground.png');
game.load.image('grass:4x1', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1171931/grass_4x1.png');
In create we are going to use a few variables here that we don't need to share with the other functions so put them at the start of the create() code. Again we can put them all on one line.
var ground;
var platform1;
var platform2;
var platform3;
At the end of our the existing code in create() let's add the code which creates a group in our game called platforms and enables body so that it can interact with other elements in the game.
platforms = game.add.group();
platforms.enableBody = true;
Now let's add this code after the above to create a ground for our player to stand on
ground = platforms.create(0, 275, 'ground');
Try running your code at this point. You will see that when the player sinks down behind the floor.
To avoid this in update: add this code
game.physics.arcade.collide(player, platforms);
Try again and this time the player bumps the platform down out of sight.
To avoid this add another line after your last one added to create:.
ground = platforms.create(0, 275, 'ground');
ground.body.immovable = true;
Follow this pattern to add more platforms for the player to jump on.
platform1 = platforms.create(150, 220, 'grass:4x1');
platform1.body.immovable = true;
platform2 = platforms.create(250, 150, 'grass:4x1');
platform2.body.immovable = true;
platform3 = platforms.create(75, 100, 'grass:4x1');
platform3.body.immovable = true;
As with the starting have a play activity, feel free to change the location of your three platforms to make them more challenging.
Can We Glitch It?: Debugging Jumping
This game actually starts with a Glitch at this point that we have to fix.
There is something not right about jumping here. We can jump when ever we want. This means we can jump right up to the top of the screen as if we were flying. This isn't what we want.
We should only be able to jump when we are touching the ground. This will be is one the rules of our game and it is common to a lot of platform games.
To make this happen we can use a conditional statement using if.
Change the code which controls the up keyboard key to change the statement condition in the first line to be:
if (game.input.keyboard.isDown(Phaser.Keyboard.UP) === true && player.body.touching.down === true) {
player.body.velocity.y = -300;
}
This if statement now has has two conditions that need to be true before the code in brackets will run. Theruser must be pressing the UP key and the player character must be touching down on one of the platforms. If they are already jumping they will be in the air, and the player.body.touching.down property will be false and the code in the conditional block won't run. There is a more detailed look at this later in this chapter.
If we really wanted to glitch this game again then we could add another line of code which makes our player dive back to earth if the up arrow was pressed when the player was in the air. Try this to Glitch! You can play this glitch here https://slow-quality.glitch.me/
if (game.input.keyboard.isDown(Phaser.Keyboard.UP) === true && player.body.touching.down === true) {
player.body.velocity.y = -300;
}
else if (game.input.keyboard.isDown(Phaser.Keyboard.UP){
player.body.velocity.y = 300;
}
Checking our Code
Have a look at the following Code area to check your code against what we think you should have. https://glitch.com/edit/#!/create-game-space-chapter?path=game.js
Under the Hood: More on conditionals
As we can see in the code controlling jumping, there can be more conditions that needs to be true or false before a certain piece of code can run. In the last chapter we saw how the three options of if, if else and else provide a flexible way of providing different options of code to run depending on different user input and other conditions. Now let's look at the (condition) part of the statement.
The process for this is known as True / False or Boolean Logic and even though we are dealing only with different options which are all true or false it can quickly get confusing. If you get lost reading this explaination then there is one which is probably a bit better and more complete here. https://www.w3schools.com/js/js_comparisons.asp
Let's take a simple example where were are testing if something is true. We can use the === comparison operator to check this in our conditional testing statement. Let's say we are testing to see if it is raining.
if (isRaining === true){
wearCoat();
}
But imagine a situation where we want to check if it is raining OR if the clouds are dark. If either is true then take a coat out. This could be checked using the || logical operator to check both conditions.
if (isRaining === true || isDark === true){
wearCoat();
}
Hower, if we want to check if it raining AND the clouds are dark and we will only then take a coat out if both are true. This might be structured like this.
if (isRaining === true && isDark === true){
wearCoat();
}
Let's look at a table from the above resource of the logical operators used here to help understand them.
| Operator | Description |
Example |
|---|---|---|
| && | and |
(x < 10 && y > 1) is true |
| || | or | (x === 5 || y === 5) is false |
| ! | not | !(x === y) is true |
This is a subject that suits learning through doing, through experimenting and getting things a bit wrong and trying out different options until you get the one you want. As mentioned previously, there is a resource which is more complete here. https://www.w3schools.com/js/js_comparisons.asp