Perilous

by Sam Fereday

HTML

<script src="https://ondras.github.io/rot.js/rot.js"></script>
<button id="go">
  Go
</button>
<button id="magicmap">
  Show Magic Map
</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;
  }
}

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

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

JavaScript

/*
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.worldX = this.w * this.x;
    this.worldY = this.h * this.y;
    this.occupied = t !== 0;
    this.distFromStart = 0;
    this.checked = false;
    // 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 = 7,
  h = 7;

let em = new ROT.Map.EllerMaze(w, h);
//let em = new ROT.Map.IceyMaze(w, h, 25);
//let em = new ROT.Map.DividedMaze(w, h); // - Innaccurate due to rooms.

em.create(function(x, y, occ) {

  let c = new Cell(32, 32, x, y, occ);

  if (!occ)
    safeCells.push(c);

  cells.push(c);
  container.appendChild(c.el);

});

function dist(x1, y1, x2, y2) {
  var a = x1 - x2;
 ...