The Essential Guide to HTML5

(Greg DeLong) #1

MAZES


Code Explanation


ctx.beginPath(); Begin path


ctx.moveTo(this.sx+radMath.cos
(-.5
this.angle),this.sy+radMath.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+radMath.cos
((i-.5)
this.angle),this.sy+radMath.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 ith 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


this.sy -=dy; ... change y back—don't make this move


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

Free download pdf