The Essential Guide to HTML5

ROCK, PAPER, SCISSORS

Code Explanation

ctx.strokeRect(this.sx,this.sy,

this.bwidth,this.bheight);

Draw rectangle outline

ctx.fillStyle = this.fillstyle; Set the style for the filled rectangle

ctx.fillRect(this.sx,this.sy,

this.bwidth,this.bheight);

Draw rectangle

ctx.drawImage(this.img,this.sx+this.

smargin,this.sy+this.smargin,this.swidth,

this.sheight);

Draw the image offset inside the rectangle.

} Close function

function choose(ev) { Header for function called upon a click event

var compch = Math.floor

(Math.random()*3);

Generate computer move based on random

processing

var compchn = choices[compch]; Pick out the image file

compimg.src = compchn; Set the src of the already created Image
object

var mx; Used for mouse x

var my; Used for mouse y

if ( ev.layerX || ev.layerX

== 0) {

Check which coding applies in this browser

mx= ev.layerX; Set mx

my = ev.layerY; Set my

} else if (ev.offsetX ||

ev.offsetX == 0) {

Else check if this coding works

mx = ev.offsetX; Set mx

my = ev.offsetY; Set my