Maze

by rocketegg0

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0-beta.3/angular-sanitize.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
<div ng-controller="myController">
    <div class="panel panel-default">
        <div class="panel-heading">
            Maze
        </div>
        <div class="panel-body">
            <input type="number" ng-model="width"/> 
            <input type="number" ng-model="height"/>
            <button ng-click="solve()">Solve</button> 
            <table class="table table-bordered" style="margin-top:20px">
                <tr><td>Complete in: {{endTime}}ms</td><td>Num Computations: {{numcomputations}}</td><td>Num Solutions: {{solution_grids.length}}</td>
                </tr>
            </table>
        <div class="panel-body">
            <table class="table">
                <tr><td><h4>Maze [{{start.x}}, {{start.y}}] to [{{end.x}}, {{end.y}}]</h4></td>
                </tr>
                <tr><td><pre ng-show="maze" ng-bind-html="maze"></pre></td></tr>
            </table>
            <table class="table">
                <tr>
                    <td><h4>Maze Solved</h4>
                <p>Number of Solutions: {{solutions.length}}</p>
                <p>Best Solution: {{best.length-1}} moves</p>
                    </td>
                </tr>
                <tr><td>
            <pre ng-show="mazeSolved" ng-bind-html="mazeSolved">
            </pre>
                    </td></tr>
            </table>
        </div>
    </div>
</div>

CSS

.blue {
    color:blue;
}
.red {
    color:red;
}

JavaScript

var mymodule = angular.module('mymodule', ['ngSanitize']);

mymodule.controller("myController", function ($scope) {
    
    $scope.width = 12;
    $scope.height = 12;
    
    function Pair(x, y) {
        this.x = x;
        this.y = y;
    }
    
    Pair.prototype.toString = function() {
        return '(' + this.x + ',' + this.y + ')';
    }

    function Maze(width, height) {
    
        this.grid = [];
        var solutions = [];
    
        function initialize() {
            //add blank
            for (var i = 0; i < this.width; i++) {
                this.grid.push([]);
                for (var j = 0; j < this.height; j++) {
                    this.grid[i][j] = '.';
                }
            }
    
            //add walls
            for (var i = 0; i < this.width; i++) {
                for (var j = 0; j < this.height; j++) {
                    if (i % 2 == 0) {
                        if (Math.random() < .5) {
                            this.grid[i][j] = 'x';
                        }
                    } else {
                        this.grid[i][j] = Math.random() < .2 ? 'x': '.';
                    }
                }
            }
        }
        
        function getAdjacentMoves(array, pastMove) {
            return array.filter(function(move) {
                if (move.x == pastMove.x && Math.abs(move.y - pastMove.y) == 1) {
                    return true; //adjacent
                } else if (move.y == pastMove.y && Math.abs(move.x - pastMove.x) == 1) {
                    return true;
                } else {
                    return false;
                }
            });
        }
    
        function recreatePath(historicalMoves, start, end, path, index) {
            if (arrayContainsMove(path, end)) {
                solutions.push(angular.copy(path));
                return path;
            } else if (index > historicalMoves.length - 1) {
                return;
            } else {
                //var _path =...