Hexagonal Path Finding

Path finding using hexagonal manhattan heuristic

by Juwal Bose

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>
<script src="https://dl.dropboxusercontent.com/s/hlc6fjmhwpk6z4c/hextilenode.js"></script>
<div id="TutContainer"></div>

JavaScript

/*global Phaser*/
/* hexagonal A* pathfinding following http://www.policyalmanac.org/games/aStarTutorial.htm */

var game = new Phaser.Game(800, 680, Phaser.AUTO, 'TutContainer', { preload: preload, create: create});

//horizontal tile shaped level
var levelData=
[[-1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1],
[-1,-1,0,0,0,0,0,0,0,0,-1,-1,-1],
[-1,-1,0,0,0,0,0,0,0,0,0,-1,-1],
[-1,0,0,0,10,0,10,0,0,0,0,-1,-1],
[-1,0,10,0,10,0,0,10,0,0,0,0,-1],
[0,0,0,0,0,0,0,0,0,0,0,0,-1],
[0,0,0,10,0,0,5,0,0,10,0,0,0],
[0,0,0,10,0,0,0,0,0,0,10,0,-1],
[-1,0,0,0,0,10,10,10,0,0,0,0,-1],
[-1,0,0,0,10,0,0,0,0,0,0,-1,-1],
[-1,-1,0,0,0,0,0,0,0,0,0,-1,-1],
[-1,-1,0,0,0,0,0,0,0,0,-1,-1,-1],
[-1,-1,-1,0,0,0,0,0,0,0,-1,-1,-1]];

var bmpText;
var hexTileHeight=61;
var hexTileWidth=52;
var hexGrid;
var prevTile= new Phaser.Point();
var endTile;
var startTile= new Phaser.Point();
var nextTileToCall;
var showingPath;
var rootThree;
var sideLength;

function preload() {
    game.load.crossOrigin='Anonymous';//cross origin fix
    //load all necessary assets
    game.load.bitmapFont('font', 'https://dl.dropboxusercontent.com/s/z4riz6hymsiimam/font.png?dl=0', 'https://dl.dropboxusercontent.com/s/7caqsovjw5xelp0/font.xml?dl=0');
    game.load.image('hex', 'https://dl.dropboxusercontent.com/s/rhwagtrs8o2v0cz/hexsmall.png?dl=0');
}

function create() {
    rootThree=Math.sqrt(3);
    sideLength=hexTileHeight/2;
    bmpText = game.add.bitmapText(10, 10, 'font', 'Hex Path Find\nTap on empty tile\nTap Hold to clear', 18);
    game.stage.backgroundColor = '#cccccc';
    createLevel();
    
    game.input.onHold.add(onHold);//hold to clear path
    game.input.holdRate=500;
    // Maintain aspect ratio
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    
    game.input.onTap.add(onTap);//tap to find path
}

function createLevel(){
    hexGrid=game.add.group();
   
    var tileX;
    var tileY;
    var hexTile;
    var axialPoint=new Phaser.Point();
    var screenPoint=new Phaser.Point();
    for (var i = 0; i...