Rock, Paper, Scissors - The Essential Guide to HTML5 - page 263

The rules of the game must be obeyed! This includes both what beats what and the folksy message
displayed to explain it—“rock crushes scissors”; “paper covers rock”, and “scissors cuts paper”. The
score displayed goes up by one, down by one, or stays the same depending on whether the turn is a win,
loss, or tie.
The audio-enhanced version of the game must play one of four audio clips depending on the situation.
HTML5, CSS, and JavaScript features
Now lets take a look at the specific features of HTML5, CSS, and JavaScript that provide what we need to
implement the game. Except for basic HTML tags and functions and variables, the explanations here are
complete. If youve read the other chapters, youll notice that much of this chapter repeats explanations
given previously.
We certainly could have used the types of buttons demonstrated in the other chapters, but I wanted these
buttons to look like the throws they represent. As youll see, the way we implement the buttons is built on
the concepts demonstrated in prior chapters. And we again use JavaScript pseudo-random processing for
defining the computer move, and setInterval for animating the display of the computer move.
Our rock-paper-scissors game will demonstrate HTML5's native audio facility. We will integrate coding for
audio with applying the rules of the game.
Providing graphical buttons for the player
There are two aspects to producing clickable buttons or icons on the screen: drawing the graphics on the
canvas and detecting when the player has moved the mouse over a button and clicked the primary mouse
button.
The buttons or icons well produce consist of the outline (stroke) of a rectangle, a solid rectangle, and then
an image on top of the rectangle with a vertical and horizontal margin. Since the similar operations will
occur for all three buttons, we can use the approach first introduced in the cannonball and slingshot
games in Chapter 4. We will set up a programmer-defined class of objects by writing a function named
Throw . Recall that objects consist of data and coding grouped together. The function, described as a
constructor function, will be used with the operator new to create a new object of type Throw . The term
this is used within the function to set the values associated with each object.
function Throw(sx,sy, smargin,swidth,sheight,rectcolor,picture) {
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.bwidth = swidth + 2*smargin;
this.bheight = sheight + 2*smargin;
this.sheight = sheight;
this.fillstyle = rectcolor;
this.draw = drawThrow;
this.img = new Image();
this.img.src = picture;
this.smargin = smargin;
}