Dijkstra's Algorithm

by Kaeden

HTML

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

CSS

#preview {
  border: 1px solid #BBBBBB;
  padding: 1px;
  width: 200px;
  height: 200px;
}

#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 = [
    [0,0,0,0,0,0,0,0,0,0],
    [0,0,0,1,0,0,0,0,0,0],
    [2,0,0,1,0,0,0,0,0,0],
    [0,0,0,1,0,0,0,0,0,0],
    [0,0,0,1,0,0,1,1,1,1],
    [0,0,0,1,0,0,0,1,0,0],
    [0,0,0,1,0,0,0,0,0,0],
    [0,0,0,1,0,0,0,1,0,0],
    [0,0,0,1,0,0,0,1,0,3],
    [0,0,0,0,0,0,0,1,0,0]
];*/

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

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

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;
  }
}

function draw() {
  $('#preview').html('');
  for (x = 0; x < map[0].length; x++) {
    for (y = 0; y < map.length; y++) {
      e = $('<div/>')
      if (map[y][x] == 1) e.addClass('wall')
      if (map[y][x] == 2) e.addClass('start')
      if (map[y][x] == 3) e.addClass('end')
      if (map[y][x] == 4) e.addClass('path')
      if (costs[y][x] !== null)
        e.html(costs[y][x]);
      $('#preview').append(e)
    }
  }
}

function isMoveable(point) {
  if (point.x < 0 || point.x >= map[0].length) return false
  if (point.y < 0 || point.y >= map.length) return false
  return map[point.y][point.x] !== 1
}

function markPath(point) {
  map[point.y][point.x] = 4
}

function setValue(point, value) {
  costs[point.y][point.x] = value;
}

function getStartPoint() {
  for (x = 0; x < map[0].length; x++) {
    for (y = 0; y < map.length; y++) {
      if (map[y][x] == 2)
        return {
          'x': x,
...