Mazes - The Essential Guide to HTML5 - page 235

Code Explanation

ctx.beginPath(); Begin path

ctx.moveTo(this.sx+rad*Math.cos
(-.5*this.angle),this.sy+rad*Math.sin
(-.5*this.angle));

Move to first vertex of the token polygon
(which is a pentagon)

for (i=1;i<this.n;i++) { For loop to draw the n sides of the

token: 5 sides in this case

ctx.lineTo(this.sx+rad*Math.cos
((i-.5)*this.angle),this.sy+rad*Math.sin
((i-.5)*this.angle));

Specify line to next vertex, setting up the
drawing of a side of the pentagon

} Close for

ctx.fill();

Draw token

}

Close function

function movetoken(dx,dy) {

Function header

this.sx +=dx; Increment x value

this.sy +=dy; Increment y value

var i;

Index

var wall;

Used for each wall

for(i=0;i<walls.length;i++) { Loop over all walls

wall = walls[i]; Extract i th wall

if (intersect(wall.sx,
wall.sy,wall.fx,wall.fy,this.sx,this.sy,
this.rad)) {

Check for intersect. If there is an
intersection between the new position of
the token and this specific wall

this.sx -=dx;

… change x back—don't make this move

… change y back—don't make this move

this.sy -=dy;

break;

Leave for loop because it isn't
necessary to do any more checking if
there is a collision with one wall.