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 #1</h3>
<p>Drawing a grid and dragon sprite.</p>
<hr>
<div id='ldg_map'></div>

CSS

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

hr {
    margin: 20px auto;
}

/* 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

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>";

    document.getElementById("ldg_map").innerHTML = html;
}

drawMap();