Minigames are fun, and there are a lot of them to choose from when you’re bored. The classic game ROCK PAPER SCISSORS has always been a favorite, but you can only play it when there is someone else around. So, I’ve made a tech version of it on Thunkable, with unlimited points. This is a small tutorial on making one yourself. I haven’t focused on the UI, and this is very basic, just to help you get started with your game. In this game, you get to play against the computer. Since this is a game base on luck, there is no difficulty level, or anything as such.
Let’s get started.
UI and DESIGN
The UI is very basic, and it’s easy.
This is what it looks like, on the web.
Here’s another screen, in case the user wants to play a maximum number of points.
The CONGRATULATIONS screen, in case the player wins the match:
and a Bad Job screen, if the player loses the match:
CODE
The code is actually quite easy, but it takes some time because of all the 9 different combinations in ROCK PAPER SCISSORS.
CODE FOR PLAYING SCREEN
First, we’ve initialized 2 variables- Player Images and Computer Images- to lists, containing the file name of my images for rock, paper, and scissors separately. Make sure to upload your image files before doing this step!
scssorsiag.png is just a computer type of scissors image.png.
I’m sure you must have anticipated this next step. Every game needs a score counter!
Here, I’m initializing two variables to 0. One holds the player’s score, and the other holds the computer’s score.
These are two variables for holding what the player and the computer play(Rock, Paper, or Scissors). We are not keeping ‘Rock’ or ‘Paper’, but rather the image file of the picture the user clicked. We’ll come to that later.
And the last:
The MAX POINTS variable holds the number of points the player wants to play. Remember the screen which allows the user to choose?
This variable is initialized to infinity, but is changed when the user adds a maximum number of points.
THE CODE FOR CHOOSING MAXIMUM POINTS
This is quite simple.
We are adding an event to trigger the code- When button3 click. Then, we are setting our MAX POINTS variable to whatever the user has entered(Text_Input1’s text) and multiplying it by 1.
Why are we multiplying it by 1? We are doing this so that the user’s input gets converted into a number instead of staying text. Since we’re going to be doing a lot of comparisons in the code for the Playing Screen, we need the maximum number of points to be a number, and not text.
Then, we are navigating to the Play Screen so the actual game can begin.
BACK TO THE PLAYING SCREEN
We had 5 total images on our playing screen:
- The image of a rock(ROCK)
- The image of a sheet of paper(PAPER)
- The image of scissors(SCISSORS)
- An image(I’ve named it Computer Image) for displaying what the Computer plays
- And lastly, the image I’ve called Player Image for showing what the player has chosen.
In this piece of code, we’re using the ANY COMPONENT blocks to trigger some code inside when any image on the screen is clicked. Then we are making sure that those images are not Player Image or Computer Image. That means that we want the code to execute only when the user clicks on an object image(Rock Image, Paper image, or Scissors image). So, we use
If component is not equal to Computer image
If component is not equal to Player image.
If both the conditions are met, we set the variable ‘player plays’ to the picture from the image which was clicked. We can get that 
block from the Any Component drawer, and the green ‘component’ block inside comes with the ‘when Any Image click’ block.
Now, we set the ‘computer plays’ variable to a random item of the list ‘computer images’, which we had initialized earlier.
Once you’re done with that, set Player image’s picture to the variable player plays, and the Computer image’s picture to ‘computer plays’.
Next, we are calling a function Check which we will come to later.
Lastly(in this event), we are checking whether either the Computer’s score or the Player’s score is equal to the maximum number of points that the player chose. If the Player’s score meets the requirement, we are navigating to the CONGRATULATIONS screen to tell the player that they won. If the Computer’s score meets the requirement, we are navigating to the BAD JOB screen to tell the player that they lost.
THE CHECK FUNCTION
This is the highlight of the game, and without this, the game would be useless. Let’s take a look:
There are nine possible combinations in Rock Paper Scissors-
Here, we are checking the combinations of the player and the computer, using the and blocks, and the equal blocks both from the logic section.
Now, we want to make the game a little more user-friendly, so, if the player got a point, we want to make the text green. If the player lost a point, the text should turn red, and if the points are equal(tie), the text should turn yellow, a neutral color.
Likewise with the total scores: if the computer is leading, the computer’s score should be displayed in green and the player’s score in red, otherwise, if the player is leading, the computer should have red score-display, and the player should have green. If they are both equal, we’ll have the same neutral yellow.
Here, we’re using the logic blocks to compare the scores and set the colors accordingly.
And that’s it!
Do share your versions of Rock Paper Scissors here- I’d love to see them.
Thanks!
