Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

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
Questions?
Video Transcript
Downloads
Workspaces

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.

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

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

You need to sign up for Treehouse in order to set up Workspace

Sign up