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
Understand ways in which the game can be improved and maybe spend time improving the game outside of the course to solidify your understanding of Phaser.
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 made a few
small improvements to our game, but
0:00
that doesn't mean you have
to stop working on it.
0:04
There are so many more features you
could add to our breakout game.
0:07
And in this video,
I'm going to give you a few
0:11
suggestions with some helpful links
to push you in the right direction.
0:14
The first and possibly the most
easiest feature that can be
0:19
added is a way to reset
the game at any stage.
0:23
This will save people from having to press
the refresh button in their browser or
0:27
press Cmd+R on their keyboard
to refresh the page.
0:31
We could simplify it for
them by simply assigning it to one key.
0:35
With our current game, the easiest
key to use would be the Shift key.
0:40
But if you wanted to use
a custom key like A,
0:44
you could use the addKey
method provided by Phaser.
0:48
Let's take a look at how the addKey
method works in the documentation on
0:53
the Phaser website.
0:58
We went through how to use this
method in a previous video, and
0:59
it's really simple to use.
1:04
As you can see, there's an example of
four keys being used, W, A, S, and D.
1:06
But you could replace
them with just the R key.
1:12
Once you've done this,
you could assign this to a variable,
1:15
and then trigger the game to
reset when that button is
1:19
pressed by using the scene restart
method provided by Phaser.
1:23
Let's look at the documentation for
this method.
1:27
This method is really useful for
resetting a scene.
1:30
But during my testing, I actually found
the location reload methods more useful.
1:34
This is a web API method that
reloads the current URL.
1:42
And this works for our game, because our
breakout game only consists of one scene.
1:46
The phases seen of restart method requires
you to reset the scene variables manually.
1:52
So if we were to use that method,
we'd have to manually reset
1:57
the has ball launch variable to false
whenever the game restarts, but
2:01
using the location reload method
resets everything automatically.
2:06
This is just something to think about if
you were to implement the reset feature.
2:11
Another thing you could do is to add
different color bricks to our game.
2:17
The original Atari Breakout game
had four different color bricks,
2:22
red, orange, green, and yellow.
2:27
Our game only has one, white.
2:30
You could create and
2:33
import different color brick
images into the preload function.
2:35
And then in the create function, instead
of just mapping over different yValues,
2:40
we could create an array of objects
that contain the key of the image,
2:46
as well as the yValue, and then loop over
the array with the array map method and
2:50
change the key of the brick and
the yValue.
2:56
Speaking of different bricks,
2:59
one other improvement that could be
made to the game is to add a score, and
3:01
different brick colors could give
different scores when they're hit.
3:05
The scores could be displayed on the top
of the screen just like the original Atari
3:09
game and the logic for adding the score
could be placed in the hitBrick function.
3:14
The score could just be text that starts
at 0, and then whenever a brick is hit,
3:22
that value will update based on
the score given to each brick.
3:28
The final suggestion I'm going to make is
3:33
to randomize the angle of the ball
when it first hits a brick.
3:36
Right now, if I launch the ball
by pressing the space bar,
3:40
the ball will hit a brick and
always bounce off towards the right.
3:44
If I do it again, I'll press space, and
if you see, the ball hits a brick and
3:48
always goes to the right.
3:52
This is because of the value we've
placed in the setVelocityX method.
3:54
In the hitBrick function,
4:00
you could use the math.random
method to give you a number, and
4:02
if it's above 0.5,
the setVelocityX value will be 150,
4:07
and if it's below 0.5, it would be -150.
4:12
This will make the game
feel a bit more dynamic.
4:16
Anyway, these are just
a few of my suggestions.
4:19
You might have your own that you'd like to
implement to the game, and that's great.
4:23
In fact,
I'd love to see what you do to this game.
4:27
If you add any of your own features or
images,
4:31
please share them with us in
the Treehouse Discord server.
4:33
I'm really looking forward to
seeing what improvements you make.
4:37
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