 Welcome to Code.org App Lab Space Invaders starter with Tokyo EdTech. That is me in today's video. Here's what we're going to be working on. We're going to be using Code.org's App Lab. Now, if you haven't seen any of my other videos on this or you haven't done this before, please sign up, create an account, walk through their tutorial and learn the basics. So I'm making this for my students who already know a lot of this that I'm going to talk about. So what I've done is I've already gone ahead and got started and I've created a little splash screen and I've created a screen where the game is going to be. So if I run my app, you'll see this is the splash screen. I could put some instructions and things here and I could change the colors around a little bit as well. I'm just going to leave it the way it is. I'm going to click Start. And as you see, nothing happens because I haven't coded that part yet. So what I want to do is show you how to at least do some of the basics of game programming using App Lab. Now there is already a game lab in this, but I wanted to build on the skills my students already have. And I wanted to show kind of how to do this in a different context. So now one caveat, I haven't done this yet before. Usually when I do a video, I do it first and then I recreate what I did. Today I'm just going to try it and see what happens. So wish me luck. Okay, so first thing I need to do is when you're doing JavaScript programming here in the browser, and this is just an abstraction of the JavaScript coding made by Code.org. It's fantastic. It's amazing kudos to those people. Okay, so the first thing we need is you'll see here there is something called a canvas. So I'm going to pull the canvas out onto my screen. I want to extend that about as big as I can there. It actually kind of works out the way I want it. So I do that. Oops, missed it. And there we go. Genius. Okay, so this is the canvas. So I'm going to call this CNV game. Now notice, if you're looking, I have a screen game and I have a canvas called game. I'm really picky about naming as my students will tell you because it just makes your life that much easier. So what we need here is we're going to be using this canvas. And this is where we're going to be drawing all of our game objects. And then down here, what I want to do is I want to go ahead and put some buttons. And just put one button there. I should tell you what it is. I'll call this button left. And this is going to say left. And I'll just leave it at that. I can play with the colors and things like that. But I should tell you what, why don't we do this? Put a little thing over there. See text color. Let's change the background. Let's see if we can change the background color to black. Let's go ahead and just code that myself. Okay, so there's a left. Let's go with that. I'm okay with that. So I'm just going to click this and you can see how I can duplicate it. But when you duplicate it, the button name changes just like button three. And as my students will tell you, I'm very picky about what buttons are called. And especially once your program gets bigger, you really kind of appreciate these things. And I'm going to do one more button and eventually this will be our button to fire. I don't think we'll get to that today, but it needs to be there at some point. Okay, so I'm just going to go ahead and... Now you notice how they're kind of overlapping. So I'm going to go ahead and change the width of this one to say 70. And again, you can kind of play around with the numbers. I'm not big on design. I'm more big on the coding side of things. So I'm going to go ahead and run this again. I'm going to hit start and here is my game. So you can see we don't really see anything because the canvas is blank. And that is about what we expected. So what I'm going to do, and this is... Again, I'm not 100% sure. I don't know all of these things. But what I want to do here is I'm going to go ahead and go into my code. Actually, now in Taiwan, let's go ahead and yeah, I'm going to my code. And so watch what I do here. And we're going to update this later if I continue this tutorial. What I want to do is I want to go ahead and make a couple of variables. And I'm going to call this player X. And I'm going to make a variable called player Y. And here's something. I don't know how the coordinate system here works. I guess I actually do. So that's 00. And that's 168. So let's see here. So I'm going to make the X about 160 and the Y about 310. So 160, I'm going to make the Y 310. So I'm just going to give my player a location. So then over here, what I'm going to do is under Canvas, you'll see Circle. And what I'm going to do is I'm going to go ahead and just draw a circle at player X. Player Y, note the capitalization. And I know what number is good. I'm going to try 40. I don't know how big that is. And I think I also need to do set fill color. So let's try that. So I'm going to make my player green. I like green. I don't know if this is going to work, but I'm going to try it. And it starts. So you see here, I've got an error down here. It says set fill color called without an active canvas. Now at this point, how do we set an active canvas? We use our eyes. Oh my gosh, look at that. Set active canvas. Let's go ahead and use that. And so apparently we're going to have more than one canvas. So this is Canvas Game. So let's go ahead and hit start again. Oops, sorry. I'm going to hit reset. I'm going to hit run. Notice the error is missing. I'm going to hit start. And you can see there is my player. It's a little big. So let's go ahead and make that a little bit smaller. It's 20. So it says your code may have changed. Click reset to run your code again. So hit that, hit start. And there's my player. I mean, it's not fantastic. It's not the most amazing thing in the world, but it's a start. Now we can play with these numbers later. And let me think about this. So the next thing we want to do, I think, is we'll make the player move left and we'll make the player move right. So to do this, I'm going to create a couple more variables. And later we're going to simplify this with some other coding. But for now, this is what we're going to do. So player dx equals zero. And actually I want to take out that's all we need because the player is just going to move left and right. So if you're ever seen Space Invaders, that's how the player moves. So you'll see here there's this little warning sign. It says player dx is defined, but it's not called in your program. Of course it's not called because we haven't done it yet. So here's something you've got to think about. So I'm going to hit reset and I'm going to hit run. So you can see this program right now. It's just sitting there waiting for you to do something. This is something you'll hear called event driven programming. It's waiting for something to happen. I'm simplifying things a little bit, but that's the gist of it. So I click the start button, it takes me to this screen. Now because it's a game, we want this to be moving and stuff to be happening all the time. So what we've got to do in this particular case, I think it's in here somewhere, is we need to create a timed loop. So notice when I pulled that out, it became a function. So what I'm going to do is I'm going to go down here. I'm going to go here. And what this means is every 1,000 milliseconds, repeat this function. Now since it's a game, we want that to repeat. So I'm going to try 50. And that means it will repeat 20 times a second. So 20 times 50 is 1,000. So that's milliseconds. We might increase that later, we might decrease it. We'll see. I'm going to go ahead and hit run and see what happens. Hit start. Okay, so far so good. So what I want to do is I want to set this dx to 1. And then down here, I'm going to do the following. Notice I'm not choosing var. I'm not choosing x equals. It doesn't really matter if I do it before here or I do it after here. It doesn't really matter. Maybe it makes more sense to do it before. I'm going to say player x equals player x plus player dx. So what that means is whatever the x coordinate is, the player, every time this loop calls, it's going to add dx, which in this case is 1, which means it's going to move right. I'm going to hit run, start, and you can see how it's moving off, well, moving towards the side of the screen. So maybe that was a little slow, but that's okay. Let's leave it like that for now. You'll also see there's this little trail. Okay, so I did play around this, I don't know, a week or two ago, whatever it was. And I found out it took me forever to figure this out. What you got to do is clear the canvas. In your loop, clear the canvas, and that fixes it. I don't know why. So hit start, and you can see that trail that was there is now gone. Now this is a little slow, so let's go ahead and hit reset. And well, we could change this to 20. That'll speed it up. Let's try that and see what happens. Okay, it's okay. Let's go ahead and try 2. And again, this is one of those things. You just sometimes you've got to play around with the numbers. Yeah, it's okay. Let's go with 4. I like the 4 maybe, or the right number. Start. Okay, I'm going to go with that. I'm going to keep that. But here's the thing. When I start the game, I want this to be zero. So if I run it, I hit start. Okay, I want my player to be there until I push this button or push this button. Okay, so all I got to do is go back to my code. And this is on event. We've done this before. At least if you're one of my students, you've done this before. Okay, so on event. Now it doesn't matter if I put it here or put it down here. I just like the group things. So on event ID. Now notice how easy it is to figure out which button it is because I gave it a good name. So button left. So when I click button left, I'm going to say X equals. But in this case, it's going to be player DX equals negative four. And that will move it to the right. Sorry, that'll move it to the left. And then I'm going to go ahead and do on event button right. And I'm going to go ahead and click variables. X equals. Okay, you notice I got a little error there. Player DX equals four. And it's because DX needs to be capitalized. Okay, JavaScript is like a lot of languages. You got to capitalize things correctly. Now I could have put small DX up here. I just did. This is just a common way of doing it. So I'm going to hit run and start. And now I'm going to click the right button. It's moving right. I'm going to hit the left button. And it's moving left. Okay, so right, left, right, left. Now you notice it will go right off the screen. Okay, so let's go ahead and fix that real quick. So I'm going to go to control. And what I'm going to do is I'm going to go if. Where is that? So right here. So if player X is greater than. And I'm going to go over here. So Y is 348. So let's say 350. But remember it is, it has a certain size. So I'm just going to kind of guess here. I'm going to say Y equals 380. I'm going to try 370. So I'm going to do that. And then what I'm going to do is the following. So basically going to stop it at the border. So I'm going to say player X equals 370. And I'm also going to do the following. I'm going to have it stop. Player DX equals zero. Okay, so I'm going to hit run, start. I'm going to try and go to the right. Okay, if you say something went wrong. What happened there? Let's see. X. Oh, I was looking at Y instead of X. That's why. So it should be three, maybe 300. Let's try 300. And sometimes this is just what you got to do either. Unless you're going to figure out the calculations. You just kind of play around the numbers. So you get the effect that you want. Boom. Oh, perfect. Okay. So notice it stopped at 300. So if I go to left, of course it's going to go right off the screen. So I'm going to hit reset. I'm going to do the same thing. Now, if those of you that are comfortable with code, what you might want to do is just hit show text. I find this is easier than having to drag and drop everything. So in this case, I think it's going to be less than negative 10. And this should be negative 10, about less than 10. Sorry. This should be equals 10. I think that'll do it. Now, to check if your code is correct, just hit show blocks. Okay. And it comes right back. Now, if you made a mistake, it will not let you, it will not let you do that. So hit show blocks. It'll tell you, you need to correct an error before it could be shown as blocks. Let me go ahead and fix that. Oops. Notice that on the right side, it is greater than. On the left side, it is less than. So hit show blocks again. And I'm going to hit run. Start. Left. Okay. So a little bit further. So I'm going to hit reset. I'm going to try maybe 15 in this case. And run. Start. Okay. Still a little bit more. So maybe 20. Again, like I said, normally I would figure this out and then, you know, recreate it. But I guess it's good to see the process here. So here's space evaders. It goes left. It goes right. Again, we'll probably end up changing that later. Let's go ahead and hit reset. And that's, I'll tell you why don't we stop there. That's a good place to stop. Okay. So we've got the player in the center. We've got the player going left and stopping at the right of the screen. We've got the player stopping at the right of the screen. And it goes left and right. So we've got our basically, we've got our game, our basic game structure set up. So let me just walk through that one more time in case you have, in case you missed it from the beginning. So starting with App Lab. Again, if you don't know this part, you know, watch their tutorial or watch one of the other videos I did on it. I put a little label here, title. I put a label author and I put a button called start. So when I click the start button, it takes me to screen game. On screen game, I have a canvas call so-called game, but SCR game and CNV game are two different things. I have three buttons, button left, button right, and button fire, which we'll get to eventually. And what button left does is it changes the player's DX. DX means delta X or change in X. Negative is to the left and positive is to the right. And then in our loop function, timed loop function, this is running every 20 milliseconds, which means about 50 frames a second. I don't know if it's actually that fast. It'll probably depend on your computer, but that's our goal with this. And you see player X equals player X plus DX. We check for the borders. So if it's going to go off the right, we fix it and stop it. It's going to go off the left. We fix it and stop it. We set the fill color and we draw the player. So I'm just going to go ahead and throw in a little bit of some comments here. So clear canvas, move player, check for the right. Now you do not have to put these in, but it's probably good, especially for your beginner to do so. Draw the player. And then I'm going to hit show blocks and it'll show up like that. So anything in gray is just a comment, which is quite nice. And then also just real quick, I made a couple of variables, player X, player Y, and player DX. In this particular game, the player Y never changes, but the player X and DX do change, depending on where you're at in the game. So that is that. That's the basics of getting a simple game up and running on Code.org's App Lab. And ideally I said, this is something that, you know, once you're done with it, you can share it to your phone and you can play it in your phone's browser. And yeah, it's pretty exciting. So we'll see how it goes. This is a kind of experiment for me as well, but I think I know the basics, so I'm happy to apply them here. And if you're one of my students, it's your job to recreate this. Okay, take care, everybody, and keep on coding.