JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='area'>
<div class='starting'></div>
<div id='nest'><b>Nest</b><br>The nest is empty. Your hatchmates have all flown away.</div>
<div id='lake' style='display:none;'><b>Lake</b><br>You found a small body of water.</div>
<div id='tower' style='display:none;'><b>Tower</b><br>You found a crumbling stone tower.</div>
<div id='nogo' style='display:none;'>You can't move there!</div>

<div id="griff"></div>
</div>
<div id='xpos'><b>X:</b> 50 miles</div> <div id='ypos'><b>Y:</b> 50 miles</div>

<br /><br />
<input id="btnNW" type="button" value=" NW" /> <input id="btnN" type="button" value="N" /> <input id="btnNE" type="button" value=" NE" /><br>
<input id="btnW" type="button" value="W" />
<input id="btnE" type="button" value="E" /><br>
<input id="btnSW" type="button" value=" SW" /> <input id="btnS" type="button" value=" S" /> <input id="btnSE" type="button" value=" SE" />

CSS

.area {width:300px;height:300px;border:1px solid green;position:relative;margin-bottom:20px;}
.starting {position:absolute;top:49px;left:49px;width:30px; height:30px;border:1px dashed #b2c7ea;}

#griff{position:absolute;top:50px;left:50px;width:30px;height:30px;background-image:url(http://griffusion.elementfx.com/pics/20pxblack.gif);background-repeat: no-repeat;background-position: center;}

#xpos {display:inline-block;}
#ypos {display:inline-block;}
#nest {width:160px;padding:15px;background-color:#f4deb7;border:1px solid #998358;border-radius:5px;position:absolute;top:150;left:290px;}
#lake {width:160px;padding:15px;background-color:#d7e1f2;border:1px solid #3e5e91;border-radius:5px;position:absolute;top:150;left:290px;}
#tower {width:160px;padding:15px;background-color:#bbbec1;border:1px solid #525456;border-radius:5px;position:absolute;top:150;left:290px;}
#nogo {width:160px;padding:15px;background-color:#d7e1f2;border:1px solid #3e5e91;border-radius:5px;position:absolute;top:150;left:290px;}

JavaScript

// I found some bits of code from other SO answers...
// and am building on them. Really good for learning!
// thanks, original authors. Sorry, can't remember who.

var griffx = 50;  // default starting positions
var griffy = 50;  // will be updated as griffin moves

var isDown = false;  // mouse is not clicking anything
$goEast = $("#btnE");
$goWest = $("#btnW");
$goNorth = $("#btnN");  // recognising each button...
$goSouth = $("#btnS");
$goNorthWest = $("#btnNW");
$goNorthEast = $("#btnNE");
$goSouthWest = $("#btnSW");
$goSouthEast = $("#btnSE");
$goEast.mousedown(function(){isDown = true;}); // clicked
$goWest.mousedown(function(){isDown = true;});
$goNorth.mousedown(function(){isDown = true;});
$goSouth.mousedown(function(){isDown = true;});
$goNorthWest.mousedown(function(){isDown = true;});
$goNorthEast.mousedown(function(){isDown = true;});
$goSouthWest.mousedown(function(){isDown = true;});
$goSouthEast.mousedown(function(){isDown = true;});

$(document).mouseup(function(){  // no longer clicking
    if(isDown){ isDown = false; }
}); 

// when each btn is pressed, do these functions...
// using these parameters. Diagonals need two
$goEast.mousedown(function() {moveEast('+=20');});
$goWest.mousedown(function() {moveWest('-=20');});
$goNorth.mousedown(function() {moveNorth('-=20');});
$goSouth.mousedown(function() {moveSouth('+=20');});
$goNorthWest.mousedown(function() {moveNW('-=20','-=20');});
$goNorthEast.mousedown(function() {moveNE('+=20','-=20');});
$goSouthWest.mousedown(function() {moveSW('-=20','+=20');});
$goSouthEast.mousedown(function() {moveSE('+=20','+=20');});

// need separate functions for every direction.
// seems inefficient? but griffx, griffy are changed differently in each direction...
function moveWest(dist){
griffx = griffx - 1;
  $( "#griff" ).animate({ 'left': dist +'px' }, 500, function() { if (isDown){ moveWest(dist); }  });
showXY(); 
}
function moveEast(dist){
griffx = griffx + 1;
  $( "#griff" ).animate({ 'left': dist +'px'...