Full transcript of “How to Code Rock Paper Scissors in App Lab [ Programming for Beginners]”. Click a timestamp to open the video at that moment. Need another video? Use the YouTube transcript generator.
0:00 hey everybody welcome back to my channel in this video i'm going to show you how to make rock paper scissors in app lab on code.org let me play the game for you so you can see how it runs there's a welcome screen the only time time you see the welcome screen is when the game first starts you click a button that brings you to the second screen the game screen here we have a label at the top and three buttons rock paper scissors i'm going to choose rock it goes to the results screen on the results screen the background changes a color depending on the results so yellow means a tie i chose rock the computer chose rock so it's a draw i play again i choose rock again oh this time i chose rock but the computer chose scissors
0:45 the computer by the way is choosing a random number between one and three and that's how it chooses rock paper scissors and so i won this time and the background is green play again i'm gonna choose rock again oh man this time i lost the background is red and the computer chose paper so the computer won and then down here below all of this you can see i'm keeping track of win lose and draw and i've got one in each category i'll play a few more times i lost again i lost again i'll choose scissors oh i lost again finally i win two wins four losses one draw now i'm going to show you how to code this game you're going to
1:31 have to build the display or the design of the app from scratch there's no starter file and let's get started okay we're going to create this app from scratch so in code.org click on the create button up here and choose app lab it'll create a brand new blank project for you we need three screens to go into the design view here let's call the screen one let's rename that welcome and now let's add a new screen call screen two game and one more screen and let's call that screen results okay let's go back to the welcome screen
2:19 i'm gonna speed the video up as i quickly lay out these screen elements okay on the welcome screen we simply have a label that welcomes them to the game and a button with the id play game on the game screen i simply have a label at the top that prompts the user to select rock paper or scissors now i need to add three buttons below that but here's an easy way to do it make one button and get it to look just the way you want it and then duplicate it two times
3:05 let me speed the video up as i do that now watch as i duplicate and duplicate one more time it's really important that you name each of these buttons appropriately i have rock button paper button and scissors button and change the text on them as well now i'm designing the results screen you'll see i have one label already here you chose now this is a static label it will never change but i'm going to copy it or duplicate it here and then below it i'm going to change it to
3:52 rock paper scissors doesn't really matter this particular label is going to change based on the computer code so it's really important that it has a meaningful name i'm going to call it choice label and this is the label this this will represent what the user chose i'm going to duplicate this a couple times over okay now we see that this label is called choice label this one's called computer choice
4:38 label and this one is called winner label these are the three labels that will change based on the code the other three labels won't change throughout the game i also need a button down at the bottom this will be the play again button now we're ready to start coding let's go to code view and back to the welcome screen the first one the first thing we want to do is code this button so it goes to the second screen for that we need an on event let's pull it out here the id is the play button
5:24 i called it the play game button when you click that you want to set the screen to the game screen let's test it we play the game and it goes to this screen perfect that was easy what i'd like to do is keep all my event functions separate from the rest of the game so let's go into the show text area and here above this let's put a few lines a few blank lines and put a comment right here we're going to call this our event functions from here down and then above that area is where we're going to put the rest of our code let's go back to show blocks our comments now show up as gray blocks
6:10 now we have to think about this code a little bit we want our computer to be able to choose rock paper or scissors as we click one of these buttons a computer however can't choose between those three options very easily however a computer can choose numbers randomly very easily so we need to have some variables that will hold numbers those numbers will represent one for rock two for paper and three for scissors let's create those variables now under variables we're going to pull out a variable here at the very top this variable will be called computer choice and we want to give it a random number under math we'll find the random number generator put it here
6:55 we're going to choose a number between 1 and 3. again one is rock two is paper three is scissors we'll need another variable called user choice we don't need to give it a value right away now we need three more on event functions we'll put them here these will handle the three buttons on this page let's set the id to rock button paper button scissors button for each of these we also need a set text block we're going to set the text of the user
7:42 choice label it was called choice label we want to set the text of that label to either rock paper or scissors however we also want to assign a number 1 2 or 3 to our user choice variable that we set up here go to variables make sure you use the block that assigns a value to the variable but doesn't include the keyword var at the beginning
8:33 you can now see we've assigned a value to user choice 1 2 or 3 based on the user's choice rock paper or scissors next we need to create some custom functions up here below our variables let's bring in two function blocks the first one is going to be called display computer choice and the second one calculate winner inside the display computer choice we're going to need a control block which is blue and we need an if else statement we actually need two else statements
9:19 inside this so click on the plus button here we simply want to ask if the computer choice equals 1 then change the label appropriately like this we're using the equality operator that checks if two things are the same on the right we're checking computer choice variable and we're seeing if its value is one if so set the text of our computer choice label to the word rock i'm going to repeat this for the other two
10:05 else clauses and i'm going to speed the video up you'll notice we don't have a condition for the third else clause because if it's not rock or paper it has to be scissors okay let's go back to those on event functions we were working on earlier for the rock button what we want to do is call these functions that we just got done creating so in the rock button let's pull out two of these function call blocks for the first one we're going to call calculate winner and then the second one and in the
10:50 second one called display computer choice we're now going to repeat that for the other two on event buttons i'm going to speed up the video and finally in each of these on event functions we need to set the screen to the results screen at this point we should be able to test the game and see some of the functionality it starts on the welcome screen i hit
11:36 play game i choose rock and it brings me to the third screen what i'm seeing here is that these labels aren't quite big enough to hold the results but it shows that i chose rock and the computer chose paper now it's not calculating the winner properly yet because i haven't done that part of the game i'm now in design view and back on the results screen let's take these different labels and just make them a little bit wider and maybe center the values there in the center and that way no matter what word is displayed there it'll always be big enough let's go ahead and test this game one more time hit run play game i'll choose paper the computer chose paper and again the
12:22 play button doesn't work play again button doesn't work but i can reset run play the game this time i'll choose rock the computer chose scissors if you're wondering what if if the computer choice is working properly one thing you can do is go ahead and and output the computer choice to the console here's how click on the show text button here go into code view here and right below the computer choice variable on line one write console.log you'll see the option there and in parentheses put the variable that you want to output computer choice and what this will do is then in the console down below it's called the
13:08 debug console it will display whatever the choice the random number choice the computer made let's go back to show blocks and now reset it and test it now we can see that the computer chose to and if i choose also choose two paper it should say i chose paper and the computer chose paper reset run play game this time i choose scissors looks like the computer chose 2 again which is paper and this way with the number down here you can see what the computer is choosing and see if it's correct in what's displayed on the results screen okay now we need to go and finish the
13:56 calculate winner function this is where all the logic of the program is written okay in the calculate winner function we need first a control a control statement and if else statement we're going to ask if the user choice and the computer choice are the same so we need a equality statement a quality operator so if the user choice and the computer choice are the same that means we have a draw we need to set the text of the winner label to draw and another nice little feature is we we can set the property of the results screen
14:45 for its background color to be yellow now the else statement will handle three other possible options and so we're going to take a another if statement this is a nested if statement and put it inside the else clause the first choice is if it's a draw if it's not a draw there are six other possible choices so we need one if statement and five else clauses let's click the plus down here oops one too many let's get rid of one so one if statement and one two three four five else clauses here we're going to use what's called a
15:30 boolean operator it's the double ampersand what this allows you to do is check two conditions at once for both of them on both sides we're going to check if two things are equal we're going to ask if the user choice equals 1 and the computer choice equals 3. if this is true that means the user chose paper and the computer chose scissors so this means the user wins we'll set the text of the winner label to you meaning the user
16:16 and the id of the results screen its background color to green remember green is u1 red is you lost and yellow is draw now we need to repeat this kind of thing for every other possible combination so we'll deal with the user choice being one first then two then three i'm going to speed up the video a bit
17:22 now you're going to have to watch your spelling really carefully any misspelled words will mess it up and you need to make sure that you're checking every possible option i suggest you use user choice one and then do two for the user choice two and then do two for user choice three and then make sure you're comparing it against the other two options remember the first else of the first if statement up above handles it if they're the same so none of these numbers should be the same okay now you need to go ahead and put the set text and set property code in each of these other five else if blocks however as you can tell it takes a while to do that you might want to go into the show text
18:10 and simply copy these ctrl c will copy and then ctrl v will paste it's a lot faster that way show blocks again now you can go in and just simply edit the values in here okay if you did this correctly there should be three times that you win and three times the computer wins out of these six choices so i've got you and computer you and computer u and computer let's test the game and see if it works play the game i'm going to choose rock the computer chose rock as well we can see down here the
18:56 number one represents the rock and so it's a draw and the background is yellow i'm going to play again oops play again button doesn't work yet i'm going to reset run play the game i choose scissors the computer chose paper so i win and the background is green you get the idea you can have to check your code to make sure it works properly and the color is set correctly okay so the last thing we need to do is code the play again button from the results screen go to the ui controls and pull out one more on event function put it down here at the bottom the id that we want to work with is the play
19:41 again button and we want to code its click event we want to take out another variable block we want to set that computer choice once again to a random number that random number needs to be between one and three and then we need to set the screen under ui controls to go back to the game screen and this will by creating a new random number allow the user then to choose one of the buttons and we're off to playing the game again let's test this one more time i choose paper computer chose scissors
20:28 i lose the computer as the winner play again i choose rock we both chose rock it's a draw the colors are correct i choose paper again it's a draw again i choose rock the computer joe scissors i win this is awesome the colors look great it's all working now if you remember from the original game i showed you there was also a scoreboard down at the bottom that was keeping track of wins loses and draws that could be an extra challenge for you if you'd like to figure out how to do that you would need to create three new variables one for win one for lose one for draw create those at the top and then every time there's a win a lose or a draw you would add one to that variable
21:14 then you'd also have to have three labels down here at least three and you'd have to display those uh variables the the current the current values of those variables down here in the um in the labels so i'm sure you can figure that out it's a nice challenge i'd like you to go ahead and give that a try thanks for watching i hope you enjoyed this and it was helpful and i'll see you next time
