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:

• 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

DesignBefore 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.

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.

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 AppStep 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.

Scissors, Rock, Paper

Compare to two values

Display Result

Start App

Computer choiceAIchoice

Your choicechoice

Level 5 ! Games

http://www.kudlian.net

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 ‘Oscars’ Choice

Display Your Choice,Text & Picture

Display Winner and the Result.

Another Go

Level 5 ! Games

http://www.kudlian.net

• 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.

Level 5 ! Games

http://www.kudlian.net

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

Level 5 ! Games

http://www.kudlian.net

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

   

Level 5 ! Games

http://www.kudlian.net

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.

Level 5 ! Games

http://www.kudlian.net

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(){   //Set  the  text  displays  and  graphic  displays  to  be  empty.

       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")                }        

Level 5 ! Games

http://www.kudlian.net

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        }        

Level 5 ! Games

http://www.kudlian.net

else  {                var  AIWon  =  false;     //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);                  }

Level 5 ! Games

http://www.kudlian.net

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 OperatorsComparison 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 Returns

 == equal to x==2 FALSE == equal to

x==6 TRUE

 === exactly equal to (equal value and equal type)

x==="6" FALSE === exactly equal to (equal value and equal type)

x===6 TRUE

!=  not equal x!=2 TRUE

!==  not equal (different value or different type)

x!=="6" TRUE!==  not equal (different value or different type)

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.

Level 5 ! Games

http://www.kudlian.net

Calling a Function with ArgumentsWhen 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 VariablesA 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 ValueIf 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;}

Level 5 ! Games

http://www.kudlian.net

The return value is determined by the result and will either be 0, 1, 2.

if & elseSometimes 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)

return “FF0000”if (currentTime < 15000)

TRUE

TRUE

FALSE (else)

Sets colorForTime value to RED

return “FF9900”return “0000FF”

Sets colorForTime value to YELLOW

Sets colorForTime value to BLUE

FALSE (else)

Level 5 ! Games

http://www.kudlian.net