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 1!<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='btnN' type='button' value='North'><br>
<input id='btnW' type='button' value='West'>
<input id='btnE' type='button' value='East'>
<br><input id='btnS' type='button' value='South'>

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"); 
$goSouth = $("#btnS");

$goEast.mousedown(function(){isDown = true;});
$goWest.mousedown(function(){isDown = true;});
$goNorth.mousedown(function(){isDown = true;});
$goSouth.mousedown(function(){isDown = true;});

$(document).mouseup(function(){ 
if(isDown){ isDown = false; }
});

$goEast.mousedown(function() {moveHoriz('+=20');});
$goWest.mousedown(function() {moveHoriz('-=20');});
$goNorth.mousedown(function() {moveVert('-=20');});
$goSouth.mousedown(function() {moveVert('+=20');});

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

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