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 2!<br>Click buttons to move griffin around.<br><a href='http://griffusion.elementfx.com/mysite/griffexplore.html'>Full guide here</a></p>
<div id='griff'></div>
<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

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

JavaScript

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){
$( "#griff" ).animate({ 'left': dist +'px' }, 500, function() { if (isDown){ moveWest(dist); } });
}

function moveEast(dist){
$( "#griff" ).animate({ 'left': dist +'px' }, 500, function() { if (isDown){ moveEast(dist); } });
}
function moveNorth(dist){
$( "#griff" ).animate({ 'top': dist +'px' }, 500, function() { if (isDown){ moveNorth(dist); } });
}

function moveSouth(dist){
$( "#griff" ).animate({ 'top': dist +'px' }, 500, function() { if (isDown){ moveSouth(dist); } });
}
// same as above, but using extra parameter to go 2 ways
function moveNE(dist1,dist2){
$( "#griff" ).animate({ 'left': dist1 +'px', 'top': dist2 +'px' }, 700, function() { if (isDown){ moveNE(dist1,dist2); }...