The Essential Guide to HTML5

CHAPTER 8

Code Explanation

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

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

function Throw(sx,sy, smargin,swidth,

sheight,rectcolor,picture) {

Header for constructor function to be used for

the 3 game symbols. Parameters include x

and y coordinates, margin, inner width and

height, color for the rectangle, and the picture

file

this.sx = sx; Assign the sx attribute

this.sy = sy; ... sy attribute

this.swidth = swidth; ... swidth attribute

this.bwidth = swidth + 2*smargin; Calculate and assign the outer width. This is
the inner width plus 2 times the margin.

this.bheight = sheight + 2*smargin; Calculate and assign the outer height. This is
the inner height plus 2 times the margin.

this.sheight = sheight; Assign sheight attribute

this.fillstyle = rectcolor; Assign fillstyle attribute

this.draw = drawThrow; Assign the draw method to be drawThrow

this.img = new Image(); Create a new Image object

this.img.src = picture; Set its src to be the picture file

this.smargin = smargin; Assign the smargin attribute. It is still needed
for drawing.

} Close function

function drawThrow() { Header for function to draw the symbols

ctx.strokeStyle = "rgb(0,0,0)"; Set the style for the rectangle outline to
black.