HTML and CSS Reference
In-Depth Information
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>
In
Example 8-16
(shownin
Figure 8-16
),youcanseethateventhoughthegrasstileincreased
the total node path value by 1, it was still the shortest path through the maze to the end
goal node. This resulted in a path that ran through the grass node. In the next example,
Example 8-17
,
we will add back in the diagonal movement to the node path. By doing so, the
tank will avoid the grass node because the A* function will be able to find a path that has a
lower total combined node weight than one that travels over the grass tiles.
