JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Dungeon movement test.<br><br>
<div class='around_map'><div class='map_holder'></div></div>
<span class='tile_info'></span><br>
<span class='coords'></span><br>

<button class='move_button' data-direction='n'>North</button>
<br><button class='move_button' data-direction='w'>West</button><button class='move_button' data-direction='e'>East</button>
<br><button class='move_button' data-direction='s'>South</button>

CSS

img, div {
  box-sizing: border-box;
}

/* Map holder gets messed up with own border.
So this div contains it. */
.around_map {
    padding: 5px;
    background-color: grey;
    margin: auto;
    width: 160px;
}

.map_holder {
  width: 150px;
  height: 150px;
  position: relative;
  font-size: 0;
  overflow: hidden;
}

.map_tile {
  width: 30px;
  height: 30px;
  padding: 0px;
  margin: 0px;
  display: inline-block;
  position: relative;
  border: 0px dotted black;
}

/* Items, monsters etc must fit inside tile exactly. */
.map_tile img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 30px;
  height: 30px;
}

#map_griff {
  position: absolute;
  top: 30px;
  left: 30px;
  width: 30px;
  height: 30px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Sprite classes to switch #map_griff between. */
.map_griff_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
}
.map_griff_n {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffn.gif);
}
.map_griff_s {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffs.gif);
}
.map_griff_e {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffe.gif);
}
.map_griff_w {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffw.gif);
}
.map_griff_n_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: red;
}
.map_griff_s_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
}
.map_griff_e_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: blue;
}
.map_griff_w_idle {
  background-image: url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);
  background-color: yellow;
}

/* Terrain tiles. Add variation later. */

/* grass */
.terrain_1 {
    background-color: #44822B;
}

/* dirt */
.terrain_2{
    background-color: #7A3223;
}

/* sand */
.terrain_3 {
   ...

JavaScript

$(function(){

// t = terrain, i = item, m = monster
var object_map = [
  [
    {t: 1, i: 0, m: 0},
    {t: 4, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 5, m: 0},
    {t: 3, i: 8, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 1, m: 0},
    {t: 2, i: 0, m: 0}
  ],[
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 3, m: 0},
    {t: 2, i: 0, m: 6},
    {t: 3, i: 4, m: 8},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 1},
  ],[
    {t: 1, i: 0, m: 5},
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 1},
    {t: 1, i: 2, m: 0},
    {t: 1, i: 4, m: 0},
    {t: 3, i: 0, m: 5},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 3, i: 5, m: 6},
  ],[
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 3, i: 7, m: 0},
    {t: 1, i: 4, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 8, m: 0},
    {t: 2, i: 0, m: 0},
  ],[
    {t: 3, i: 0, m: 9},
    {t: 1, i: 1, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 6, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 3, m: 0},
    {t: 5, i: 0, m: 2},
  ],[
    {t: 3, i: 0, m: 0},
    {t: 4, i: 1, m: 0},
    {t: 1, i: 0, m: 2},
    {t: 2, i: 0, m: 2},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 3, i: 0, m: 2},
    {t: 5, i: 0, m: 0},
    {t: 3, i: 0, m: 0},
  ],[
    {t: 1, i: 0, m: 0},
    {t: 4, i: 0, m: 0},
    {t: 1, i: 0, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 5, m: 0},
    {t: 3, i: 8, m: 0},
    {t: 1, i: 0, m: 9},
    {t: 2, i: 0, m: 0},
    {t: 1, i: 1, m: 0},
    {t: 5, i: 0, m: 4}
  ],[
    {t: 1, i: 0, m: 5},
    {t: 3, i: 0, m: 0},
    {t: 1, i: 0, m: 1},
    {t: 1, i: 2, m: 0},
    {t: 1, i: 4, m: 0},
    {t: 3, i: 0, m: 5},
    {t: 1, i: 0, m: 0},
    {t: 2, i: 0, m: 0},
    {t:...