Canvas Games: Part I - HTML5 Canvas - page 704

,[ 0 , 1 , 0 , 0 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 ]
];
//set up a* graph
var var graph = new new Graph ( tileMap );

var var startNode = { x : 0 , y : 1 }; // use values of map turned on side

var var endNode = { x : 2 , y : 1 };

//create node list
var

var start = graph . nodes [ startNode . x ][ startNode . y ];
var

var end = graph . nodes [ endNode . x ][ endNode . y ];
var

var result = astar . search ( graph . nodes , start , end , false false );

//load in tile sheet image
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 ,