"User Authentication with Rails" was retired on February 24, 2020.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Game Development with Phaser!
You have completed Game Development with Phaser!
Preview
Learn how to add text to display messages such as 'You Win!' or 'Game Over' based on specific conditions or events, enhancing the player experience and providing clear feedback on game outcomes.
Resources
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
In the last video, we added some collision
logic when the ball hits a brick so
0:00
that the brick disappears and
the ball bounces at an angle.
0:05
In this video, we're going to add some
text to the screen when the player wins or
0:09
loses the game.
0:13
Let's start by creating the game
over text since this event will be
0:14
easier to trigger.
0:19
The game over text should only show
when the ball goes below the paddle.
0:20
We can detect this by checking if
the Y position of the ball is greater
0:25
than the Y position of the paddle.
0:30
Let's do that now.
0:32
In our update function below
the last if statement on line 76.
0:34
Let's add a new if statement to check
if the ball is below the paddle.
0:40
At the end of line 80,
let's press enter a few times and
0:45
type if parentheses ball.body.y is
greater than paddle.body dot y.
0:51
Then let's add some curly braces.
0:59
You may remember that earlier, we use
ball.x to get the position of the ball and
1:01
here we're using ball.body.y.
1:07
This is because the ball is a physics
object and therefore has a body property.
1:10
So here we're getting the y position
of the balls physics body and
1:15
with ball.x by getting the visual
position of the ball image for spread.
1:19
In this scenario, however, we could
either use ball.y, or ball.body.y.
1:24
This is because the y position
of the physics body and
1:31
the ball image are the same.
1:34
However, there will be scenarios in
this course where we'll just need to use
1:36
the physics body position.
1:41
For example, if we wanted to
get the ball's velocity value,
1:43
we can only get that
from the physics body.
1:46
Okay, let's go back to the if statement.
1:48
So when the ball is below the paddle,
we want to do two things,
1:51
first we want to display
the game over text,
1:55
and then we want to stop any
updates to the ball and the paddle.
1:58
One quick and easy way to stop any updates
to the game is by pausing the game.
2:03
So let's do this by opening
up the if statement and
2:08
writing this.scene.pause and
add parentheses.
2:11
Next, we need to display
the game over text, but
2:16
first we need to create
the game over text.
2:18
So let's scroll up to the create function
beneath where the brick groups have
2:21
been added.
2:25
And we'll go to the end of line 62,
press enter a few times,
2:27
and write this.add.text and
add parentheses.
2:32
The text method takes in three
arguments with an optional fourth.
2:36
So an x position, a y position,
the text display and
2:40
some styles to add to the text.
2:45
Let's put those in now, because you want
the text to display in the middle of
2:48
the screen, we can reuse our screen
width and screen heights variables.
2:52
So as the first argument,
let's type screenWitdh / 2 and
2:57
for the second argument,
we'll type screenHeight / 2.
3:03
For the third argument,
3:08
we're going to put a string of Game Over
with a capital G and a capital O.
3:10
And for the fourth argument,
we're going to create an object.
3:16
This object will contain style
properties that are similar to CSS and
3:19
we want the font size to be bigger than
the default font size phaser gives us.
3:23
So here we're going to write fontSize
in camel case with colon and
3:28
we're gonna have a string of 50 pixels.
3:32
Let's see what this looks
like in the browser.
3:35
Okay, so the game over text
is here in our game, but
3:38
it's not quite in
the center of the screen.
3:41
This is because the text is
positioned from the top left corner.
3:44
If you imagine there's an invisible
rectangle around our text,
3:48
the x and y positions we put in the text
methods are coordinates just for
3:52
the top left of the rectangle.
3:57
So our text technically is
in the center of the screen.
4:00
If you imagine it has been positioned
by the top left corner of the text.
4:03
We can fix this by telling phaser
not to use the top left corner but
4:08
in fact use the center of the invisible
rectangle around our text to
4:13
center our text,
let's fix this in the code.
4:17
First, let's scroll to the top of our file
where we've defined all our variables and
4:20
below our hasBallLaunch
variable on line 27,
4:25
we're going to create a new
variable called GameOverText.
4:28
So at the end of line 27, let's hit
enter and write let gameOverText.
4:33
This is so
4:39
that we can hide the GameOverText when
we create it in the create method.
4:40
And only show it if the game
is in a gameOver state,
4:44
which we can do in the update method.
4:47
Since we're going to use
the gameOverText variable again,
4:50
let's select it by double clicking
on it and press Cmd+C to copy it.
4:53
Cool.
4:58
Now let's scroll down to
our Create method and
4:59
assign our gameOverText variable
to our actual gameOverText.
5:02
We can do that on line 65 by positioning
the cursor at the beginning of the line,
5:06
and pressing Cmd+V to paste,
followed by equals.
5:11
At the end of line 65, press Enter,
and again paste the game over text
5:15
by pressing Cmd+V, and then write
.setOrigin followed by parentheses.
5:19
As you can imagine, the setOrigin method
will change the coordinate Now that
5:25
are used to position the text.
5:29
This method takes into Opstal arguments,
x and y,
5:31
which should be a value between zero and
one.
5:35
So if both x and y are zero, then that
would refer to the top left corner, and
5:38
if they're both one,
it will refer to the bottom right corner.
5:43
However, by default if you don't add any
arguments, phaser will set both the x and
5:48
y arguments to 0.5, which will refer
to the center of the rectangle.
5:54
This is exactly what we want, so
we don't need to pass in any arguments.
6:00
While we're here, let's add some code
to make the game over text invisible.
6:06
At the end of line 66, press Enter and
press Cmd+V again to paste game over text,
6:10
then write .setVisible
followed by parentheses and
6:16
we'll add an argument of false.
6:20
Since we only want the text to
show when the game is over,
6:22
let's scroll down to our update function.
6:26
Hit enter, and again press Cmd+V to
paste the game over text variable.
6:30
Then add set visible with parentheses and
6:35
inside the parentheses will
add an argument of true.
6:37
Speed, now let's test this in the browser.
6:42
Now we'll see there's no game over
text when we launch the game.
6:46
It will only appear after we launch
the ball and the ball hits a brick and
6:50
then goes below the paddle, perfect.
6:55
Now let's add some text to tell
the player if they've won the game.
6:58
Let's start by creating a new
variable towards the top of our file
7:03
called youWinText.
7:07
So, let's scroll to
the top of our file and
7:10
at the end of line 28 hit enter and
write let youWinText.
7:13
Next, let's scroll down to the create
function where we add the game of
7:18
a text object and
highlight line 68, 67 and 66.
7:23
Press Cmd+C to copy and
on line 70 press Cmd+V to paste.
7:27
On line 70 double-click on game
over text to select the text then
7:32
to select the next two instances
of that text press Cmd+D twice.
7:37
Now here we want to change
this to youWinText.
7:42
And then on line 70 change Game Over
to You Win with two exclamation marks.
7:47
Fun fact,
7:54
if you wanted to make the code more
concise/ You could chain methods together.
7:55
You could delete youWintext on line 71 and
append it to the end of line 70.
8:00
Again, we could do the same with
youWinText on our new line 71 and
8:06
append that to the end of line 70.
8:10
So setOrigin and
setVisible have all been put on one line.
8:13
And this will work in phaser.
8:18
But to be honest I think the code is
easier to read when it's on separate
8:20
lines, so let's press Cmd+Z a few times
to put it back the way it was before.
8:24
Okay we only want to you when texts show
when there are no breaks on the screen
8:30
right now, we don't have a way of
counting the number of bricks.
8:35
So let's update our code to do that.
8:39
First, let's create a new variable along
with our other variables at the top of
8:44
our file.
8:49
Let's scroll up to the other variables and
at the end of line 29,
8:50
press Enter and write let brickGroups.
8:54
This is going to contain the three print
groups that we create in our game.
8:58
Here we can double click on
the brick groups variable and
9:02
press Cmd+C to copy it.
9:05
Now let's scroll down to the correct
function and at the beginning of line 53,
9:07
let's press Cmd+V to paste our
variable and press equals.
9:12
This is going to assign all
the brick groups to this variable.
9:16
Right now this piece of code
isn't returning anything,
9:19
because we're using the array for
each method.
9:22
Let's change this to the array map
method by double clicking on for
9:25
each and writing map.
9:29
Now we need to return these arrays.
9:32
So at the end of line 64, press enter and
9:34
right return brickGroup, perfect.
9:38
Now we can count the bricks in our game.
9:43
Let's scroll down to the end of
our update function on line 97.
9:46
And at the end of line 97.
9:50
Let's press enter a few times and
write console.log,
9:55
open parentheses and
write brickGroups.map,
10:00
open parentheses again, and write
brick group, add an arrow function and
10:04
then write brickGroup.countActive and
add parentheses.
10:11
The Count active method here is
going to count the number of
10:17
bricks that are visible
in each brick group.
10:20
Let's see what this prints
out in the browser console.
10:23
To view the console, let's right click
anywhere on the screen and go to inspect.
10:28
Then next to the elements tab,
let's click on the console tab.
10:33
And we should see an array of three 9s.
10:37
These are the number of active
bricks in each brick group.
10:40
If I launch the ball and hit a brick,
we'll see some of these numbers go down.
10:43
This is what we're going to use to detect
if there are no bricks left on the screen.
10:49
Let's go back to our code.
10:54
First, let's remove just the word
console.log at the beginning of line 99.
10:55
We'll first remove the last curved bracket
on the line, then go to the beginning of
11:01
the line and remove console.log and
the first curved bracket.
11:05
Next, we're going to assign this to
a variable called activeBrickCount by
11:09
writing const activeBrickCount equals.
11:14
Right now, activeBrickCount will
contain an array of three numbers.
11:17
But ideally,
11:22
we'd want this just to contain one number
that contains the total of all the arrays.
11:23
For this, we'd need to change
the Array Mapped method on line 99 to
11:29
an Array Reduce method.
11:33
Let's do that now.
11:35
Double click on the word Map and
replace it with the word Reduce.
11:37
The Array Reduce method accepts two
arguments in the callback function.
11:41
One is the accumulator, and
the other is the current value.
11:46
So let's wrap our brickGroup
argument in parentheses and
11:50
add an argument of acc before
the brickGroup arguments.
11:54
Next, what we want to do is add the active
count value to that accumulator.
11:59
So inside our callback function
just before the word brickGroup,
12:05
let's put acc +.
12:10
This is going to add the three
nine values together and
12:12
whenever one of them changes,
this will update.
12:16
Cool, and at the end of the line,
let's put a comma and
12:20
add a zero to make sure that
we're returning a number.
12:23
Now let's write an if statement to check
if the active brick count is equal
12:26
to zero.
12:30
At the end of line 99 press
enter a few times and
12:31
write if (activeBrickCount ===
0 then add curly braces and
12:35
inside the curly braces let's
put youWinText.setVisible,
12:41
open parenthesis and
add true as an argument.
12:46
That at the end of that
line let's press Enter and
12:50
write this.scene.cause
followed by parentheses,
12:54
this will pause the game when
the text becomes visible.
12:58
Now let's test this in our browser.
13:02
But to prevent us from actually needing to
complete the game by getting rid of all
13:04
the bricks on the screen, let's change
the value of zero on line 101 to 26.
13:08
Which means we only need to hit one
brick to see the youWinText, cool.
13:13
Okay, since we don't need to look at
the browser console anymore, let's close
13:18
the developer tools by pressing the X
button on the top right corner.
13:22
Now, when we launch the ball and
hit one brick,
13:26
the You Win text appears
just as we expected.
13:29
Cool, but before we forget,
let's go back into the code and
13:32
change the number from 26 back to 0.
13:36
On line 101, let's delete 26 and
replace it with zero.
13:39
Okay, I know I've said
this a few times now, but
13:44
I really think our game is
starting to come together,
13:46
especially now that we have
the gameOverText and the youWinText.
13:50
In the next video, let's focus on
adding sound effects to our game.
13:54
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