From GIS CS4
Jump to: navigation, search

Project: Rock-Paper-Scissors Part 2

The Game Tools

We have developed some Objects to lay out a board for the game Rock-Paper-Scissors.

Now we are going to develop some objects to represent the tools of the game, i.e. Rock, Paper and Scissors. (Add these classes below the Board Area Objects, but above the Board Object).

But first include these additional constant definitions above your board layout constants:

//For Khan Academy - comment in the following block
//For HTML Canvas  - comment out the following block
/* KA images support */
var bIsKhanAcademy = true;

var ROCK_IMAGE      = getImage("cute/Rock");
var PAPER_IMAGE     = getImage("cute/PlainBlock");
var SCISSORS_IMAGE  = getImage("cute/Key");

// get random number 1-5 for computer's play
var getComputerPlay = function(zn)
    return ceil(random(0, zn));

// some useful constants
var NO_TOOL_ID = 0;
var TOOL1_ID = 1;
var TOOL2_ID = 2;
var TOOL3_ID = 3;
var NUM_TOOLS = 3;



var YOU_LOSE = -1;
var YOU_TIE = 0;
var YOU_WIN = 1;
  • Define an Object (Class) for Tool:
//Tool Object/////////////
//The Tool object is the prototype for each hand shape.
var Tool = function(zId, zstrName, zImage)
    this.x = 0;
    this.y = 0;
    this.id = zId;
    this.name = zstrName;
    this.image = zImage;
  • Write a method to display the tool image centered on a circular background. The circle will have a background colour and also an outline colour. Use the constants that have been provided above.
Tool.prototype.drawToolAtPos = function(zx, zy, zColour, zOutlineColour) 
    // set the outline weight and colour
    // set the background colour
    // draw the circle
    // display the image on the circular background
  • Define an Object (Class) Rock, derived from your Tool Object.
//Rock Object/////////////
var Rock = function() 
    Tool.call(this, ROCK_TOOL_ID, "Rock", ROCK_IMAGE);

Rock.prototype = Object.create(Tool.prototype);
  • Declare an instance of the Rock Object and display it.
var myRock = new Rock();
myRock.drawToolAtPos(60, 275);
  • What do you notice about the position and size of the rock relative to the circle?
  • Add the following scaling and offset properties into the Tool base class.
    // scaling and offset
    this.width = TOOL_WIDTH;
    this.height = TOOL_HEIGHT;
    this.xOffset = -TOOL_WIDTH/2;
    this.yOffset = -TOOL_HEIGHT/2;
  • Set the values of the scaling and offset properties within the Rock constructor function in order to centre the rock image over the circle.
    this.width = ...;
    this.height = ...;
    this.xOffset = ...;
    this.yOffset = ..;
  • Create similar classes for Paper and Scissors and adjust the scaling and offset values for each tool.

Rock-Paper-Scissors Part 3