ObjectCodeTemplate

From GIS CS4
Jump to: navigation, search
/*
Rock-paper-scissors is a hand game usually played by two people, where players simultaneously form one of three shapes with an outstretched hand. See: https://en.wikipedia.org/wiki/Rock-paper-scissors-lizard-Spock

Author: Jenny Oliver

The program design is object oriented making strong use of inheritance.
Layout position and colour details are defined as named constants.
THe above makes the look and feel of the game very easy to modify.

e.g. You could personalise the look by modifying the colors, or changing the images used for the tools.

The game is driven by a table defining the relationships between each tool.

The concept was based on a simple "Rock-Paper-Scissors" game .. originally programmed by Eyad Al Khalidi and changed up a bit by Frances Brown.  

How to Play ...
Click on one of the choices .. 
Your opponent (the Computer) will also choose one randomly at the same time .. 
You get 1 point for every game you win

Good Luck! :) ..........................................
*/

//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 ROCK_TOOL_ID = TOOL1_ID;
var PAPER_TOOL_ID = TOOL2_ID;
var SCISSORS_TOOL_ID = TOOL3_ID;

var PLAYER_POS = NUM_TOOLS + 1;
var OPPONENT_POS = NUM_TOOLS + 2;

var YOU_LOSE = -1;
var YOU_TIE = 0;
var YOU_WIN = 1;

/////////////////////////////////////
// board layout constants
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 constants
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;

// String constants
var WINNER_TEXT                 = "You Win!";
var LOSER_TEXT                  = "You Lose!";
var TIED_TEXT                   = "You Tied!";
                       
//////////////////////////
//RectArea Object/////////////
//The RectArea object is the prototype for each region on the board.

var RectArea = function(zx, zy, zWidth, zHeight, zbg)
{
    this.x = zx;
    this.y = zy;
    this.width = zWidth;
    this.height = zHeight;
    this.background = zbg;
};

RectArea.prototype.display = function() 
{
    noStroke();
    fill(this.background);
    rect(this.x, this.y, this.width, this.height); 
};

//////////////////////////
//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);

//////////////////////////
//ToolsArea Object/////////////
var ToolsArea = function(zx, zy, zWidth, zHeight, zbg) 
{
    // initialise properties using constants defined above
    //RectArea.call(...);
};

ToolsArea.prototype = Object.create(RectArea.prototype);

//////////////////////////
//TextArea Object/////////////
//The TextArea object is the prototype for each text region on the board.

var TextArea = function(zx, zy, zWidth, zHeight, zbg,
                        zxOffset, zyOffset, zStr, zTextColor, zTextSize)
{
    // initialise rect properties
    RectArea.call(this, zx, zy, zWidth, zHeight, zbg);

    // initialise text properties
    this.xOffset = zxOffset;
    this.yOffset = zyOffset;
    this.strText = zStr;
    this.textColour = zTextColor;
    this.textSize = zTextSize;
};

TextArea.prototype = Object.create(RectArea.prototype);

TextArea.prototype.display = function() 
{
    RectArea.prototype.display.call(this); 

    // text
    fill(this.textColour);
    stroke(this.textColour);
    textSize(this.textSize);
    text(this.strText, this.x + this.xOffset, this.y + this.textSize + this.yOffset); 
};

TextArea.prototype.displayText = function(zstrText) 
{
    this.strText = zstrText;
    this.display(); 
};

//////////////////////////
//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);

ScoreTextArea.prototype.displayScore = function(zbYou, ziScore) 
{
    // select player of opponent score area
    if (zbYou)  {this.x = 0;}
    else        {this.x = CANVAS_WIDTH/2;}
    
    this.displayText(ziScore);
};

//////////////////////////
//PlayerNameTextArea Object/////////////
var PlayerNameTextArea = function() 
{
    // initialise properties using constants defined above
    //TextArea.call(...);
};

PlayerNameTextArea.prototype = Object.create(TextArea.prototype);

PlayerNameTextArea.prototype.displayPlayerName = function(zbYou) 
{
    // initialise this.x property and player name based on zbYou
    //...
};

//////////////////////////
//ResultsTextArea Object/////////////
var ResultsTextArea = function() 
{
    // initialise properties using constants defined above
    //TextArea.call(...);
};

ResultsTextArea.prototype = Object.create(TextArea.prototype);

ResultsTextArea.prototype.displayResults = function(zColour, zStr) 
{
    // set background colour and display results ...
};

Some code for declaring instances:

//////////////////////////////////////////////////////////
//My program data and code goes below here.../////////////

var playArea = new PlayArea();
playArea.display();

var toolsArea = new ToolsArea();
toolsArea.display();

var myScore = new ScoreTextArea();
myScore.displayScore(true, 2);
myScore.displayScore(false, 3);