JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umbrella.min.js"></script>
<h3>Little Dragon Game #2</h3>
<p>Moving the dragon sprite by clicking buttons, and updating co-ordinates.</p>
<hr>

<div id='ldg_map'></div>

<p id='testing'>[co-ords will appear here]</p>

<button class='ldg_move' data-dir='n'>North</button>
<button class='ldg_move' data-dir='s'>South</button>
<button class='ldg_move' data-dir='e'>East</button>
<button class='ldg_move' data-dir='w'>West</button>
<button class='ldg_move' data-dir='x'>Wait</button>

CSS

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

hr {
    margin: 20px auto;
}

/*
*  Used for show, hide, fadeIn, fadeOut, animate.
*  Added these functions to UmbrellaJS.
*/
.show {
    opacity: 1;
}
.hide {
    opacity: 0;
}
.fade {
    transition: opacity 500ms;
}
.animate {
    transition: left 500ms, top 500ms;
}


/* Background-image url can be set in code later. */
#ldg_map {
    width: 600px;
    height: 400px;
    border: 0px solid black;
    position: relative;
    background-size: cover;
}

/* Dark squares of un-visited areas. */
.ldg_tile {
    width: 20px;
    height: 20px;
    position: absolute;
    box-shadow: inset 1px 1px 1px 1px rgba(0, 0, 0, 0.2);
    background-color: #222;
}

/* Sprite that moves around. */
#ldg_dragon {
    width: 20px;
    height: 20px;
    position: absolute;
}

JavaScript

/*
* Some extra functions for UmbrellaJS.
*/
u.prototype.fadeIn = function(){
  return this.each(function(node){
    node.classList.add('show','fade');
    node.classList.remove('hide');
  });
};

u.prototype.fadeOut = function(){
  return this.each(function(node){
    node.classList.add('hide','fade');
    node.classList.remove('show');
  });
};

u.prototype.show = function(){
  return this.each(function(node){
    node.classList.add('show');
    node.classList.remove('hide','fade');
  });
};

u.prototype.hide = function(){
  return this.each(function(node){
    node.classList.add('hide');
    node.classList.remove('show','fade');
  });
};

u.prototype.css = function(name, value){
  return this.pairs(name, value, function(node, name){
    return node.style[name];
  }, function(node, name, value){
    node.style[name] = value;
  });
};

u.prototype.val = function(){
  return this.nodes[0].value;
};

u.prototype.animate = function(top, left, time){
  return this.each(function(node){
    node.classList.add("animate");
    setTimeout(()=> node.classList.remove("animate"), time);
    node.style.top = top + "px";
    node.style.left = left + "px";
  });
};

const mapY = 20,
      mapX = 30,
      tileSize = 20,
      path = "https://website.com/images/ldg/";

// Not constants; these values will change.
let dragonX = 5,
    dragonY = 7;

function drawMap(){
    let html = "";

    for(let y = 0; y < mapY; y++){
        for(let x = 0; x < mapX; x++){
            html += "<div class='ldg_tile' id='ldg_" + x + "_" + y + "' style='position: absolute; top: " + (y * tileSize) + "px; left: " + (x * tileSize) + "px;'></div>";
        }
    }
    
    html += "<div id='ldg_dragon' style='top: " + (dragonY * tileSize) + "px; left: " + (dragonX * tileSize) + "px;'><img src='" + path + "dragon.gif'></div>";

    u("#ldg_map").html(html);
}

drawMap();

// Link the buttons to the move() function.
u(".ldg_move").on("click", function(){
    move( u(this).data("dir") );
});

function...