Perilous 2

by Sam Fereday

HTML

<script src="https://ondras.github.io/rot.js/rot.js"></script>
<button id="go">
  Go
</button>
<div id="container"></div>
<div id="mover"></div>

SCSS

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

#container {
  position: relative;
  margin-top: 1em;
}

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

JavaScript

// https://www.raywenderlich.com/4946/introduction-to-a-pathfinding
/*
Perilous 2D - A Prototype to Perilous 3D? 3D more advance, flag for another day.
The mechanic:
- You start by observing the map and picking out the path to the exit for a time to memorize. Magic maps are unstable, so you can't view it forever.
- Then, the first step you take will begin an event sequence that'll over time fill up the map with darkness, lead by and evil demon thing. Running in to this will result in your doom and, an eternity spent in hell.
- Your goal is to make it to the exit before this happens (so long as you remember the way)
To make more interesting:
- Rotate map (or array) to change positions. It'll still use the same calc, but just look different, total cheat. But works.
- Make an auto-walker that'll be able to find the last point in the maze. Basically you'll need to use a mixture of visited nodes to find the furthest away. Then you can pick your start to end position.
- Dungeon character person thing to add.
- Add exxtra things to make it more interesting such as keys, treasure, etc
*/

class Cell {

  constructor(w, h, x, y, t) {
    // Data
    this.w = w;
    this.h = h;
    this.x = x;
    this.y = y;
    this.bit = 0;
    this.worldX = this.w * this.x;
    this.worldY = this.h * this.y;
    this.occupied = t !== 0;
    this.distFromStart = 0;
    this.checked = false;
    // Pathfinding
    this.f = 0; // Square score
    this.g = 0; // Cost from point 'a' to adjacent square
    this.h = 0; // Estimated cost from adjacent to point 'b' (uses manhatten)
    this.dir = { // Direction to move to get to square
      x: 0,
      y: 0
    }
    // Dom
    this.el = document.createElement('div');
    this.el.className = 'cell' + ' occ-' + this.occupied;
    this.el.style.left = this.worldX + 'px';
    this.el.style.top = this.worldY + 'px';
  }

}

let container = document.getElementById("container");
let cells = [];
let safeCells = [];

let w = 19,
  h = 19;

let em =...