Doing Things With Functions

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