The Essential Guide to HTML5

ROCK, PAPER, SCISSORS

Code Explanation

var paperby = 300; Vertical position of paper symbol

var scissorsbx = 250; Horizontal position of scissors symbol

var scissorsby = 300; Vertical position of scissors symbol

var canvas1; Reference for setting up click event listening
for canvas

var newscore; Value to be set for new score

var size = 15; Initial size for changing image for computer
move

var result; Value to be displayed as result message

var choices = ["rock.jpg",

"paper.gif","scissors.jpg"];

Names for symbol images

var compimg = new Image(); Image element used for each computer move

var beats = [ Start of declaration of array holding all the
messages

["TIE: you both threw

rock","You win: computer played rock",

"You lose: computer threw rock"],

The set of messages when the computer

throws rock

["You lose: computer

threw paper","TIE: you both threw paper",

"You win: computer threw paper"],

The set of messages when the computer

throws paper

["You win: computer

threw scissors","You lose: computer

threw scissors","TIE: you both threw

scissors"]];

The set of messages when the computer

throws scissors

var points = [ Start of declaration of array holding the
increments for the score: 0 for a tie, 1 for the
player winning, -1 for the player losing

[0,1,-1], The set of increments when the computer
throws rock