 Hi, I'm Greg Smith. I'm a developer at Boku and I teach a training called the Intro to HTML5 game development and a training called the HTML5 Crash Course. Today I'm going to take you through making an Angry Birds type game in JavaScript in about 15 minutes. So here's what we're going to build today. We've got our player character off to the left, a bunch of obstacles off to the right, and it's rigged up so that when you press any key you get launched over there, and these obstacles are turning black when they're struck by the player. So I'm using the Box2D physics engine, specifically the Box2D web port to JavaScript, and I'm using BoxBox, which is a JavaScript library I made in order to make it a little easier to use Box2D web. So let's get right to it. In my project I have Box2D web, JavaScript file right here, the BoxBox JavaScript file right here, and an image, which is the image you saw on the left in the example earlier. So let's start out by making an HTML file. We're going to make index.html, and we're going to make game.js. In index.html we're going to put all the usual stuff you make in any website, our HTML5 doc type, actually let me go ahead and hide this side by now. HTML, our head, our title, let's call this game Happy Guinea Pigs. And we're going to include the two JavaScript files I just showed you, Box2D web-2.1.a.3.min.js. I could have copied and pasted that, but I'm feeling very hands-on today. And also we have to include BoxBox in that order, since BoxBox depends on Box2D web. There's other stuff you could put up here, but I'm not going to do that today. And already I've made some kind of mistake. Ha, got it. That's live coding for you. So we need a canvas in here. This is going to be a canvas game. Give it an idea of game, give it a width of, let's say 640 pixels, a height of 380 pixels to make sure it's visible to you folks. I'm going to put a text that you see if you don't support canvas for any face. And I'm going to put the script file for game, the script tag for the script element for the game itself here. It is going to use the canvas, so I'm putting it after the canvas itself and not wait for DOM ready. And that's everything that's going to be in here. So with that we have a very, very boring little game. Just removing complete from the URL. There we go. Empty, boring, white screen. The magic is going to happen in game.js. So where do we start? Well, like any programmer, we start with the documentation. On Boxbox's website you can find this by searching for Boxbox in Google, or it's incompled.github.com slash boxbox, we have our documentation here. And also the link to download it, which is where I got those files to begin with. Well, create world is the first thing you do. It's got some options. Here's an example of using it, so I'm just going to copy and paste creating a world. Alright, that's easy. I just noticed that here it's looking for a canvas with the ID myCandvis, and mine was called game. Yep, right here. So let's not make that mistake. And let's go back to the documentation. What else can we do? With a world you can create entity. Everything in Boxbox is an entity, and as you can see there's a million options for this. It's almost everything is an entity. So I'm going to copy and paste this example of creating a player with these three options. Player, circle, this player is just a name, it could be anything. Circle or radius of two, okay. What happens when we run this game now? Circle appears in the middle of the screen, and gravity just takes it away from us. So the next thing we're going to want to do is put some ground under the player so it doesn't fall off the game like that. Let's create another entity. And I don't need to cache these in variables, so I'm going to remove these. You can save these entities in variables to refer to them later, but I don't think I need to. I'm going to call this one the ground. This one is going to be a square instead of a circle. Squares don't have radii. So I'll have a width, I guess. 10 maybe. 0.5. The units in box2d are all metric, so these are actually meters. The simulation works really well when you're around this scale of objects that are 0.1 meters to 100 meters in size or something like that. If you get really smaller, really big, the simulation can lose accuracy. The ground is going to fall too. So you can change the type of this entity to static, which is what makes it immobile. There. And you can change the x and y positions. There. We've got the ground. So something that boxbox adds that isn't built into box2d by itself is some rendering stuff. So box2d web has debug drawing, and boxbox actually provides more comprehensive canvas drawing. Here we can just say the ground is green. And there it is. And since this is all going straight to canvas, you can use CSS colors in here. A nice shade of dark green there. It looks kind of grassy to me. And a lot of what I do when I'm making games this way is just playing around with properties until it looks good. I'm just going to set the width a little wider. I'm going to set the y corner a little lower. Great. So let's move that player off to the left. Alright, let's make it a little smaller by setting the radius down to 1. Okay, we're getting somewhere. And just like I set the color on the ground, I can set an image. So the image is going to be pig.png, which is a file I made earlier, by taking a picture of a guinea pig and making it circular and giving it a transparent background. But as you can see, the image is way too big, and it's not actually being drawn exactly where the image is. Thankfully, there's a property in a box box called image, image offset, image stretch to fit. Set that to true. Yeah, it's better. Now let's make it so we can move this guy. What we want is a keyboard event handler. And we can actually add those right in here. If I had cached the variable for the player, I could call methods on that. But you can also just set up anything you want right here. On key down, in that E is the DOM event, but we're not going to look at it. Any time any key is pressed, move this player. So inside of the callback, inside of the event handler, this refers to the entity that you're attaching the event to. And there is a method for entities called applyimpulse, entity applyimpulse, which takes a power and number of degrees. And we install. We apply an instantaneous, just a quick force onto this entity. And we want to move it off to the right because that's how these types of games work. So applyimpulse, a power. I don't know, since it's metric, is it Newton's? I actually don't remember off the top of my head. But I do know degrees, 45 degrees, will be off to the right. Let's see how it looks. And I press spacebar. Okay. It looks kind of floaty. So what you can do in boxity is change the density of it to something higher. Now it's heavier because the density calculates the mass using its area. But now we're not giving it too much oomph, so we have to increase the power of our impulse. That looks good, but I want to make it go slightly closer to the ground. So I changed it 45 to 60 degrees and now I'm getting what I want. So now we just need a target. So I'm going to make a bunch of similar entities. So instead of just copying and pasting world that create entity over and over, you can actually cache properties that you reuse over and over. So we're going to call this block. And here this is a plain old JavaScript object, the podge so. And all of the blocks will be named block. They'll all be squares. They'll all be, ah, let's make them brown, I guess. I think that's what I used in the example I showed you. Width 0.5, height 4. I think that works for me. And now we can use create entity and pass in that block. And we should get, yep, created a block. And now we can do this two times. And heck, three times, four times. We could put in a loop and keep making them forever. And now there's four of them as you can see. But we don't want them all to be exactly the same because they need to be in different places. That's where the magic happens. We can give each one its own exposition. Let's start with this two. Move them further to the right than that. All right, we're getting somewhere. Tweaking numbers is a big part of making games, especially when you're tweaking a physics engine. And it's kind of a fun process. It's a creative process. And sometimes you discover things you weren't trying to do and it turns out that those things are good for your gameplay. Oh, cool. We have a couple targets and we can knock them over. Oh, it's a little different that time. Box City is actually what you call a non-deterministic physics engine, which means things might happen a little differently each time. But if you've played Angry Birds, you probably know that. So, okay, let's make one more. And this one, instead of just changing the X parameter, we're also going to change it to be wide instead of tall. So width, four, height, 0.5. Uh-oh. Yep, error. I always miss my commas. And that's not quite high enough, I guess. So we're also going to change the Y parameter. I guess that's not high enough. One. There we go. I'm going to stick with three for now. I'm not going to waste time doing the same thing over and over. You get the idea of how these things work. And one other thing the demo had before that we didn't do here yet is the impact handler. So in the documentation, you see there's a couple event handlers for on impact, on finish contact, on start contact. On impact is the one we're going to use. And that callback gets three parameters. The entity that the impact occurred with, the normal force and the potential force. The normal force is the only one we're going to be concerned about. So on impact. And since I'm writing this here, I'm going to be the impact handler for every block. All three of them. And any more I make in the future. And the three parameters were the entity that collides with, the entity that collides with the block, the normal force. We're not even going to put in the tangential force. And what happens in here? Well, you can look at the force of the impact and do all kinds of interesting calculations like figure out how much damage to do. We're going to keep it simple. We're going to make it say this.color. It's going to change black. Oops, typo. But so this isn't good. They're changing black when they're colliding with each other and colliding with the ground. And that's not interesting for our gameplay. We want this only to happen if it's colliding with the player. So here we can actually look at the entity that we're colliding with. Check its name. And if the name of the entity we're colliding with is player, then change black. Now you're talking. And that one never actually touched the player. Let's do it again. Let's do this over and over. That happened pretty much the same way. So that's it. We wrote this in 53 lines, which is a little under par. And we've got the start of a fully fledged game. You can come in here and just kind of take it from there. You can make more comprehensive keyboard input so you can aim by changing this angle, maybe pull back further to launch the object harder. We could look at the force of impacts to determine if the object should be destroyed or not. We can keep track of their hit points. We can do all kinds of stuff. And it only took a few minutes to get this started. Thanks for watching. This has been a Boku training production. I'm Greg Smith, and have fun making games.