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
Start a free Courses trial
to watch this video
Practice calling functions while adding additional graphics to the JavaScript game.
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.
[MUSIC]
0:00
Here's what my game currently looks like.
0:04
I have nine platforms and nine coins.
0:07
Were you able to add more platforms and
coins to your game?
0:09
If not, or if you wanna have
your game look just like mine,
0:12
you can open the new
workspace on this page.
0:15
It has all of the files and code in
place for you to work along with me.
0:17
You can also keep working with
your previous workspace and files.
0:21
If you closed your workspace,
0:25
you can find it again from
the workspaces page in Treehouse.
0:27
Just click the Workspaces button here,
0:31
and you'll see a list of all of
the workspaces that you've created so far.
0:32
All right, here we are on the workspace.
0:37
You'll notice that there's some graphic
files that we haven't used yet, for
0:39
example this platform_2.png file.
0:43
It has a different look than our
other platform, let's use it.
0:47
Open the game.js file, and
scroll down till you find something
0:50
that says window.onload, around line 75.
0:57
This part of the program creates,
or defines a function,
1:02
that runs as soon as the webpage loads.
1:06
That is, when someone opens the webpage
in their browser, this code runs.
1:08
This is common in a lot of programs and
especially in games.
1:12
The code here gets a lot of the game
components in place so the game can start.
1:16
For example,
1:21
this function here called preload does
some setup work before the game begins.
1:22
In this case, it sets the background
color for our game and
1:27
loads images that we'll use in our game.
1:32
Here's a line that loads a platform
graphic that we're currently using.
1:35
What do you think you'll need to do
to load the second platform image?
1:40
Why don't you pause the video and
give it a try?
1:43
I'll wait right here.
1:46
Just a reminder, if you're feeling
overwhelmed by all the code here,
1:49
don't worry there is a lot
happening in this JavaScript file.
1:52
But if you follow along,
1:56
you'll get a sense of how you can make
things happen with just a bit of code.
1:57
You don't need to understand
everything you see here.
2:02
You can learn it all in time,
just relax and get a feeling for
2:05
what programming is all about.
2:08
Okay, here's how we can load that image.
2:11
I'm just gonna copy this line of code,
2:13
And paste it in.
2:21
There are only two
changes you need to make.
2:23
First, change the name of the graphic
file to use platform_2.png,
2:26
and change the name of platform here
by adding a 2, we'll call it platform2.
2:32
You should be familiar with
what type of code this is,
2:38
you learned about it in the last video.
2:42
This code calls a function
named game.load.image.
2:44
It's a method, or code,
2:48
that's built into the phaser library
that we're using to build this game.
2:49
Remember, we can give functions
information to control what they do.
2:54
In this case the first piece of
information is the name that we'll use to
2:58
identify this new object.
3:03
Because it's different
than the other platform,
3:05
I'll add a 2 to give it a different name.
3:07
The second piece of information
is the image file we'll be using.
3:09
Now if you save this file and preview it,
3:14
you'll notice that the game
isn't different at all.
3:16
That's because we only loaded the image,
we haven't used it yet.
3:19
So if we go back to the workspace
in the game.js file,
3:23
we'll scroll up to the add
platforms function here on line 29.
3:27
This is where we create new platforms.
3:31
What do you think will happen if we
change platform here to platform2?
3:33
Why don't you pause the video and
try it yourself.
3:40
Okay, did you change
some of the platforms?
3:44
I'll change these last three here.
3:46
I'm gonna save the file and preview it.
3:52
Cool a new platform look.
3:54
Now why don't you add one more
platform to the game like this,
3:56
up here at the top using
the new platform image.
4:00
In the next video I'll show you how to add
new animations like this animated coin.
4:04
I'll see you then.
4:08
You need to sign up for Treehouse in order to download course files.
Sign up