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">
<head>
<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() {

    canvasApp();

}

function canvasSupport () {
    return Modernizr.canvas;
}

function canvasApp(){

    if (!canvasSupport()) {
                return;
    }else{
        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=[
   [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  ,[0,1,2,1,1,1,1,1,1,1,1,1,1,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,0,1,0,0,1,0,1,0]
  ,[0,1,0,1,0,0,1,1,1,0,0,1,0,1,0]
  ,[0,2,1,1,1,1,0,0,0,1,1,1,1,1,0]
  ,[0,1,0,0,0,1,0,0,0,1,0,0,0,1,0]
  ,[0,1,1,1,2,1,0,0,0,1,1,

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

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial