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