JSFiddle - React, Tailwind, and code Playground
by Gwyn Milcote
HTML
Little RPG thing. Certain foods or enemies can appear on each tile. Try not to starve to death, or get killed in fights. Keep eating and growing up, and getting better at flight etc so you can cross obstacle tiles.<br>Later, add: map BG, detailed data for every tile. Win conditions like defeating boss monsters. Race differences; dragons can eat animals after fights, while others only get stats. Each race can only eat certain foods. Add several map options so it's not always the same one.<br>
Race: <select class='race'><option value='1'>Dragon</option><option value='2'>Unicorn</option><option value='3'>Griffin</option></select> <button class='reset'>Restart</button>
<br><span class='coord'></span><br>
<span class='board'>
<button class='move' data-dir='nw'>NW</button> <button class='move' data-dir='n'>N</button> <button class='move' data-dir='ne'>NE</button>
<br><button class='move' data-dir='w'>W</button>
<button class='move' data-dir='0'>-</button>
<button class='move' data-dir='e'>E</button>
<br><button class='move' data-dir='sw'>SW</button>
<button class='move' data-dir='s'>S</button>
<button class='move' data-dir='se'>SE</button><br>
<div class='map'>
<div class='maptile tile-1-1'></div>
<div class='maptile tile-2-1'></div>
<div class='maptile tile-3-1'></div>
<div class='maptile tile-4-1'></div>
<div class='maptile tile-5-1'></div>
<div class='maptile tile-6-1'></div>
<div class='maptile tile-7-1'></div>
<div class='maptile tile-8-1'></div>
<div class='maptile tile-9-1'></div>
<div class='maptile tile-10-1'></div>
<div class='maptile tile-11-1'></div>
<div class='maptile tile-12-1'></div>
<div class='maptile tile-13-1'></div>
<div class='maptile tile-14-1'></div>
<div class='maptile tile-15-1'></div>
<div class='maptile tile-16-1'></div>
<br>
<div class='maptile tile-1-2'></div>
<div class='maptile tile-2-2'></div>
<div class='maptile tile-3-2'></div>
<div class='maptile tile-4-2'></div>
<div class='maptile tile-5-2'></div>
<div class='maptile...CSS
* {box-sizing:border-box;}
.map {width:480px;height:300px;position:relative;border:1px dotted green;}
.maptile {width:30px;height:30px;display:inline-block;background-color:black;border:1px solid grey;position:absolute;}
.dragon {width:30px;height:30px;position:absolute;top:30px;left:210px;background-color:green;}
.take1,.take2,.take3,.take4 {display:none;}
.tile-1-1 {top:0px;left:0px;}
.tile-2-1 {top:0px;left:30px;}
.tile-3-1 {top:0px;left:60px;}
.tile-4-1 {top:0px;left:90px;}
.tile-5-1 {top:0px;left:120px;}
.tile-6-1 {top:0px;left:150px;}
.tile-7-1 {top:0px;left:180px;}
.tile-8-1 {top:0px;left:210px;}
.tile-9-1 {top:0px;left:240px;}
.tile-10-1 {top:0px;left:270px;}
.tile-11-1 {top:0px;left:300px;}
.tile-12-1 {top:0px;left:330px;}
.tile-13-1 {top:0px;left:360px;}
.tile-14-1 {top:0px;left:390px;}
.tile-15-1 {top:0px;left:420px;}
.tile-16-1 {top:0px;left:450px;}
.tile-1-2 {top:30px;left:0px;}
.tile-2-2 {top:30px;left:30px;}
.tile-3-2 {top:30px;left:60px;}
.tile-4-2 {top:30px;left:90px;}
.tile-5-2 {top:30px;left:120px;}
.tile-6-2 {top:30px;left:150px;}
.tile-7-2 {top:30px;left:180px;}
.tile-8-2 {top:30px;left:210px;}
.tile-9-2 {top:30px;left:240px;}
.tile-10-2 {top:30px;left:270px;}
.tile-11-2 {top:30px;left:300px;}
.tile-12-2 {top:30px;left:330px;}
.tile-13-2 {top:30px;left:360px;}
.tile-14-2 {top:30px;left:390px;}
.tile-15-2 {top:30px;left:420px;}
.tile-16-2 {top:30px;left:450px;}
.tile-1-3 {top:60px;left:0px;}
.tile-2-3 {top:60px;left:30px;}
.tile-3-3 {top:60px;left:60px;}
.tile-4-3 {top:60px;left:90px;}
.tile-5-3 {top:60px;left:120px;}
.tile-6-3 {top:60px;left:150px;}
.tile-7-3 {top:60px;left:180px;}
.tile-8-3 {top:60px;left:210px;}
.tile-9-3 {top:60px;left:240px;}
.tile-10-3 {top:60px;left:270px;}
.tile-11-3 {top:60px;left:300px;}
.tile-12-3 {top:60px;left:330px;}
.tile-13-3 {top:60px;left:360px;}
.tile-14-3 {top:60px;left:390px;}
.tile-15-3 {top:60px;left:420px;}
.tile-16-3 {top:60px;left:450px;}
.tile-1-4 {top:90px;left:0px;}
.tile-2-4...JavaScript
var dx = 8; var dy = 2; // xy
var px = 210; var py = 30; // pixels
var health = 30; var turns = 0; // starting stats
var size = 1; var belly = 40;
var grow = 0; var flight = 1;
var race = 1;
var power = 1; var speed = 1;
// things to encounter
var name1 = 'Nothing';
var energy1 = 0; var type1 = 0;
var power1 = 0; var speed1 = 0;
var name2 = 'Nothing';
var energy2 = 0; var type2 = 0;
var power2 = 0; var speed2 = 0;
var name3 = 'Nothing';
var energy3 = 0; var type3 = 0;
var power3 = 0; var speed3 = 0;
var name4 = 'Nothing';
var energy4 = 0; var type4 = 0;
var power4 = 0; var speed4 = 0;
// current tile info
desc = '<b>Nest</b><br>Description here.';
foods = [1,2,3]; animals = [1,1,3];
$('.move').click(function(){
var dir = $(this).data('dir');
// stay in place, refresh current tile
if(dir == 0){ visitTile(); return; }
var tx = dx; var ty = dy; // temp xy
var ax = px; var ay = py; // temp pixels
if(dir == 'n'){ty = ty - 1; ay = ay - 30;}
if(dir == 's'){ty = ty + 1; ay = ay + 30;}
if(dir == 'e'){tx = tx + 1; ax = ax + 30;}
if(dir == 'w'){tx = tx - 1; ax = ax - 30;}
if(dir == 'ne'){ty = ty - 1; tx = tx + 1;
ay = ay - 30; ax = ax + 30;}
if(dir == 'nw'){ty = ty - 1; tx = tx - 1;
ay = ay - 30; ax = ax - 30;}
if(dir == 'se'){ty = ty + 1; tx = tx + 1;
ay = ay + 30; ax = ax + 30;}
if(dir == 'sw'){ty = ty + 1; tx = tx - 1;
ay = ay + 30; ax = ax - 30;}
var co = tx+'-'+ty;
var blocked = [];
var water = ['6-6','6-7','6-8'];
var sky = ['4-4','5-4','6-4'];
if(ty < 1 || tx < 1 || ty > 8 || tx > 15){
$('.result').html('Cannot move there.'); return;
}else if(size < 8 && water.includes(co)){
$('.result').html('The current is too strong! You are tiny and will be washed away...'); return;
}else if(flight < 5 && sky.includes(co)){
$('.result').html('You cannot fly well enough to cross this empty chasm...'); return;
}
dx = tx; dy = ty; px = ax; py = ay;
$('.dragon').animate({ 'left': ax +'px', 'top': ay +'px' }, 500);
visitTile();
});
// remove the black square and...