"Swift Collections and Control Flow" was retired on May 31, 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
Explore how to add logic to our game when physics bodies collide in Phaser and understand how this can be utilized to trigger actions or implement game mechanics when objects in our game world collide.
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,
0:00
we added some collisions between
the ball and the paddle,
0:01
and we also added some collisions
between the ball and the bricks.
0:04
In this video,
0:09
we're going to add some logic to make
the brick disappear when the ball hits it.
0:10
We'll also add some logic to bounce the
ball at an angle after it hits a brick.
0:15
Near the bottom of our
creates function on line 61,
0:21
we've created a collider between
the ball and the brick group.
0:24
The collider methods can take a callback
function as a third argument.
0:29
Let's add one called hit brick.
0:34
We can do that by adding a comma after
brick group and writing hit brick.
0:37
Let's go ahead and
add this callback function now.
0:42
Scroll to the bottom of our file,
below the update function.
0:45
At the end of line 81,
hit Enter a few times and
0:48
then write function hitBrick, add
parentheses, and then add curly braces.
0:52
The hitBrickCallback function will be
executed when the ball hits a brick.
0:57
This function will be passed two arguments
which will be the two objects that have
1:03
collided.
1:07
So in our case, the first argument
will be the ball, and the second
1:08
argument will be the brick in the brick
group that has been hit by the ball.
1:12
Okay, the first thing we need to do
when the ball hits the brick is to make
1:18
the brick disappear.
1:22
So, let's open up
the hitBrick function and
1:24
add the following code,
brick.destroy and add parentheses.
1:28
The destroy method will destroy a game
object by removing it from the screen and
1:34
also stop it from being updated.
1:39
Once a game object has been destroyed,
it can't be brought back.
1:42
So, this is perfect for our use case.
1:46
Cool, let's put an underscore in front of
1:49
the ball argument to indicate
that it's not going to be used.
1:52
Now let's test all these
changes in the browser.
1:57
As you can see, when the ball hits the
brick, the brick that it hits disappears,
2:01
and the ball can pass by
where the brick was before.
2:06
The problem we have now is the ball is
bouncing up and down in a straight line.
2:10
We want it to move in a different
direction after it hits the brick.
2:15
Let's change this in our code.
2:20
Because of the setBounce
method we have on the ball,
2:22
it should bounce back in the opposite
direction when it collides with something.
2:25
So, if it collides with
something at a 45 degree angle,
2:30
it should bounce back at a 45 degree angle
as well, but in the opposite direction.
2:34
Let's test this theory.
2:40
In our update function, below line 77,
2:41
let's make the ball move at an angle
by writing the following code,
2:45
ball.setVelocityX and add parentheses.
2:51
Inside these parentheses,
let's add the value 150.
2:55
The set velocity x function will cause
the ball to move towards the right
2:59
at a speed of 150 pixels per second.
3:04
This along with the set of velocity y
function, causing the ball to move upward,
3:07
will give it the illusion
that it's moving diagonally.
3:12
Let's test this in the browser.
3:16
After we hit the spacebar,
you'll see the ball moves at an angle and
3:18
when it collides with an object it
bounces back at the opposite angle.
3:22
We pretty much have a playable game now,
but we only want the ball to bounce at
3:27
an angle when it hits the brick and
not when we first launch it.
3:32
This is something that can
easily be done in the code.
3:36
Let's do that now.
3:38
Let's remove the set velocity X method
from the update function on line 78 and
3:40
in our hit brick function,
let's add an if statement to check if
3:45
the ball is moving in a straight
line when it hits a brick.
3:50
Let's go to line 83 and hit Enter and
3:55
then write the code if parentheses
3:59
ball.body.velocity.x triple equals 0.
4:03
This checks if the ball is moving in
a straight line by checking if the x
4:09
velocity is equal to 0.
4:13
If the ball does hit
a brick in a straight line,
4:15
then you want the bold to
start moving at an angle.
4:18
So we can give it an X philosophy of 150,
let's do that inside the IF statement,
4:21
at the end of line 84,
lets write some parenthesis, and
4:28
then hit Return, and
then write ball.set velocityX,
4:33
open parentheses and
inside that put a value of 150, nice.
4:37
Let's check if this works in the browser.
4:43
Now, when I launch the ball by pressing
space bar, it moves in a straight line
4:46
until it hits a brick, and then it starts
to move in an angle, this is really cool.
4:50
Right now we have
a playable breakout game.
4:55
The next thing to do is to show some text
when the player wins or loses the game.
4:58
We can do that in the next video.
5:03
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