Full transcript of “Code.org Tic Tac Toe - Build Your First Game in App Lab Even If You Have Never Coded Before”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 this is code.org and this is APPL and this can look intimidating good thing we're going to make a game together what game are we doing Tic Tac Toe a classic and a great game to well design I've done this with my students T tool so we're going to make something approachable and hopefully have a bit of fun I'm going hit rename Tic Tac Toe super creative with names as always I'm lying and save so we have all this code stuff but we don't need that code stuff obviously I'm using super techical terms right now we don't need to be using methods or uh variables just yet we're going to go into this design mode way up here so click and we need a few things
0:46 now I do want to keep this simple but we're going to need X's and O's I know shocking tic TCT tail how many of you ask well how many spaces are on a Tic Tac Toe board I hope you're yelling at your computer nine because it's nine unless you play really odd Tic Tac to anyways so we're going to need nine images is what we're going to use and let me show you what I mean I'm going to drag one of these out and just kind of plop and I let's see what position we're at 100 I actually know I think I'm going to want it more like 85 is we want a bit of space on the bottom and maybe a bit over I'm not super worried about this some people can get really particular about the spaces in between but you you can figure that part out however you
1:32 like it that's the way you should do it I am going to now click choose right here next to image once I do that we're not going to upload something it's a bit of a headache and we have everything we need under this icon section so now I'm going to click icons and like I said Tic Tac Toe obviously nine spaces we don't want to start with an x and an O right that's what the players are going to put on their board but we need to know them to know they can click I'm going to use this Square as kind of a button to show that's a place they can click you could use any of these shapes honestly but I just kind of liked this one all right there we are now I'm going to go ahead and pick a color as well and I think I'm going to go something sure awesome so that's my first space you can pick any color you want now since this is our
2:17 first space I'm going to go ahead and give it an ID we want to make sure we know what this stuff is when we're coding so I'm just going to say button one right I could call it space one game area one whatever you want but it's button one for me now now that this is set I'm just going to be lazy and hit duplicate plop and look I got it all picked out the icon's already there it's the right color and I'm going to drag this over here all I'll have to do now button two okay and now once again plop and shockingly button and keep in mind if you want them a different size you want larger or smaller pieces is do that this game is totally yours to make right yours
3:05 to create something that you like that you enjoy that your friends will like all right six because we can definitely share this at the end duplicate okay mine look pretty even they might not be perfect but good enough for me the other thing I'm going to add cuz I'm fancy it's just a label plop and label um I'm going to say game title for the ID so we know what it is and chck Tac to okay I actually might go ahead and choose a theme at this point I'm going to get way too involved in this sure Citrus except I want this much
3:54 much much bigger it's the game title beautiful all right maybe give it a little bit of a different color just kind of making this up boom Oh and actually we need one more thing we got to show them or we need to know whose turn it is right what turn are we on so I'm going to go ahead and [Music] do two buttons button button and I'll say on this button X turn button I am always creative with names and the button text I could just
4:39 put an x on actually or we can get creative and we can do down here an image also on our button so I'll hit choose icons and I'm going to pick the icon I just typed in X here that I'm going to actually use on these so I'm going to go ahead and click that okay so X and then maybe I want to change the color and you see that my background there X I'm going to get rid of that I don't need it since I'm going to use an icon perfect yeah let's go ahead and use icons so now I'm going to do instead of X turn button on this guy going to hit I copied it but I could just do o turn button now keep in mind when I'm doing
5:26 caps that means we'll have to use caps in the game as well and I'll walk you through that boom okay and I'm going to do the same thing on this one choose icon and let's see if I like any of these I guess I could say Circle oh I like this you choose whatever ones you want may I don't know maybe you want scissors and I I have no idea but you do you red cool all right this is g to be perfect so now what we're going to do is code and let's start base level here let's not get scary or complicated what do we want to have happen we want our player to click the screen right we want them to be able to click the screen and play tic taac toe X or o so when you
6:12 interact with the screen when I type on my keyboard when you talk to a voice assistant uh when you move your mouse that's called an event right it's something that is taking place that you're causing so I'm going to grab under UI controls on event plop now what does this thing do well code wi it says on the event ID is clicked now we have nothing named ID but if you remember if I head back into design mode and click on any of our squares I name this one button one button nine you can also in code mode as long as you're not running you can hover over and it will show you the ID of all your stuff so I'm going to start with button one so on the event and don't type it in here it's way easier to hit the little triangly thingy and select button one just in case you
6:59 misspell something or typo I do all the time so it's really nice that we can just hit this little arrow all right so on the event that button once's clicked now what do we want to have happen well it's tic-tac-toe so we want it to be an X or an O how can we do that how could we make this be an X or an O I'll give you a hint right now that's going to be changing something right we're going to have to change what though are we going to have to change the input the label change the set the text set the number set the checked wait a minute what about that what about the image right and this is URL but we can use this to change our image when it's clicked so I'm going to
7:45 drag set image out and it has to go into this green mouth thing this function because this is the code that will run if we on the event the button one has clicked so ID button and right now it's the code.org logo by default which is fine let's just test this out I'm going to hit run plop it works we coded high five all right now obviously we don't want it to always be that we actually want it to be I'm going to do choose icon I'm going to look for X take your pick maybe you want a pair of scissors or I don't know the Twitter symbol whatever you want now it should be that I clicked apply bam here's the problem we have two players right now now it's
8:30 just going to be X they have no other option so in order to change that we're going to need a variable a variable is going to allow us to keep track of whether it's X's turn or O's ter so what I'm going to do for that I'm going to save the name of a picture to a variable this sound super complicated I promise you it's not I'm going to click variables way up here let me find it and boom you can also grab let's go ahead and grab VAR St they've set it up for us I'm dropping this online one top of your program is usually where your variables go unless they're inside functions all right and if that scared you don't it's just other code stuff
9:16 line one VAR and let's call this um icon you can name it whatever you want sometimes icon could be reserved so uh I'll name mine icon or no I like icon I'm doing I okay and then what is the String going to be what is this word well it's actually going to be you see this text right here this is what's deciding what our button is right this is what the image is named that's what they're using to change it and you can test this by messing around you'll see other text in here so let me click show text and right here just like I said this text I'm going to highlight it and I'm going to right click and copy
10:01 the reason I did show text is I can highlight right click and copy and then I can highlight hello world on line one hit delete and then in between the quotes in between the quotes right click and do paste on a Mac you might have to hit command C to paste command V or command C to copy command V to paste uh Windows machines command control C control V for Pace anyways make sure you have these quotes guys if you don't have these quotes it's going to break if you miss one letter it breaks so you need these quotes up here for this to happen so now we have something called an icon all right however we no longer need then this down here in quotes we don't need it we're going to use something else something else that now means
10:47 exactly this because we have a variable so I don't need quotes anymore either because icon is equal to this whole thing with quotes so I can delete this chunk right here I will need that comma and I can now write my word my variable icon now let's go back and look run let's see if it works icon boom no problem all right so now how are they going to switch turns well that's where these guys come in so right now it's always going to be equal to X let's actually first though do one more button so I can show you what I mean the nice thing about once we have button one UI on event what button I name mine
11:33 button to button two click yep and what are we going to do oh yeah we need to set the image right what are we setting the image up well not button one anymore let me hover button two is what I Nam mine button two and then this is where we don't want to we want to use our variable so I'm going to try to delete all this it might fight you on the quotes it sometimes does for me so I try to click behind behind them and then I can actually delete all the quotes I'm going to put in my variable name icon now keep in mind if you named your variable unicorn that doesn't make sense but you would just need to write unicorn and unicorn there whatever you named it make sure you use let's try now button two button one and they both work now again here's the problem they're both an
12:19 X Tic Tac Toe involves X's and O's that's where these guys come in so I'm going to go ahead and add on clicks for these as well UI controls just like we've been doing up here so on event and I'm going to pop one and two because we have two options what I'll do now and this I love so on the event that X turn is clicked is what I named mine now when I say named again design mode click on it that's what I did for my ID so on the event that X mode is clicked what do I want to have happen well I want to make sure that the icon is this right so that our variable needs to be equal to that
13:06 icon so I'm going to go ahead and do variable x equals blank except I'm going to do icon equals and then I'm going to be lazy again I'm going to go into show text I'm going to copy this whole big thing with the quotes icon colon slash F fa times and paste cool okay so that's going to do it for our x button Showbox and now what about the O turn button well I'm going to say o turn onclick now I don't really know the name of the o button so I'm going to go down here and
13:52 just see where I have icon going to do and choose where it says set image URL because I can check out what it's actually called icons and I'll do o maybe or Circle I guess oh yeah pick whatever one you want I'm going with this guy all right okay and now I know the name of this one so I'm going to go show text going to highlight all this stuff and copy it then under oh I was early I first need a VAR equals I'm going to type in the word icon and now in this space for me it's line six I'm going to put two quotes and I'm going to paste right and so how I did that is I just did contrl C control V but you want to copy this whatever the
14:39 circle icon maybe yours maybe if you use scissors this will be different but whatever that is and make sure you have the quotes you need to use right there all right now I can get rid of this again and write icon again all right perfect so now Watch What Happens run X but what happens well if I want to do o on click on the event I click the o button my icon is equal to Circle click and now watch boom so now we have options okay I you might get fancy and in fact I think nope I'm good with this okay so let's go ahead now and set up our other buttons hint it's going to be
15:26 pretty easy cuz honestly these are the same so on the event what's the name of this guy button three is clicked what do I want to do same idea I want to set the image URL what's the id button three and then what do I want to set it to remember I need to get rid of all of this so because we have a variable icon well now that's the first three now let's do the next one on event and I'm going to show you a bit of a short short cut here but on event click set the image right to what okay well it's button four and then going to delete all this icon was the name of my
16:13 variable let's go into text mode we have four but we need nine show text now this can get tricky so if you're worried about breaking something you can just do as I was but I'm going to go ahead my first button one is online eight and I'm going to go all the way down to line 19 for me I need to include all this brackety semicolon stuff I do not need my onevent for turn uh XO so once I have all this highlighted line 8 through 19 for me I'm going to click copy and then I'm going to hit enter and I'm going to rightclick and paste now what I'll need to do is I had button four here so now I'm going to change this one to button five and then online one for me at least
16:59 button five because I'm going to need to change it in two spots button six button six button seven button seven button eight button eight and I need one more for button nine copy that again enter right click paste now this only works if you have all of these named correctly so if you do this and you're like Mr Kaiser this doesn't work at all you're going to want to check your IDs so I'm going to hit run and again you can hover over as long as it's not running and check what you named these if you named yours instead of button you said x01 then you have to put that over there what's it run X oh X oh they blocked me X oh oh they blocked
17:46 me I don't know who that is cuz it's just me here cuz I'm lonely that was sad oh just kidding how can I be lonely oh wait I didn't win well you get the point paada we just made tic taac toe okay I hope you have fun with this make it your own if you want to see some other features add on to this maybe uh place to keep score restart the game let me let me know but uh yeah make something awesome
