 Welcome to Cookie Clicker Game using Code.org's App Lab. So today we're going to make a very, very simple version of a Cookie Clicker app using Code.org's App Lab. So I am assuming that you already have an account. If you don't, go to Code.org and create an account. It's free. This is an amazing resource for students learning a variety of computer science topics. What I really like about it is it's got a lot of great stuff, especially for younger programmers, younger users. I teach middle school. I teach high school. And this is a lesson for my grade six students. So let's take a look. So first, we're going to go to Create and we're going to see where it says App Lab. So I'm going to click that and it should come up with a blank project. So I'm going to go ahead and rename this because naming is important. And I'm going to call this Cookie Clicker. Cookie Clicker. And I know it's very original. So with the Cookie Clicker, with the App Lab, any app really, we're going to start with the design. Okay, so it's going to look very, very simple. There's going to be three labels. Okay, a label for the title of the game, a label for the score, and we're going to put an image into our game. So I'm going to start here with the title label. Now over here under ID, this is important to get this right. I'm going to change this to label, call it title, because it's the title of the game. And in this case, that title is Cookie Clicker. Oops. Now, I'm going to go ahead and make the font bigger. Oops, I'm going to go ahead and make the font bigger. There, that's down here. Now you can see how the font, I can't even see it now because it's so big. All I have to do is change the size of the box here. And I'm going to go ahead and kind of make that a little bit wider and hopefully get that down too. So maybe kind of go all the way across the length of the screen there and there we go. And then over here, I want to go ahead and make that centered. So it's centered in the little label here. Now, label is just a nice way of showing information. We don't click in it. And then this label, it's important that we give it a proper name. Right now it says Label 2. This is label title. So I'm going to say Labelscore. This is going to be our score. Notice it's LBL and capital S. I didn't have to put it that way. I just did it. This is a logical way of doing it. Now, the score when we start is 0. So again, I'm going to go ahead and align the text in the center. Again, I know I'm going a little fast. My voice is a little weak because I'm getting over COVID. So play it slow or just rewind if you're not sure what I'm doing. Again, my students have gone through the self-paced tutorial that this website provides. If you haven't done that, check that out first. It's very, very useful. So my students will be familiar with most of what I'm doing already. So you might want to make that a little bit bigger as well. You can kind of decide what size works for you. But most important thing, it's cookie and we need an image. So I'm going to click on this. And again, I'm going to call this image cookie. Capitalization is important. So notice I have IMG and then capital C for cookie. If you don't use the proper names, it's not going to work very well. Now under Image, you can click Choose. And you can link to something on the internet, which is probably not a good idea. You can go to Icons. Now I don't think they have a cookie icon, which is kind of sad. Now you could use one of these other shapes if you prefer. What I usually do is I go to this website, Open Clip Art. I'm going to type cookie. And everything on this website, as far as I know, is Creative Commons. You can use it for whatever purposes you like. And I know from experience, there's an image on the second page that I really like. So I'm going to use that. So I've got this image. I'm going to go ahead and save this image to my computer. And I'll put it into, I guess, I guess I'll put it on my desktop for now. And I'm going to call this Go Figure Cookie. Makes sense? So I like that image. I've saved it to my computer. So now when I go to Choose, I'm going to upload the file. I'm going to go to where I saved it and select it. And you can see it there. And I'm going to click Choose. So now I've got this cool little image. I'm going to make it a little bit bigger because I wanted it to be prominent. So at this point, my interface, my design is done. So if I run this, I got clicky clicker, score zero. I've got an image. Now, of course, when I click it, nothing happens because we haven't done the coding. That's part one. Again, it's just really important, especially for this and this, that you give it the proper name because we're going to be using that name later when we code it. So stage two, we need to create the code. So I'm going to go over to code. And again, if you did the tutorial, this should make sense. If you haven't done the tutorial, you probably want to go back and try that. So what we want to happen is when I click on the image of the cookie, I want to do something. I'm going to drag this on event, and the ID is image cookie. This is why we chose a good name. I know exactly what it is. So when I click on that image, I want to add to the score. Now, the problem is, I don't have a score yet. So let's go to variables, and I'm going to do var x equals. And when we start the game, our score is zero. That kind of makes sense. Now you see this little yellow triangle. It says score is defined, but it's not called in your program. We're going to fix that in a minute. Let's just ignore that for now. So when we click on the cookie, the score should go up by one. So what I'm going to do is I'm going to drag this one out. I'm going to say score equals score plus one. And it should change to look like that. So when I start the game, the score is zero. When I click, I add one to the score. Let's try it, see what happens. It looks like nothing is happening. Looks like we've messed up. Something's not working. And it's possible we may have. But what's going on here is the score you see here and the score you see here are not connected. We have to actually tell the computer, hey, when I change that score, I need to update it here as well. And we do that with set property. So I'm going to drag set property into here. And the ID of this is label score, so LBL score. And I want to change the text to the following. Score colon space plus score. I'll put some space in there to make it a little clearer what I did. So what this does is it sets the text property of this label to this text plus this score. This text is inside quotation marks. So it'll print score as you see it. This score is not in quotation marks. Neither is this, neither is this, neither is this. So it will print the value of whatever score is. Let's go ahead and run it. And now we have a working cookie clicker game. Yeah, it's that easy. Now I'm going to go ahead and reset that. The other thing I might want to do is I might want to play a sound when I click the cookie. So I'm going to go ahead and find that one. It's called play sound. It doesn't matter where I put it in here. I'll just put it at the end. And I'm going to go ahead and choose a sound. There's all kinds of different sounds you can choose. I'm going to just go under alerts and try a couple. Don't like that one. Ooh, I kind of like that one. Ooh, I like that a lot. I'm going to use that one. So I'm going to go ahead and run this and try it again. OK, that's kind of cool. Oh, let's see here. Yeah, we don't want to leave that. I think we can go with that. It's a little bit long. That's why it's getting cut off. But if you find a shorter sound, you won't have quite that same effect getting interrupted. But that's basically all there is to the game. Now, if we want to get fancy, we could go ahead and add a reset. So if I go back to design, I could pull out a button, for example, and I can call this button reset. And the text is going to be reset. And you can play with the size and the fonts and colors and things like that. And then back in my code, I'm going to do the same thing on event. In this case, it's going to be button reset. I'm going to reset the score. I'm going to say score equals 0. And I'm kind of lazy. I don't really want to redo this whole thing. So if I switch to JavaScript mode, text mode, I could just go ahead and copy this and paste it. You've got to be real careful as you mess it up. You can't get back to block mode. And then go ahead and run it. And I'm going to repeat that. I mean, that wasn't a good choice for the sound. And then if I hit reset, we go back to 0. I'm not really sure why you want to reset it. But maybe you're playing against a friend or something like that. So that is it. That's all you have to do to make a very, very simple cookie clicker app. Just to kind of go back to here, this is JavaScript. So if you've ever wondered what JavaScript looks like or you're working on JavaScript, this is what JavaScript code looks like. Code.org just has these really nice blocks. So it's easier to understand and you can do all the drag and drop type stuff, which is pretty cool. So just to reiterate, in your design, be careful with naming. So the label title should be called label title. The label score should be called label score. The image cookie should be called image cookie. And if it's a button, it should be called button reset if it resets. That way it's very logical what everything does. So when you get to your code, it's very kind of obvious what you're doing. So that is it. Thanks for watching. Hope you learned something. Keep on coding.