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

// 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) => {
  const adjacent = grid.find((cell) => cell.x === current.x + direction.x && cell.y === current.y + direction.y);
  return adjacent ? {
    adjacent,
    direction
  } : null;
};

const Dist = (x1, y1, x2, y2) => {
  var a = x1 - x2;
  var b = y1 - y2;
  return Math.sqrt(a * a + b * b);
};

const TileScore = (data) => {
  // Diagonal only, otherwise need more advanced measures.
  const {
    up,
    right,
    down,
    left
  } = data;

  let score = 0;

  score += up ? 1 : 0;
  score += right ? 2 : 0;
  score += down ? 4 : 0;
  score += left ? 8 : 0;

  return...