RPS

From GIS CS4
Jump to: navigation, search

Contents

Project: Rock-Paper-Scissors

The Game Board

We are going to use the RectArea and TextArea objects that we defined in our Object Exercises to lay out a board for the game Rock-Paper-Scissors.

RPS Board

The areas of the board are:

  • Top row: Player/Opponent Scores (blue text on pale green background).
  • Top row: Player/Opponent Names(red text on white background).
  • 2nd row: Result message (e.g. "You win: Rock wraps Paper" (black text on green/win, red/lose, grey/tie).
  • 3rd row: Play area (will display the player and opponent tools).
  • Bottom row: Tools area (will display the tools to select from i.e. Rock, Paper and Scissors).

Code Template

Code Template

https://www.khanacademy.org/cs/object-oriented-rock-paper-scissors-template/5471744061079552

Game Board Definitions

Here are some constant definitions that you can use to define your board layout objects:

/////////////////////////////////////
// board layout
var CANVAS_WIDTH        = 400;   // x=0 (right hand side)
var CANVAS_HEIGHT       = 400;   // y=0 (top)

// scores and players at top
var SCOREAREA_WIDTH     = 60;
var SCOREAREA_HEIGHT    = 25;
var SCOREAREA_Y         = 0; 

//results below score area
var RESULTAREA_HEIGHT   = 25;
var RESULTAREA_Y        = SCOREAREA_Y + SCOREAREA_HEIGHT;

//play area below results
var PLAYAREA_Y          = SCOREAREA_HEIGHT + RESULTAREA_HEIGHT; 
var PLAYAREA_HEIGHT     = 175;   //***(175)Vary proportion of player to tool area here...

//tools at bottom of board below play area
var TOOL_HEIGHT         = 100;
var TOOL_WIDTH          = TOOL_HEIGHT;
var TOOLAREA_Y          = PLAYAREA_Y + PLAYAREA_HEIGHT;

/////////////////////////////////////
//position of game tools
var PLAYERTOOL_X        = CANVAS_WIDTH/4 + 30;
var OPPONENTTOOL_X      = CANVAS_WIDTH*3/4 - 30;
var PLAYERTOOL_Y        = PLAYAREA_Y + PLAYAREA_HEIGHT/2;
var OPPONENTTOOL_Y      = PLAYERTOOL_Y;
                            
// colours
var SCORE_BACKGROUND_COLOUR     = color(147, 230, 155);
var SCORE_TEXT_COLOUR           = color(0, 0, 255);
var PLAYER_BACKGROUND_COLOUR    = color(240, 240, 245);
var PLAYER_TEXT_COLOUR          = color(237, 64, 52);
var WIN_BACKGROUND_COLOUR       = color(170, 199, 55);
var LOSE_BACKGROUND_COLOUR      = color(189, 47, 47);
var TIE_BACKGROUND_COLOUR       = color(200, 200, 200);
var RESULT_TEXT_COLOUR          = color(245, 237, 245);
var PLAYAREA_BACKGROUND_COLOUR  = color(245, 219, 90);
var TOOLAREA_BACKGROUND_COLOUR  = color(239, 247, 134);
var TOOL_BACKGROUND_COLOUR      = color(52, 166, 207);
var PLAYERTOOL_BACKGROUND_COLOUR = color(52, 207, 181);
var OPPONENTTOOL_BACKGROUND_COLOUR  = color(207, 138, 54);
var GAMETOOL_OUTLINE_COLOUR     = color(54, 64, 201);
var TOOL_OUTLINE_COLOUR         = color(54, 64, 201);
var TOOL_OUTLINE_WEIGHT         = 5;
var WELCOME_TEXT_COLOUR         = color(63, 18, 148);

// text layout
var TEXT_SIZE                   = 20;
var SCORE_TEXT_SIZE             = TEXT_SIZE;
var PLAYER_TEXT_SIZE            = TEXT_SIZE;
var RESULT_TEXT_SIZE            = TEXT_SIZE;
var RESULT_TEXT_SIZE            = TEXT_SIZE;
var TEXT_YOFFSET                = 20;
var SCORE_TEXT_XOFFSET          = 4;
var PLAYER_TEXT_XOFFSET         = 70;
var RESULT_TEXT_XOFFSET         = 5;

// Strings
var WINNER_TEXT                 = "You Win!";
var LOSER_TEXT                  = "You Lose!";
var TIED_TEXT                   = "You Tied!";
  • Include the above constants in your program ( at the top).

We are going to define Classes to handle each area of the board.

Game Board RectArea Classes

Define Classes for PlayArea and ToolsArea based on RectArea using the constants to initialise the properties.

Here is some example code for PlayArea:

//////////////////////////
//PlayArea Object/////////////
var PlayArea = function() 
{
    // initialise rect properties
    RectArea.call(this, 0, PLAYAREA_Y, 
                        CANVAS_WIDTH, PLAYAREA_HEIGHT, 
                        PLAYAREA_BACKGROUND_COLOUR);
};

PlayArea.prototype = Object.create(RectArea.prototype);
  • Define a similar class for ToolsArea.
  • Declare an instance of each area and display.
    playArea = new PlayArea();
    playArea .displayRect();
    // ... and tools area ...

Game Board TextArea Classes

Define Classes for ScoreTextArea, PlayerNameTextArea and ResultsTextArea based on TextArea using the constants to initialise the properties.

Here is some example code for ScoreTextArea:

//////////////////////////
//ScoreTextArea Object/////////////
var ScoreTextArea = function() 
{
    // initialise rect and text properties
    TextArea.call(this, 
            0, 0, 
            SCOREAREA_WIDTH, SCOREAREA_HEIGHT, 
            SCORE_BACKGROUND_COLOUR,
            
            SCORE_TEXT_XOFFSET, 0, "", 
            SCORE_TEXT_COLOUR, SCORE_TEXT_SIZE);
};

ScoreTextArea.prototype = Object.create(TextArea.prototype);
  • Add a method to display a score value.
ScoreTextArea.prototype.displayScore = function(zbYou, ziScore) 
{
    // set x position based on which player (zbYou=true(you/left), false(opp/right)
    // ...
    
    // display the score text (call displayText method of base/parent class)
};
  • Declare an instance of each area and display.
    var iYourScore = 2;
    var iOpponentScore = 3;
    var scoresTextArea = new ScoreTextArea();
    scoresTextArea.displayScore(true, iYourScore);
    scoresTextArea.displayScore(false, iOpponentScore);
  • Define a similar class for PlayerNameTextArea
  • Add a method to display the player names ("You" and "Opponent").
PlayerNameTextArea.prototype.displayPlayerName = function(zbYou) 
{
    // set x position based on which player (zbYou=true(you/left), false(opp/right)
    // display player name (call displayText method of base/parent class)
};
  • Declare an instance of PlayerNameTextArea and display.
    var playersNameTextArea = new PlayerNameTextArea();
    playersNameTextArea.displayPlayerName(true);
    playersNameTextArea.displayPlayerName(false);
  • Define a similar class for ResultsTextArea
  • Add a method to display the results message on the given background colour.
ResultsTextArea.prototype.displayResults = function(zColour, zStr) 
{
    // set x position based on which player (zbYou=true(you/left), false(opp/right)
    // display player name (call displayText method of base/parent class)
};
  • Declare an instance of ResultsTextArea and display.
    var bgColor = TIE_BACKGROUND_COLOUR;  // try WIN_BACKGROUND_COLOUR and LOSE_BACKGROUND_COLOUR
    var strResultMsg = "You tie!;         // try win and lose messages as well
    var resultsArea = new ResultsTextArea();
    this.resultsArea.displayResults(bgColor R, strResultMsg);
  • Define a Board Object that contains instances of each of the board areas defined so far.
///////////////////////////
//Board Object/////////////
var Board = function()
{
    this.scoresTextArea      = new ScoreTextArea();
    this.playersNameTextArea = new PlayerNameTextArea();
    this.resultsArea         = new ResultsTextArea();
    this.playArea            = new PlayArea();
    this.toolsArea           = new ToolsArea();
};
  • Define a method initBoard() that displays all of the areas of the board with default data.
Board.prototype.initBoard = function() 
{
    // draw player score area (0)
    // draw opponent score area (0)
    // draw player name area ("You")
    // draw opponent name area ("Opponent")
    // draw results area (TIE_BACKGROUND_COLOUR, "")

    // draw play area
    // draw tools area
}; 

Add a simple method to display the scores:

// draw the scores for each player
Board.prototype.drawScores = function() 
{
    this.scoresTextArea.displayScore(true, this.iYourScore);
    this.scoresTextArea.displayScore(false, this.iOpponentScore);
}; 

More detail for Board.initBoard() method. (Move your test code from your program to within this method).

Board.prototype.initBoard = function() 
{
    this.playersNameTextArea.displayPlayerName(true);
    this.playersNameTextArea.displayPlayerName(false);
    this.drawScores();
    this.resultsArea.displayResults(TIE_BACKGROUND_COLOUR, TIED_TEXT);

    this.playArea.display();
    this.toolsArea.display();
    
    // display welcome message
    fill(WELCOME_TEXT_COLOUR);
    text("            Welcome to the game", 25, PLAYAREA_Y + 40);
    text("             Rock-Paper-Scissors", 25, PLAYAREA_Y + 40 + TEXT_SIZE);
    text("Select a tool below and play the game...", 25, PLAYAREA_Y + 40 + TEXT_SIZE*2);
};

Now call the initBoard method from within the Board constructor method.

   this.initBoard();
  • Declare an instance of the board object and call the initBoard() method to display the board.
var myBoard = new Board();
myBoard.initBoard(); 

Rock-Paper-Scissors Part 2

Personal tools
Namespaces

Variants
Actions
Navigation
Tools