HTML and CSS Reference
In-Depth Information
function
function
gameLoop
() {
drawScreen
()
window
.
setTimeout
(
gameLoop
,
intervalTime
);
}
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
();
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
();
}