JSFiddle - React, Tailwind, and code Playground

by Kaeden

HTML

<div id="preview"></div>

CSS

#preview {
    border: 1px solid #BBBBBB;
    padding: 1px;
    width: 120px;
    height: 120px;
}
#preview > div {
    text-align: center;
    font: 9px Arial;
    color: black;
    line-height: 18px;
    float: left;
    width: 18px;
    height: 18px;
    border: 1px solid #BBBBBB;
}
#preview > div.wall {
    background-color: #9CA69D;
}
#preview > div.start {
    background-color: pink;
}
#preview > div.end {
    background-color: lightgreen;
}
#preview > div.path {
    background-color: yellow;
}

JavaScript

var map = 
    [
        [2,0,0,0,0,0],
        [0,0,0,0,0,0],
        [1,1,1,1,1,1],
        [0,0,0,0,0,0],
        [0,0,0,0,0,0],
        [0,0,0,0,0,3]        
    ];

var queue = [];
var found = false;
var costs;

var node = function(x, y) {
    this.x = x;
    this.y = y;
    this.cost = null;
    this.fastestNeighbor = null;
    
    return {
        x: this.x,
        y: this.y,
        cost: this.cost,
        fastestNeighbor: this.fastestNeighbor
    };
};

var findType = function(num) {
    var x, xLength = map.length;
    for (x = 0; x < xLength; x++) {
        var y, yLength = map[x].length;
        for (var y = 0; y < yLength; y++) {
            if (map[x][y] == num) {
                var theNode = new node(x,y);
                return theNode;
            }
        }
    }
    
    return null;
};

var getStart = function() {
    var node = findType(2);
    node.cost = 0;
    return node;
};

var getEnd = function() {
    var node = findType(3);
    return node;
};

var getOneOffs = function(a) {
    var toReturn = [];
    
    if (a.x > 0) {
        var n = new node(a.x - 1, a.y);
        
        if (map[n.x][n.y] != 1) {
            toReturn.push(n);
        }
    }
    
    if (a.y > 0) {
        var n = new node(a.x, a.y - 1);
        if (map[n.x][n.y] != 1) {
            toReturn.push(n);
        }
    }
    
    if (a.x < map.length - 1) {
        var n = new node(a.x + 1, a.y);
        
        if (map[n.x][n.y] != 1) {
            toReturn.push(n);
        }
    }
    
    if (a.y < map[0].length) {
        var n = new node(a.x, a.y + 1);
        
        if (map[n.x][n.y] != 1) {
            toReturn.push(n);
        }
    }
                      
    return toReturn;    
};

var costs = map.slice(); // kopiowanie tablic
// czyszczenie kosztów
for (y = 0; y < map.length; y++) {
    costs[y] = map[y].slice()
    for (x = 0; x < map[0].length; x++) {
        costs[y][x] = null;
    }
}


var navigate = function() {    
    while(!found &&...