Canvas Games: Part I - HTML5 Canvas - page 722

var var tileSheet = new new Image ();

tileSheet . addEventListener ( 'load' , eventSheetLoaded , false

false );

tileSheet . src = "tiles.png" ;

function function eventSheetLoaded () {

drawScreen ()

}

function function drawScreen () {

for

for ( var var rowCtr = 0 ; rowCtr < mapRows ; rowCtr ++ ) {

for

for ( var var colCtr = 0 ; colCtr < mapCols ; colCtr ++ ){

var var tileId = tileMap [ rowCtr ][ colCtr ];

var var sourceX = Math . floor ( tileId % 5 ) * 32 ;

var var sourceY = Math . floor ( tileId / 5 ) * 32 ;

context . drawImage ( tileSheet , sourceX , sourceY , 32 , 32 ,
colCtr * 32 , rowCtr * 32 , 32 , 32 );

}

}

//draw green circle at start node
context . beginPath ();
context . strokeStyle = "green" ;
context . lineWidth = 5 ;
context . arc (( startNode . y * 32 ) + 16 , ( startNode . x * 32 ) + 16 , 10 , 0 ,
( Math . PI / 180 ) * 360 , false false );

context . stroke ();
context . closePath ();

//draw red circle at end node
context . beginPath ();
context . strokeStyle = "red" ;
context . lineWidth = 5 ;
context . arc (( endNode . y * 32 ) + 16 , ( endNode . x * 32 ) + 16 , 10 , 0 ,
( Math . PI / 180 ) * 360 , false false );

context . stroke ();
context . closePath ();

//draw black circles on path
for for ( var var ctr = 0 ; ctr < result . length - 1 ; ctr ++ ) {

var var node = result [ ctr ];

context . beginPath ();