Level 5 !
Games
Scissors, Paper, Rock
“ Design and create a Scissors, Paper, Rock App”
In this session we are going to recreate the basic Scissors, Paper, Rock Game. The session
should take about 60 minutes
You will need to create or collect the following resource:
Scissors, Rock, Paper
• A button icon for Scissors, Paper and Rock.
We have supplied these to download if you cannot create them yourself. The folder contains six
button graphics, two for each item, Oscar and a ‘try again button.
!
http://www.kudlian.net/support/appfurnace/spr.zip
Design
Start App
Before starting to create and code your game it is good
practice to design it to begin with. This is easily done with
pencil and paper. Draw out where you want graphics to
be and if you have more than one screen, then how they
link together.
Computer choice
AIchoice
Your choice
choice
Compare to two values
You can also include what you want to happen in the App.
It’s a bit like creating a story board and will save you time
later. The more you plan for at this stage the easier it will
be to implement and the less chance of finding major
issues later on.
Display Result
Design is very important with this App as you need to be clear what are the outcomes to determine
who is the winner.
Creating Your App
Step 1
• Log into your AppFurnace account and start a new App.
We would recommend phone sized as you can generally scale it up if installed to a tablet device.
Step 2
The resources folder you downloaded contains picture files that can be used in your App. All the
files need to go into the Files folder of your App.
• Upload the resources ready to use, the pictures, to your AppFurnace Files folder.
http://www.kudlian.net
Level 5 !
Games
To do this;
• Click the Files button in the menu at the top of the Browser window to open the Files window.
To upload your files;
• Select the Default folder.
• Click the Upload button to open
a filer window.
• Navigate to the resources you
wish to upload, select them all
and click Choose button.
• The files will all be uploaded to the folder
The Code
We have included a full breakdown of the code at the end of this help sheet.
The code can be downloaded from our website enabling you to copy and paste it into your Apps
code window if you wish. This code also contains the full annotations.
Making it Work
The next step is to link all the different parts of the code up to your layout. This is where good
planning and design are essential. Our basic design is shown below. It is worth referring to the
code when adding functions and links so that you can understand what is happening.
Buttons to make
your choice
Display Your Choice,
Text & Picture
Display ‘Oscars’
Choice
Display Winner and
the Result.
Another Go
http://www.kudlian.net
Level 5 !
Games
• Save your Work
Next we will create the layout. Some of the widgets used are
transparent. Please refer to the images opposite showing where all
the widgets are located. They have a yellow highlight in the first
image. The steps below refer to different areas of the screen by their
label references i.e. You Chose or Winner.
• Drag and drop a Label widget to the top of the screen, this is your
title. You can enter text and change the colour of it in the Properties
panel.
• Drag and drop a second Label widget just below the title, This has
a transparent background and contains the text ‘Choose’.
• Drag and drop three ImageButton widgets to the top of the screen,
these will be ‘tapped buttons’ to allow you to make your choice.
Their images can be set to scissors’, ‘paper’ and ‘rock’ respectively.
You can also set their ‘Tapped image’ to ‘scissors2’, ‘paper2’ and
‘rock2’. These images were supplied in the downloaded resources.
• You Chose - consists of two Label widgets, and an Image widget.
• Oscar Chose - consists of two Image widgets and two Label
widgets. One of the Image widgets contains a picture of Oscar, this
was supplied in the download folder. You could use any image.
• Winner - two Label widgets, one containing the word Winner, the
other will display the winner.
• At the bottom, Try Again is a Label widget and next to it an
ImageButton widget.
http://www.kudlian.net
Level 5 !
Games
Linking the Widgets
The buttons each have an image.
• Click the widget
• From the drop down menu choose your picture,
eg scissors.
• Set the Tapped image to be scissors2.
• Select the code tab.
• Enter the name of the function for this button,
e.g. hitscissors
• Repeat for the other two buttons adding the
correct images and the code hitpaper and
hitrock.
• Repeat this for the other two buttons
You Chose
This area contains three widgets, one is a Label widget containing the text You Chose, below an
Image widget, and below that, another Label widget. All have been set to transparent
backgrounds. These will display the choice you make.
Label Widget has text displaying, You Chose.
• Select the Label and in the Properties panel enter the text You
Chose.
Image widget - this will need to be linked to the code to display the choice
you make as a graphic.
• Select the Image widget
• Select the code tab in the Properties panel and enter in the Code Name ui.yourselect
Label Widget - This will display your choice as text.
• Select the Label widget
• Select the Code tab in the properties panel and enter in Code Name ui.lblyourChoice
http://www.kudlian.net
Level 5 !
Games
Oscar Chose
This screen area contains three widgets, two Image widgets and a
Text widget.
The Label Widget has text displaying, Oscar Chose.
• Select the Label and in the Properties panel enter the text
You Chose.
The first Image widget just contains a picture of Oscar.
The second Image widget is positioned to the right of the first and will display the ‘Oscars’ choice,
select the code tab for this widget and enter in the Code Name, ui.oscarsselect. Remember to set
this widget to have a transparent background.
Label Widget - This is positioned just below the second Image widget and will display ‘Oscars’
choice as text. Select the widget and in the code tab enter in the Code name,
ui.lblOpponentsChoice.
Winner
This area of the screen has two label widgets the first displays the
text Winner, and the second details of who won and what the
choices were and the reasoning.
Both have a transparent background.
The second label is linked to the code in the same way as before.
In the Code Name for the second label widget enter, ui.lblOutcome
Try Again
The final two widgets are displayed only after the
choices have been made and offer the player another
go.
One is an Image Button, that uses the spricon images
supplied, the other a Label widget.
• The Label widget contains the text Try Again and the
Code Name ui.lbltryagain
• The Image Button has an image, in this case the
Apps icon, and is included in the downloaded
resources. You also need to enter the following into
the Code properties for this button;
• A Tapped function startset
• Code name ui.anothergo
http://www.kudlian.net
Level 5 !
Games
Make sure that you regularly save you work.
Note: Throughout this document the spelling of color uses the American English variant as this is
the spelling used in coding languages.
In our example App, that you can download using the QR code and your AppFurnace Player, we
have added a title page.
http://www.kudlian.net
Level 5 !
Games
The Code
// 0: Rock
// 1: Paper
// 2: Scissors
// Computer generates a random choice between 0 and 3. Returns the largest integer less than or equal to a number.
function startset(){ empty.
//Set the text displays and graphic displays to be ui.lbltryagain.hidden(true);
ui.anothergo.hidden(true); ui.lblOutcome.text("");
ui.oscarsselect.backgroundImage("");
ui.lblOpponentsChoice.text("");
ui.yourselect.backgroundImage("");
ui.lblyourChoice.text("");
}
function aiChoice() //The computers choice
{
var choice = Math.floor(Math.random() * 3); //Math.random() -­‐ gives you a random decimal number between 0 and 1, including 0, but not including 1.e.g. 0.38548569372. //Math.random() * num -­‐ gives you a random decimal number between 0 and number in this case 3, including 0, but not including num. So, if num was 3, it might give you 2.8548569372.
//Math.floor(Math.random() * num)) gives you a random integer number between 0 and num, including 0, but not including num. So, it might give you 3.
//Math.floor() truncates the decimal number to only the integer portion. if (choice === 0) { //If choice is exactly equal to 0
ui.lblOpponentsChoice.text("Rock"); //Computer choice is rock displayed in the text field on screen ui.oscarsselect.backgroundImage("rock.png"); //Display graphic
}
else if (choice === 1) { //If choice is exactly equal to 1
ui.lblOpponentsChoice.text("Paper"); //Computer choice is paper displayed in the text field on screen
ui.oscarsselect.backgroundImage("paper.png") }
http://www.kudlian.net
Level 5 !
Games
else {
ui.lblOpponentsChoice.text("Scissors"); //If none of the above then computer choice is scissors & displayed in the text field on screen.
ui.oscarsselect.backgroundImage("scissors.png") }
return choice; //The value of var = choice, is returned as either 0, 1 or 2
}
//Below are the functions used for you making your choice.
function hitRock() //function is linked to your choice button rock {
buttonpress(0); //pressing button returns the value of 0
ui.yourselect.backgroundImage("rock.png");
ui.lblyourChoice.text("Rock");
}
function hitPaper() //function is linked to your choice button paper
ui.yourselect.backgroundImage("paper.png");
ui.lblyourChoice.text("Paper");
{
buttonpress(1); //pressing button returns the value of 1
}
function hitScissors() //function is linked to your choice button scissors
{
buttonpress(2); //pressing button returns the value of 2
ui.yourselect.backgroundImage("scissors.png");
ui.lblyourChoice.text("Scissors");
}
//We need to compare the values of your choice, buttonpress() and the ‘computers’ choice, aiChoice()
function buttonpress(choice) //Call a function with an argument value
{
var AIChoice = aiChoice(); //Sets a new variable value to be equal to the value returned by the function aiChoice. This is a local function the variable and is only used within this function.
//We now need to compare the results to determine a winner, this part has to be carefully planned so tht you get all the options.
if (choice == AIChoice) { ui.lblOutcome.text("Draw"); //Display Draw
}
http://www.kudlian.net
Level 5 !
else {
var AIWon = false; Games
//Variable set to either true or false
if ((choice === 0 && AIChoice === 1) ||
(choice === 1 && AIChoice === 2) ||
(choice === 2 && AIChoice === 0)){
AIWon = true;
}
var winnerText;
if (AIWon) {
winnerText = "Oscar wins: ";
}
else {
winnerText = "You win: ";
}
// || is the OR operator in Javascript. If the first operand is true then the second in not even evaluated, so be careful.
if ((AIChoice === 0 || choice === 0) && (AIChoice === 1 || choice === 1)) {
ui.lblOutcome.text(winnerText + "Paper covers rock");
}
else if ((AIChoice === 1 || choice === 1) && (AIChoice === 2 || choice === 2)) {
ui.lblOutcome.text(winnerText + "Scissors cuts paper");
}
else if ((AIChoice === 2 || choice === 2) && (AIChoice === 0 || choice === 0)) {
ui.lblOutcome.text(winnerText + "Rock breaks scissors");
}
}
//Acvtivates the try again button.
ui.lbltryagain.hidden(false);
ui.anothergo.hidden(false); }
http://www.kudlian.net
Level 5 !
Games
Appendix
Can’t remember your greater than from less than?
< Less than looks like a slanted "L"
> Greater than is the opposite.
Remember L for less than. Now you'll never forget.
Comparison Operators
Comparison operators are used in logical statements to determine equality or difference between
variables or values.
Lets look at an example where we know that the value oft x=6, the table below explains the
comparison operators:
Operator
==
===
Description
Compare Values
equal to
exactly equal to (equal
value and equal type)
!=
not equal
!==
not equal (different value
or different type)
Returns
x==2
FALSE
x==6
TRUE
x==="6"
FALSE
x===6
TRUE
x!=2
TRUE
x!=="6"
TRUE
x!==6
FALSE
>
greater than
x>2
TRUE
<
less than
x<2
FALSE
>=
greater than or equal to
x>=2
TRUE
<=
less than or equal to
x<=2
FALSE
&& (AND)
&& performs the Boolean AND operation on the two values. Generally, it will only return
true if the values on both sides are true. If any value is false, it will return false.
|| (OR)
|| is very similar to && except it preforms the Boolean OR operation on the two values.
Generally, it will only return false if both sides are false. If any value is true, then it will
return true.
http://www.kudlian.net
Level 5 !
Games
Calling a Function with Arguments
When you call a function, you can pass along some values to it, these values are called arguments
or parameters.
These arguments can be used inside the function.
You can send as many arguments as you like, separated by commas (,)
myFunction(argument1,argument2)
//Declare the argument, as variables, when you declare the function:
function myFunction(var1,var2)
{
some code
}
The variables and the arguments must be in the expected order. The first variable is given the
value of the first passed argument etc.
Local JavaScript Variables
A variable declared (using var) within a JavaScript function becomes LOCAL and can only be
accessed from within that function.
You can have local variables with the same name in different functions, because local variables are
only recognized by the function in which they are declared.
Local variables are deleted as soon as the function is completed.
Functions With a Return Value
If you want your function to return a value to where the call was made then this is possible by using
the return statement.
When using the return statement, the function will stop executing, and return the specified value.
In our example we want to return the value chosen by the computer.
function aiChoice()
{
var choice = Math.floor(Math.random() * 3); if (choice === 0) { ui.lblOpponentsChoice.text("Rock"); }
else if (choice === 1) { ui.lblOpponentsChoice.text("Paper"); }
else {
ui.lblOpponentsChoice.text("Scissors"); computer choice is scissors
}
return choice;
}
http://www.kudlian.net
Level 5 !
Games
The return value is determined by the result and will either be 0, 1, 2.
if & else
Sometimes when you write code, you want to perform different actions for different decisions. You
can use conditional statements in your code to do this. In JavaScript the following conditional
statements can be used;
!
if statement - use this statement to execute some code only if a specified condition is true
!
!
if...else statement - use this statement to execute some code if the condition is true and
another code if the condition is false
!
!
if...else if....else statement - use this statement to select one of many blocks of code to be
executed
if /else
if (currentTime < 6000)
FALSE (else)
TRUE
if (currentTime < 15000)
return “FF0000”
Sets colorForTime value to RED
TRUE
return “FF9900”
Sets colorForTime value to
YELLOW
http://www.kudlian.net
FALSE (else)
return “0000FF”
Sets colorForTime value to BLUE