r-paper-dungeon

A module to use for traversing a dungeon.

by Sam Fereday

HTML

<button id="go">
  Build
</button>
<div id="mover"></div>

CSS

body {
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

svg {
  clear: both;
  padding: 0;
  margin: 0;
}

button {
  width: 100%;
  clear: both;
}

#mover {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  background: red;
}

JavaScript

/*

http://gamejolt.com/games/lands-of-lorez/27439
http://www.playfuljs.com/a-first-person-engine-in-265-lines/

Phase 2:
- Decorating is much the same as always. When it comes to walls, use the level map to find out what's walkable and what isn't. Now the issue here might be that you have a locked doorway. Since however these are changeable, it makes sense to set it as a different type. So it might be that you set it to a '2' as a type. That way, when you do an is walkable check, you simply see if that cell has been marked as 'locked'.
- Locked doesn't mean it's a wall. It just means you can't pass it yet. Again, because this info is in the cell as a separate value to 'walkable', it means that the cell state could be blocked, but walkable potentially in future.
- So with all that said it makes sense to first decorate all non-walkable tiles with the correct score.
- Then, assign the tile score to tiles that 'are' walkable.
- Once both of those are done, you'll have a corresponding number to the right image you'll need from the array of correct images given.
- Then it's just a case of placing objects on tiles and assigning that type to the cell it's on. Be it pickup, etc. Easily enough done.
- Objects are added via their coords (like the player). So you can place start points, etc. Rather than referencing to tiles, just find where that object is.

*/

const MapTypes = {
  STARTPOINT: 0,
  KEY: 1,
  DOOR: 2,
  ENEMY: 3,
  EXIT: 4
}

const Types = {
  UNSET: 0
};

/*
const LevelMap = [
  [1, 0, 0, 0, 0, 0, 0, 0],
  [1, 0, 0, 1, 1, 1, 0, 0],
  [1, 1, 0, 0, 0, 1, 1, 0],
  [1, 0, 0, 0, 0, 0, 1, 0],
  [1, 1, 0, 1, 1, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 0],
  [0, 1, 1, 1, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0]
];*/

const LevelMap = [
	[0, 0, 0],
  [0, 1, 0],
  [0, 1, 0],
  [0, 1, 0],
  [0, 0, 0]
];

const MapObjects = [{
  type: MapTypes.STARTPOINT,
  properties: {
    x: 0,
    y: 0
  }
}, {
  type: MapTypes.KEY,
  position: {
    x: 1,
    y: 2
  },
  properties: {
   ...