Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
Control the Flow with Conditional Statements
6:46 with Andrew Chalkley, Dave McFarland, and Joel KraftConditional statements are one of the most important ways of controlling how a program works. They let you add "smarts" to your program by reacting to different conditions. Use conditional statements in our JavaScript game to change the number of points added (or subtracted) based on the item the player collects on the screen.
Downloading and Running the Project Files
Because of how the Phaser.JS library handles files, you need to be running a web server locally to view a working copy of this project. You can't just open the index.html file in your web browser as you might a basic HTML page. There are several simple ways to get a web server up and running on your computer:
- The Web Server for Chrome is an easy-to-install extension for Chrome that lets you select a folder on your computer (like the folder with the game files in them) and deliver them through a basic web server. This is probably the easiest way to get started — but you'll need to use the Chrome web browser.
- If you don't want to use Chrome, check out a simple guide for getting a local web server set up for several other methods.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
This game has really come a long way.
0:02
There are a bunch of platforms and
0:04
a player who can collect
multiple animated objects.
0:06
One problem right now is that
all items a player collects
0:09
add 10 points to the score, even a poison.
0:12
Clearly poison is bad, so collecting it
should do something to harm the player.
0:16
Why don't we lower the players
score if the poison's collected.
0:20
You can continue working
with your old workspace, or
0:24
if you wanna make sure you're using
the same code that I show in this video,
0:26
you can open a new workspace on this page.
0:30
To begin let's open the game.js file.
0:33
Look around in the file and look for
the code that changes the players score.
0:36
It's down here around line 64,
inside a function called itemHandler.
0:40
Let's step through how
this function works.
0:46
Each time the player collects a coin,
this function runs.
0:49
So when the player touches a coin, for
example, first the coin disappears.
0:53
That's what the kill function does.
0:58
It's part of the phaser library and
gets rid of objects in your game.
1:00
Then the current score is increased by 10.
1:04
What this says is, take what's ever
in currentScore, add 10 to it,
1:09
and then that equal sign says
store it back into currentScore.
1:13
So basically we're increasing by 10 points
every time they collect any object.
1:17
Finally, this bit of code runs.
1:22
The if keyword here begins what is
called a conditional statement.
1:25
It's a way you can control what
a program does based on some condition.
1:29
It's how you make your program seem smart
by reacting to different circumstances in
1:33
the program.
1:37
In this case,
each time the player collects an item,
1:39
the conditional statement
asks a simple question,
1:43
is the currentScore === winningScore?
1:47
In JavaScript,
you used three === to compare two values.
1:50
Remember, I'll scroll up here to show
you that, currentScore is the variable
1:57
that we use to hold the players's
currentScore, and winningScore is
2:02
the total number of points the player
has to earn in order to win the game.
2:07
So, when the player earned 100 points
the createBadge function is called.
2:14
This adds the spinning badge that
appears near the end of the game.
2:21
It's the one last item that the player
needs to collect to win it.
2:25
Now, conditional statements
are really important in programming,
2:29
you'll use them all of the time.
2:32
You can think of them as a simple yes/no
question that leads to different effects
2:34
in your program.
2:38
In fact, we can use a conditional
statement to determine
2:39
which item the player collects and
change the score based on that condition.
2:42
For example, if the player collects the
coin then we increase this score by 10.
2:47
Conditional statements in
JavaScript begin with if,
2:54
Followed by a set of parentheses,
and some curly braces.
2:59
Inside the parentheses
goes the question or
3:05
the condition that you're going to test.
3:07
In our case, is the collected item a coin?
3:10
We can find out by looking at
the item that was collected.
3:14
This here, item,
represents the item collected.
3:19
It's given to the function
with the player collects it.
3:25
Okay, this is a little confusing, so
don't worry to much about the details.
3:27
Let's just concentrate on
how conditionals work.
3:31
The item has a special
property called key.
3:34
This identifies the name of the item.
3:37
So if the player collects a coin
the key is coin, if it’s a poison
3:40
then the key is poison, if the item
is a star then the key is star.
3:44
We can write that like this,
3:49
if (item.key === 'coin').
3:53
That's our conditional statement.
4:01
Now if that item is only a coin,
then let's increase the score by 10.
4:04
So we can take this code, I'll just
cut it out, and paste it in here.
4:09
So basically, only if they collect a coin
will we increase their score by 10.
4:17
I'll save this file, and
preview it, and see if it works.
4:23
I just collected some poison and
it didn't increase my score.
4:30
A coin increases by 10,
another poison has no effect,
4:33
but another coin gives me 10 more points.
4:39
That's pretty good, but
we wanna have a few other things happen,
4:42
like give a larger score if the star is
collected, or remove points for poison.
4:45
Fortunately that's easy to
do with multiple conditions.
4:50
We can ask a series of questions, and
4:54
do different things based on the answers
to those individual questions.
4:56
So, if the item is a coin,
then we increase the score by 10.
5:01
However, we can ask a follow up question,
using else if.
5:07
We can say else if (item.key
5:17
=== 'poison')
5:23
Then we take the current score, and
instead of adding 10, we can subtract 25.
5:33
Now we can do the same thing with a star.
5:44
If it's a star,
then let's not subtract 25, let's add 25.
5:51
Cool, I'll save the file, preview it, and
see what happens when I collect poison.
5:57
No!
6:04
Minus 25, and if I get the star,
6:04
I get another 25 points, it's working.
6:16
Notice how conditional statements can
really affect how a program works.
6:20
In fact, there are a few other ways
you could use them in this case.
6:23
For example, you could add a life counter
that each time the player encounters
6:27
the poison the counter decreases by one.
6:32
If the life counter is zero, hear that?
6:34
If the life counter is zero, that's a
conditional statement, then the game ends,
6:37
and the player loses.
6:41
Let's look at an example of that
in our last code challenge.
6:43
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up