Perilous 4 - ROT.js & Chance.js

by Sam Fereday

HTML

<script src="https://ondras.github.io/rot.js/rot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.16/chance.min.js"></script>
<button id="generate">
Generate Map
</button>
<button id="find">
Find Path
</button>
<button id="decorate">
Decorate
</button>
<div id="container"></div>

CSS

.cell {
  width: 32px;
  height: 32px;
  position: absolute;
  background: #440000;
  border: 1px solid #fff;
  transition: all 0.2s ease;
}
.cell.occ-false {
  background: grey;
}
.cell.occ-false.revealed {
  background: #777;
}
.cell.checked {
  background: orange;
}
.cell.first {
  background: blue;
}
.cell.last {
  background: green;
}
.cell.end {
  background: pink;
}

#container {
  position: relative;
  margin-top: 6px;
}

#mover {
  width: 32px;
  height: 32px;
  position: absolute;
  left: 0;
  top: 0;
  background: red;
  z-index: 9999;
}

JavaScript 1.7

// http://gregtrowbridge.com/a-basic-pathfinding-algorithm/
// A bit clunky, but a start. This code could easily be improved.
// Storage - This is just temporary whilst debug is going on
let solution = [];
let startPosition, endPosition, madeMap;

// If on this tile the score is a dead end:
// 1, 2, 4, 8

// If one of these scores then exit points it more than 2:
// 7, 11, 13, 14, 15 -> I feel like there's a pattern here...

// Constants
const MAP_OPTIONS = {
  WIDTH: 9,
  HEIGHT: 9
};

const DIR = {
  NORTH: {
    x: 0,
    y: -1
  },
  EAST: {
    x: 1,
    y: 0
  },
  SOUTH: {
    x: 0,
    y: 1
  },
  WEST: {
    x: -1,
    y: 0
  }
};

const NODE_TYPES = {
  INVALID: "Invalid",
  PATH: "Path",
  OBSTACLE: "Obstacle",
  START: "Start",
  GOAL: "Goal"
};

const NODE_VALUES = {
  PATH: 0,
  OBSTACLE: 1,
  START: 2,
  GOAL: 3
};

// A class to hold locations
class Location {
  constructor(data) {
    const {
    	x,
      y,
      distanceFromTarget,
      path = [],
      type,
      tileData
    } = data;

    this.x = x;
    this.y = y;

    this.distanceFromLeft = 0;
    this.distanceFromTop = 0;
    this.distanceFromTarget = distanceFromTarget
      ? distanceFromTarget
      : Infinity;

    this.path = path;
    this.type = type;

    this.tileData = tileData;
  }
}

// ROT to generate some fun stuff
const ROTMap = new ROT.Map.EllerMaze(MAP_OPTIONS.WIDTH, MAP_OPTIONS.HEIGHT);
//const ROTMap = new ROT.Map.IceyMaze(MAP_OPTIONS.WIDTH, MAP_OPTIONS.HEIGHT, 25);
//const ROTMap = new ROT.Map.DividedMaze(MAP_OPTIONS.WIDTH, MAP_OPTIONS.HEIGHT);

// Fire up a chance instance
const Ch = new Chance();

// Some util and map methods
const ReverseFind = (arr, prop, value) => {
  for (let i = arr.length - 1; i >= 0; i--) {
    if (arr[i][prop] === value) return arr[i];
  }
  return null;
};

const GetAdjacentData = (current, direction, grid) =>
  grid.find(
    cell =>
      cell.x === current.x + direction.x && cell.y === current.y + direction.y
  );

const Dist = (x1,...