JSFiddle - React, Tailwind, and code Playground

Tiny griffin game. Move around map and inspect locations. - GwynMil

by Gwyn Milcote

HTML

<p>jQuery game map tutorial, part 3!<br>Click buttons to move griffin around.<br><a href='http://griffusion.elementfx.com/mysite/griffexplore.html'>Full guide here</a></p>

<div class='area'>
<div class='starting'></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>

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

JavaScript

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

var isDown = false; 

$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; }
});

$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');}); 
// extra parameter added inside function ( ) brackets
$goNorthEast.mousedown(function() {moveNE('+=20','-=20');});
$goSouthWest.mousedown(function() {moveSW('-=20','+=20');});
$goSouthEast.mousedown(function() {moveSE('+=20','+=20');});

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' }, 500, function() { if (isDown){ moveEast(dist); }  });
showXY(); 
}
function moveNorth(dist){
griffy = griffy - 1;
  $( "#griff" ).animate({ 'top': dist +'px' }, 500, function() { if (isDown){  moveNorth(dist); } });
showXY(); 
}
function moveSouth(dist){
griffy = griffy + 1;
  $( "#griff" ).animate({ 'top': dist +'px' }, 500, function() { if (isDown){  moveSouth(dist);...