RPS3

From GIS CS4
Jump to: navigation, search

Display Tools in Position

Include a property that is a table that specifies the x, x positions of the 3 game tools:

  this.toolPos = [
    {x: 60,       y: CANVAS_HEIGHT - TOOL_HEIGHT*3/4 - 10},   // rock
    {x: ...,      y: ...},   // paper
    {x: ...,      y: ...}   // scissors
    ]; 

Add properties to the Board class:

  • to store an array of Tools objects
  • to store the number of tools
  • to store the player and opponent scores
    this.arrayTools = [];
    this.iNumTools = 0;
    this.iYourScore = 0;
    this.iOpponentScore = 0;

Add a method to the Tool class that initialises the position of the tool and displays it:

Tool.prototype.setToolAtPos = function(zx, zy) 
{
    this.x = zx;
    this.y = zy;
    
    this.drawToolAtPos(zx, zy, TOOL_BACKGROUND_COLOUR, TOOL_OUTLINE_COLOUR);
};

Add a method to the Board class that will add a new Tool to the game.

Board.prototype.addTool = function(zTool)
{
    // add tool to board
    this.arrayTools.push(zTool);
    this.iNumTools++;
    
    // set position of tool and display in tools area
    zTool.setToolAtPos(this.toolPos[zTool.id-1].x, this.toolPos[zTool.id-1].y);
};

Add code in your initBoard method to add the 3 game tools:

    //Add Tools and display tools
    this.addTool(new Rock());
    this.addTool(new Paper());
    this.addTool(new Scissors());

Detect Tool Hit

Add a method on the Tool object to detect whether a Tool has been hit:

Tool.prototype.getToolHit = function(zMouseX, zMouseY) 
{
    /* Hint: use the x,y position of the tool, TOOL_WIDTH and TOOL_HEIGHT,  
       to detect whether the mouse position lies within the bounding rectangle of the tool. 
       If the tool is hit, the return the tool id, else return NO_TOOL_ID.
    */
    // ...
};

Add a method to the Board Object to loop through each tool and detect which tool (if any) has been hit.

Board.prototype.getToolHit = function(zMouseX, zMouseY) 
{
    // check each tool for a hit 
    for (var i=0; i<this.arrayTools.length; i++)
    {
        var iToolId = // call getToolHit method on each Tool
        if (iToolId !== NO_TOOL_ID) {
            return iToolId;
        }
    }
    return NO_TOOL_ID; 
};

Add another method to the Board object to get the Tool with a given id:

Board.prototype.getToolFromId = function(zToolId) 
{
    // for each Tool in the Tools array:
    for (var i=0; i<this.arrayTools.length; i++)
    {
        // test if the id of that Tool is the one we are looking for.
        if (...) {
            // if it is then return the tool
            ...
        }
    }
    // if the Tool isn't found then default to return the first Tool
    ...
};

Relationship Class

We are going to create a class that defines the relationship between the different tools/tokens in the game:

var Relationship = function()
{
    this.data = [
      // relationships for Rock
      [{result: YOU_TIE, msg: ""},
       {result: YOU_LOSE, msg: "Rock is wrapped by Paper!"},
       {result: YOU_WIN, msg: "Rock blunts Scissors!"}
     ],

      // relationships for Paper
      [...],

      // relationships for Scissors
      [...]
    ]; 
};

var relationships = new Relationship();

Add a method to the Tool object to check that a given Tool id is valid i.e. in range.

Tool.prototype.idInRange = function(zId) 
{
    return ((zId > 0) && (zId <= NUM_TOOLS));
};

Add a method to the Tool object to find the result of play with the given Tool id:

Tool.prototype.play = function(zOpponentToolId) 
{
    // check that this Tool's id is in range - if not then return YOU_TIE
    ...
    // check that this zOpponentToolId is in range - if not then return YOU_TIE
    ...
    
    // return the result of play using the Relationship table
    ...
};

Add a method to the Tool class to get the result message from the Relationship table

Tool.prototype.getResultStr = function(zOpponentToolId) 
{
    // check that this Tool's id is in range - if not then return YOU_TIE
    ...
    // check that this zOpponentToolId is in range - if not then return YOU_TIE
    ...
    
    // return the result message using the Relationship table
    ...
};

Play The Game

Add a method to the board object to get the computer's Tool selection:

Board.prototype.getComputerPlay = function() 
{
    var iToolNum = getComputerPlay(this.iNumTools);
    return this.getToolFromId(iToolNum);
};

Write a method to take the player's Tool selection and play the game:

Board.prototype.playTool = function(zPlayerTool) 
{
    // play game and get result
    var opponentTool = this.getComputerPlay();
    var iResult = zPlayerTool.play(opponentTool.id);

    // get background colours and message for result, update scores
    var strResult = TIED_TEXT;
    var playerBackgroundColor = TIE_BACKGROUND_COLOUR;
    var opponentBackgroundColor = TIE_BACKGROUND_COLOUR;
    
    if (iResult === YOU_WIN) {
        playerBackgroundColor = WIN_BACKGROUND_COLOUR;
        opponentBackgroundColor = LOSE_BACKGROUND_COLOUR;
        strResult = WINNER_TEXT;
        this.iYourScore ++;
    }
    else if (iResult === YOU_LOSE) {
        // set background colours and scores ...
    }
    
    // draw player and opponent tools in play area
    this.playArea.display();
    zPlayerTool.drawToolAtPos(PLAYERTOOL_X, PLAYERTOOL_Y, 
                            playerBackgroundColor, GAMETOOL_OUTLINE_COLOUR);

    opponentTool.drawToolAtPos(OPPONENTTOOL_X, OPPONENTTOOL_Y, 
                            opponentBackgroundColor, GAMETOOL_OUTLINE_COLOUR);
    
    // display result message
    var  strVerb = zPlayerTool.getResultStr(opponentTool.id);
    this.resultsArea.displayResults(playerBackgroundColor, 
                                        (strResult + " " + strVerb));

    this.drawScores();
};

Add a method to the board object to get the computer's Tool selection:

Board.prototype.getComputerPlay = function() 
{
    var iToolNum = getComputerPlay(this.iNumTools);
    return this.getToolFromId(iToolNum);
};
Board.prototype.play = function(zMouseX, zMouseY) 
{
    // get player tool
    var iToolId = this.getToolHit(zMouseX, zMouseY); 

    if(iToolId !== NO_TOOL_ID) {
        this.playTool(this.getToolFromId(iToolId));
    }
};

Finally...

////////////////////////////////////////////////////////
//This is the program...

//Create a game board and display it
var myBoard = new Board();

//When mouse is pressed..
var mousePressed = function() 
{
    myBoard.play(mouseX, mouseY);
};

Rock-Paper-Scissors Part 4