[MUSIC]

Here's what my game currently looks like.

I have nine platforms and nine coins.

Were you able to add more platforms and coins to your game?

If not, or if you wanna have your game look just like mine,

you can open the new workspace on this page.

It has all of the files and code in place for you to work along with me.

You can also keep working with your previous workspace and files.

If you closed your workspace,

you can find it again from the workspaces page in Treehouse.

Just click the Workspaces button here,

and you'll see a list of all of the workspaces that you've created so far.

All right, here we are on the workspace.

You'll notice that there's some graphic files that we haven't used yet, for

example this platform_2.png file.

It has a different look than our other platform, let's use it.

Open the game.js file, and scroll down till you find something

that says window.onload, around line 75.

This part of the program creates, or defines a function,

that runs as soon as the webpage loads.

That is, when someone opens the webpage in their browser, this code runs.

This is common in a lot of programs and especially in games.

The code here gets a lot of the game components in place so the game can start.

For example,

this function here called preload does some setup work before the game begins.

In this case, it sets the background color for our game and

loads images that we'll use in our game.

Here's a line that loads a platform graphic that we're currently using.

What do you think you'll need to do to load the second platform image?

Why don't you pause the video and give it a try?

I'll wait right here.

Just a reminder, if you're feeling overwhelmed by all the code here,

don't worry there is a lot happening in this JavaScript file.

But if you follow along,

you'll get a sense of how you can make things happen with just a bit of code.

You don't need to understand everything you see here.

You can learn it all in time, just relax and get a feeling for

what programming is all about.

Okay, here's how we can load that image.

I'm just gonna copy this line of code,

And paste it in.

There are only two changes you need to make.

First, change the name of the graphic file to use platform_2.png,

and change the name of platform here by adding a 2, we'll call it platform2.

You should be familiar with what type of code this is,

you learned about it in the last video.

This code calls a function named game.load.image.

It's a method, or code,

that's built into the phaser library that we're using to build this game.

Remember, we can give functions information to control what they do.

In this case the first piece of information is the name that we'll use to

identify this new object.

Because it's different than the other platform,

I'll add a 2 to give it a different name.

The second piece of information is the image file we'll be using.

Now if you save this file and preview it,

you'll notice that the game isn't different at all.

That's because we only loaded the image, we haven't used it yet.

So if we go back to the workspace in the game.js file,

we'll scroll up to the add platforms function here on line 29.

This is where we create new platforms.

What do you think will happen if we change platform here to platform2?

Why don't you pause the video and try it yourself.

Okay, did you change some of the platforms?

I'll change these last three here.

I'm gonna save the file and preview it.

Cool a new platform look.

Now why don't you add one more platform to the game like this,

up here at the top using the new platform image.

In the next video I'll show you how to add new animations like this animated coin.

I'll see you then.