Tanks That Pass Through Walls?

In Example 8-19, we are going to demonstrate how a poorly designed tile map can allow for a node path to seemingly go through solid walls when diagonal movement is allow. Figure 8-19 shows this occurring. Here is the full code listing for Example 8-19.

Example 8-19. Maze design with tank going through walls

<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>Chapter 8 Example 19 - A* With Tank Animation with diagoinal moves</title>
<script src="modernizr.js"></script>
<script type='text/javascript' src='graph.js'></script>
<script type='text/javascript' src='astar.js'></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {



function canvasSupport () {
    return Modernizr.canvas;

function canvasApp(){

    if (!canvasSupport()) {
        var theCanvas = document.getElementById('canvas');
        var context = theCanvas.getContext('2d');

    var currentNodeIndex=0;
    var nextNode;
    var currentNode;
    var rowDelta=0;
    var colDelta=0;
    var tankX=0;
    var tankY=0;
    var angleInRadians=0;
    var tankStarted=false;
    var tankMoving=false;
    var finishedPath=false;
  //set up tile map
   var mapRows=15;
   var mapCols=15;
   var tileMap=[

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience live online training, plus books, videos, and digital content from nearly 200 publishers.