JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Little Dragon Game, by Gwyn Milcote. Work in progress.<br>
Biome: <select id='ldg_biome'>
    <option value='forest'>Forest</option>
    <option value='swamp'>Swamp</option>
    <option value='taiga'>Taiga</option>
</select> 
Colour: <select id='ldg_colour'>
    <option value='1'>Gold</option>
    <option value='2'>Silver</option>
    <option value='3'>Black</option>
    <option value='4'>Purple</option>
    <option value='5'>Green</option>
    <option value='6'>Blue</option>
</select> 
Name: <input type='text' id='ldg_name' value='Little Al' maxlength='10'>
<button id='ldg_restart'>Start</button>

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

Turns: <span id='ldg_turns'></span> 
Energy: <span id='ldg_energy'></span> 
HP: <span id='ldg_hp'></span> 
MP: <span id='ldg_mp'></span> 
Power: <span id='ldg_power'></span> 
Speed: <span id='ldg_speed'></span> 
EXP: <span id='ldg_exp'></span> 
Level: <span id='ldg_level'></span> 

XY: (<span id='ldg_xy'></span>) Encs: <span id='ldg_encnames'></span>
<br><br>
<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>

<div id='ldg_terrain'></div>
<div id='ldg_encounters'>There's nothing here.</div>

CSS

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

#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;
}

/* Small icons/buttons. Attack, eat etc. */
.ldg_approach {
    height: 25px;
    padding: 3px;
    border: none;
    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.3);
    display: inline-block;
}

.ldg_food {
    background-color: #ccbbaa;
}
.ldg_hp {
    background-color: red;
}
.ldg_mp {
    background-color: blue;
}
.ldg_exp {
    background-color: green;
}
.ldg_fight {
    background-color: silver;
}
.ldg_m1 {
    background-color: #ffcc33;
}
.ldg_m2 {
    background-color: #aabbcc;
}
.ldg_m3 {
    background-color: #ccbb11;
}
.ldg_m4 {
    background-color: #bbffaa;
}

.ldg_green {color: green;}
.ldg_amber {color: orange;}
.ldg_red {color: red;}

/* Background images for map. */
.ldg_forest {
    background-image: url("https://wallpapersite.com/images/pages/pic_w/6001.jpg");
}
.ldg_taiga {
    background-image: url("https://www.mountainphotography.com/images/xl/20150825-Aerial-Greenland-2.jpg");
}
.ldg_swamp {
    background-image: url("http://media.gettyimages.com/photos/aerial-view-of-swamp-in-florida-picture-id78051525?s=170667a");
}

JavaScript

const path = "http://mythstable.epizy.com/ldg/";

const tileSize = 20;
const mapX = 30;
const mapY = 20;

// Starting positions. The dragon nest in each map.
const startXY = {
    forest: {x: 4, y: 4},
    taiga: {x: 2, y: 4},
    swamp: {x: 3, y: 3}
};

// Arrays of terrain types. 30 wide, 20 high.
const maps = {
    forest: [
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3]
    ],
    taiga: [
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
        [1,1,1,1,1,1,1,1,1,1, 2,2,2,2,2,2,2,2,2,2, 3,3,3,3,3,3,3,3,3,3],
       ...