Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Commands, or functions, are the basic building blocks of a program. A function lets you define specific steps a computer should take. You then make the computer perform those steps by "calling" the function. Learn about functions while adding to a JavaScript game.
Using Functions
-
Create or "declare" a function. This stores the steps of the function in memory. The function doesn't activate, but the computer remembers what to do:
function add(x, y) { alert( x + y); }
-
"Call" a function. Make the function do something by calling it by name and giving it some information:
This will make an alert box open in your browser with the number 5 in it.add(2, 3);
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.
-
0:00
In the last video, I talked a little bit about different parts of a programming language
-
0:04
In this video, I'll talk about the basic building block of a program: a function.
-
0:10
A function is a collection of code that "does something." It has a function.
-
0:14
For example, in our game there's a function to add items like coins to the screen, to add platforms, to create a badge.
-
0:21
There are a lot of functions in our game.
-
0:24
If you'd like to follow along, you can launch the workspace on this page, or
-
0:27
continue working with your previous workspace.
-
0:30
For example, here's a function that adds coins to our game.
-
0:34
There are two steps to using a function, the first step is creating, or
-
0:38
what's called declaring the function.
-
0:40
Declaring a function puts your programming code into a neat
-
0:43
little package that's stored in the computer, or in your browser.
-
0:47
In JavaScript, the function keyword creates a function.
-
0:52
However, the code doesn't do anything until you call the function,
-
0:57
that's the second part of using a function.
-
1:00
To call a function you use its name without the function keyword.
-
1:04
For example, this function addItems is declared here,
-
1:08
but it's not called til way down here on line 84.
-
1:13
Calling a function makes the programming inside it run.
-
1:17
Now, let's call some functions to make our program do stuff.
-
1:21
Notice that this function, createItem,
-
1:28
Is declared here, and it's called up here, inside of the add items function.
-
1:34
You can see that we can call functions from within other [LAUGH] functions.
-
1:38
Now this may seem confusing but it's very common in programming to create small
-
1:42
units of functionality, like these functions that do just a few things.
-
1:46
And then call them throughout the program even inside other functions.
-
1:51
Now notice that when the create item function is called,
-
1:55
there's some information inside the parentheses, 375, 300 and coin.
-
2:01
This is information that we give to the function.
-
2:04
In programming talk, we say we pass this information to the function.
-
2:08
Functions can accept information and
-
2:10
that information changes how the function works.
-
2:13
Let's add another line here, I'll
-
2:19
type createItem to call the function, and pass it three pieces of information.
-
2:26
575, 500, and the string coin,
-
2:34
I'll save the file and preview it.
-
2:38
Another coin, as you can see, calling a function makes something happen.
-
2:43
If this didn't work for
-
2:44
you, look carefully at your code, make sure that it matches mine exactly.
-
2:50
Even a small error, like forgetting a comma or
-
2:53
a quote mark can keep a program from working.
-
2:56
Now the numbers here, 575 and 500,
-
2:59
determine where the coin appears on the screen.
-
3:02
The game area is split into coordinates, at the top,
-
3:07
is 0,0, that's at the top left-hand corner.
-
3:11
From left to right, we go from 0 all the way up to 800.
-
3:15
From top to bottom, it goes from 0 to 600.
-
3:18
The first value is the position of the coin from the left,
-
3:22
and the second value is the position of the coin from the top.
-
3:26
If we alter any of these values,
-
3:28
it changes where the coin appears in the game.
-
3:31
In fact, I want to move this coin down a little, so I'll change 300 to 400.
-
3:41
And you can see the coin has moved down.
-
3:44
Let's add another coin.
-
3:46
In fact, I can just copy this, and paste this code cuz it's pretty much the same,
-
3:52
just a few pieces of information change.
-
3:58
Cool, and there's a third coin.
-
4:01
We can also add more platforms, let's do that now.
-
4:05
Platforms are created inside this addPlatforms function.
-
4:09
We can add another platform simply by typing platforms.create,
-
4:15
calling the function.
-
4:18
And we'll pass three pieces of information, 100,
-
4:23
550, and the string platform.
-
4:28
I'll save the file, preview it and we have another platform, super cool.
-
4:34
Notice that this code looks a little bit different than the code we did before,
-
4:37
it has platforms.create.
-
4:39
This is also a function, but it's a special type of function called a method.
-
4:45
It's a function or command that's provided by the phaser game library.
-
4:49
Remember we're using a library or
-
4:51
a bunch of prewritten code that gives us a lot of tools for creating games.
-
4:56
Let's add another platform.
-
5:06
I'll save the file and preview it.
-
5:10
Nothing's showing up, hm, I wonder what's going on?
-
5:13
Let's go back to our code, there's a slight
-
5:17
difference between the last line of code I wrote and the one previous to that.
-
5:21
Can you spot it?
-
5:23
There's one character out of place, this capital C.
-
5:27
It seems like a small difference, but
-
5:29
as I mentioned earlier, programming languages can be pretty picky.
-
5:33
You have to type things exactly right or a program won't work.
-
5:37
JavaScript code, like a lot of programming languages, is case sensitive.
-
5:41
Meaning that create with a lower case c and
-
5:43
Create with an upper case c mean two different things.
-
5:47
It's an easy fix fortunately, you just change this to a lower case c.
-
5:51
I'll save the file and preview it, cool, it works.
-
5:56
Why don't you spend a few minutes adding more coins and platforms to this game.
-
6:01
Let's see if you can create something that looks like this.
-
6:03
Has nine platforms and nine coins.
-
6:07
In the next video,
-
6:08
I'll show you how we can customize the game even more with some new graphics.
-
6:12
But, in the meantime, why don't you try another code challenge?
You need to sign up for Treehouse in order to download course files.
Sign up