Closest implementation, with relevant update to demo page and initial test.

Author: MannyC

astar.js

@@ -43,6 +43,10 @@ var astar = {
     // {
     //   heuristic: heuristic function to use
     //   diagonal: boolean specifying whether diagonal moves are allowed
+    //   closest: boolean specifying whether to return closest node if
+    //            target is unreachable
+    //   closestHeuristic: heuristic function to use to determine closeness.
+    //            Will use main heuristic if not specified.
     // }
     search: function(grid, start, end, options) {
         astar.init(grid);
@@ -52,9 +56,28 @@ var astar = {
         var diagonal = !!options.diagonal;
         var costDiagonal = options.costDiagonal || 1;
         var costStraight = options.costStraight || 1;
+        var closest = options.closest || false;
+        var closestHeuristic = options.closestHeuristic || heuristic;
 
         var openHeap = astar.heap();
 
+        // set the start node to be the closest if required
+        var closestNode = start;
+        if(closest){
+            start.c = closestHeuristic(start.pos, end.pos);
+        }
+
+        function pathTo( node ){
+            var curr = node;
+            var path = [];
+            while(curr.parent) {
+                path.push(curr);
+                curr = curr.parent;
+            }
+            return path.reverse();
+        }
+
+
         openHeap.push(start);
 
         while(openHeap.size() > 0) {
@@ -64,13 +87,7 @@ var astar = {
 
             // End case -- result has been found, return the traced path.
             if(currentNode === end) {
-                var curr = currentNode;
-                var ret = [];
-                while(curr.parent) {
-                    ret.push(curr);
-                    curr = curr.parent;
-                }
-                return ret.reverse();
+                return pathTo( currentNode );
             }
 
             // Normal case -- move currentNode from open to closed, process each of its neighbors.
@@ -101,6 +118,19 @@ var astar = {
                     neighbor.g = gScore;
                     neighbor.f = neighbor.g + neighbor.h;
 
+                    if( closest ){
+                        neighbor.c =
+                            (closestHeuristic === heuristic) ? neighbor.h : closestHeuristic(neighbor.pos, end.pos);
+                        // If the neighbour is closer than the current closestNode or if it's equally close but has
+                        // a cheaper path than the current closest node then it becomes the closest node
+                        if(neighbor.c < closestNode.c || (neighbor.c === closestNode.c && neighbor.g < closestNode.g)){
+
+                            closestNode = neighbor;
+                        }
+                    }
+
+
+
                     if (!beenVisited) {
                         // Pushing to heap will put it in proper place based on the 'f' value.
                         openHeap.push(neighbor);
@@ -113,6 +143,10 @@ var astar = {
             }
         }
 
+        if(closest){
+            return pathTo(closestNode);
+        }
+
         // No result was found - empty array signifies failure to find path.
         return [];
     },

demo/demo.js

@@ -1,6 +1,6 @@
 /* 	demo.js http://github.com/bgrins/javascript-astar
 	MIT License
-	
+
 	Set up the demo page for the A* Search
 */
 
@@ -45,12 +45,15 @@ $(function() {
     var $selectGridSize = $("#selectGridSize");
     var $checkDebug = $("#checkDebug");
     var $searchDiagonal = $("#searchDiagonal");
+    var $checkClosest = $("#checkClosest");
+
 
     var opts = {
         wallFrequency: $selectWallFrequency.val(),
         gridSize: $selectGridSize.val(),
         debug: $checkDebug.is("checked"),
-        diagonal: $searchDiagonal.is("checked")
+        diagonal: $searchDiagonal.is("checked"),
+        closest: $checkClosest.is("checked")
     };
 
     var grid = new GraphSearch($grid, opts, astar.search);
@@ -72,10 +75,15 @@ $(function() {
     $checkDebug.change(function() {
         grid.setOption({debug: $(this).is(":checked")});
     });
-    
+
     $searchDiagonal.change(function() {
         grid.setOption({diagonal: $(this).is(":checked")});
     });
+
+    $checkClosest.change(function() {
+        grid.setOption({closest: $(this).is(":checked")});
+    });
+
     $("#generateWeights").click( function () {
         if ($("#generateWeights").prop("checked")) {
             $('#weightsKey').slideDown();
@@ -171,7 +179,8 @@ GraphSearch.prototype.cellClicked = function($end) {
 
 	var sTime = new Date();
     var path = this.search(this.graph.nodes, start, end, {
-        diagonal: this.opts.diagonal
+        diagonal: this.opts.diagonal,
+        closest: this.opts.closest
     });
 	var fTime = new Date();
 
@@ -191,7 +200,7 @@ GraphSearch.prototype.drawDebugInfo = function(show) {
     this.$cells.html(" ");
     var that = this;
     if(show) {
-    	that.$cells.each(function(i) { 
+    	that.$cells.each(function(i) {
             var node = that.nodeFromElement($(this));
     		var debug = false;
             if (node.visited) {
@@ -226,11 +235,21 @@ GraphSearch.prototype.animatePath = function(path) {
 		return grid[node.x][node.y];
 	};
 
+    var self = this;
+    // will add start class if final
     var removeClass = function(path, i) {
-	    if(i>=path.length) return;
-	    elementFromNode(path[i]).removeClass(css.active);
+	    if(i>=path.length){ // finished removing path, set start positions
+            return setStartClass(path, i);
+        }
+        elementFromNode(path[i]).removeClass(css.active);
 	    setTimeout( function() { removeClass(path, i+1) }, timeout*path[i].cost);
     }
+    var setStartClass = function(path, i){
+        if(i === path.length){
+            self.$graph.find("." + css.start).removeClass(css.start);
+            elementFromNode(path[i-1]).addClass(css.start);
+        }
+    }
     var addClass = function(path, i)  {
 	    if(i>=path.length) {  // Finished showing path, now remove
 	    	return removeClass(path, 0);

demo/index.html

@@ -53,6 +53,9 @@ <h2>Demonstration</h2>
 	    		<label for="searchDiagonal">Allow diagonal movement?</label>
 	    		<input type="checkbox" name="searchDiagonal" id="searchDiagonal" />
 	    		<br />
+	    		<label for="checkClosest">Closest node if target unreachable?</label>
+	    		<input type="checkbox" name="checkClosest" id="checkClosest" />
+	    		<br />
 	    		<label for="generateWeights">Add random weights?</label>
 	    		<input type="checkbox" name="generateWeights" id="generateWeights" />
 	    		<br />

test/index.html

@@ -10,7 +10,6 @@
 <div id="qunit-fixture"></div>
 <script src="qunit.js"></script>
 <script src="tests.js"></script>
-<script src="../graph.js"></script>
 <script src="../astar.js"></script>
 </body>
 </html>

test/tests.js

@@ -52,12 +52,22 @@ test( "Pathfinding", function() {
   equal (result1.text, "(0,1)(1,1)(1,2)(2,2)(2,3)", "Result is expected");
 });
 
-function runSearch(grid, start, end) {
+test( "Pathfinding to closest", function() {
+  var result1 = runSearch([
+      [1,1,1,1],
+      [0,1,1,0],
+      [0,0,1,1]
+  ], [0,0], [2,1], {closest: true});
+
+  equal (result1.text, "(0,1)(1,1)", "Result is expected");
+});
+
+function runSearch(grid, start, end, options) {
   var graph = new Graph(grid);
   var start = graph.nodes[start[0]][start[1]];
   var end = graph.nodes[end[0]][end[1]];
   var sTime = new Date();
-  var result = astar.search(graph.nodes, start, end);
+  var result = astar.search(graph.nodes, start, end, options);
   var eTime = new Date();
   return {
     result: result,