Doing Things With Functions

6:15 with Andrew Chalkley, Dave McFarland, and Joel Kraft

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.

Teacher's Notes
Video Transcript
Downloads

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:
```
add(2, 3);
```
This will make an alert box open in your browser with the number 5 in it.

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.

Introducing JavaScript

Doing Things With Functions

Using Functions

Downloading and Running the Project Files

Sign in