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

<div class='map'>
<div class='starting'></div>
<div id='nest'><b>Nest</b><br>The nest in the hillside is empty. Your hatchmates have all flown away.</div>
<div id='raven' style='display:none;'><b>Ravenbeak</b><br>The big griffin seems unimpressed and ignores you. Maybe if you demonstrate your hunting skills..?</div>
<div id='sand' style='display:none;'><b>Sand! Eee!</b><br>And mud! Frothy water! You enjoy the feeling of it on your legs.</div>
<div id='water' style='display:none;'><b>Shallow river</b><br>Lucky it's so shallow and slow-moving. Little chicks could get swept away if they wade deeper...</div>
<div id='pool' style='display:none;'><b>Stream</b><br>You found a small pool of water, where it gathered before running to the river.</div>
<div id='wfall' style='display:none;'><b>Waterfall</b><br>Oooh, it's all misty and nice.</div>
<div id='tree' style='display:none;'><b>Tree trunk</b><br>You climbed into the hollow trunk. Nothing here though...</div>
<div id='roots' style='display:none;'><b>Tree roots</b><br>Quite tough to clamber over. You'll need to climb inside the trunk from the front.</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

.map {width:302px;height:302px;position:relative;margin-bottom:20px;background-image:url(http://griffusion.elementfx.com/pics/jquerymap.jpg);background-repeat: no-repeat;background-position: center;}

#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, #sand {width:160px;padding:15px;background-color:#f4deb7;border:1px solid #998358;border-radius:5px;position:absolute;top:150;left:290px;}
#pool, #water, #wfall {width:160px;padding:15px;background-color:#d7e1f2;border:1px solid #3e5e91;border-radius:5px;position:absolute;top:150;left:290px;}
#tree, #roots {width:160px;padding:15px;background-color:#c9b2a3;border:1px solid #776356;border-radius:5px;position:absolute;top:150;left:290px;}
#raven, #nogo {width:160px;padding:15px;background-color:#bbbec1;border:1px solid #525456;border-radius:5px;position:absolute;top:150;left:290px;}

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){
if(griffx == 48 || (griffx == 52 && griffy == 59) || (griffx == 53 && griffy == 59) || (griffx == 58 && griffy == 49) || (griffx == 53 && griffy == 57)){ $('#nogo').show(300); } // show 'cannot move' msg
else{ $('#nogo').hide(300);
griffx = griffx - 1;
  $( "#griff" ).animate({ 'left': dist +'px' }, 500, function() { if (isDown){ moveWest(dist); }  });
showXY(); }
}
function moveEast(dist){
if(griffx == 61 || (griffx == 52 && griffy == 59) || (griffx == 58 && griffy == 61) || (griffx == 51 && griffy == 59) || (griffx == 55 && griffy == 49) || (griffx == 51 && griffy == 57)){...