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