HTML and CSS Reference
In-Depth Information
( 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 ();
context . strokeStyle = "black" ;
context . lineWidth = 5 ;
context . arc (( node . y * 32 ) + 16 , ( node . x * 32 ) + 16 , 10 , 0 ,
( Math . PI / 180 ) * 360 , false
false );
context . stroke ();
context . closePath ();
}
}
}
< /script>
</head>
</head>
<body>
<body>
<div
<div style= "position: absolute; top: 50px; left: 50px;" >
<canvas
<canvas id= "canvas" width= "500" height= "500" >
Your browser does not support the HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
Example 8-13 presentssomenewconceptsandsomereviewfrom Chapter 4 .Let'stakealook
at the most important parts of the code before we take a look at what it does in action.
In the example code, we first set up our tile map. This describes the look of the game screen
and which tiles to display:
var
var mapRows = 5 ;
var
var mapCols = 5 ;
var
var tileMap = [
[ 0 , 1 , 0 , 0 , 0 ]
,[ 0 , 1 , 0 , 0 , 0 ]
,[ 0 , 1 , 0 , 0 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 ]
,[ 0 , 0 , 0 , 0 , 0 ]
];
Our tile map will be made up of five rows and five columns. The tile map is laid out in a
two-dimensional array of rows and columns that mimic how it will look on the screen. Notice
Search WWH ::




Custom Search