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, last part!<br><img src='http://griffusion.elementfx.com/pics/tinygriffn.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffne.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffe.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffse.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffs.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffsw.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffw.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffnw.gif'> <img src='http://griffusion.elementfx.com/pics/tinygriffidle.gif'><br>
Click buttons to move griffin around. Preferably after these sprites have loaded... :)<br><a href='http://griffusion.elementfx.com/mysite/griffexplore.html'>Full guide here</a></p>

<div class='map'>
<div id='rab1' class='rabbit r1'></div> 
<div id='rab2' class='rabbit r2'></div>
<div id='rab3' class='rabbit r3'></div>
<div id='rab4' class='rabbit r4'></div>
<div id='nest' class='msg'><b>Nest</b><br>The nest in the hillside is empty. Your hatchmates have all flown away.</div>
<div id='raven' class='msg' 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='raven2' class='msg' style='display:none;'><b>Ravenbeak</b><br>Oh, some bunnies. Whoop de doo. Perhaps some shiny things would appeal to them? ... griffins like gold, after all...</div>
<div id='raven3' class='msg' style='display:none;'><b>Ravenbeak</b><br>Hmph...! The elder can't help gazing at the shinies. Fine then! With a satisfied glare, they grunt at you to go away.</div>
<div id='catch' style='display:none;'><b>Hunted!</b><br>You caught a rabbit.</div>
<div id='shiny' style='display:none;'><b>Ooh, shiny!</b><br>You found a small pretty thing.</div>
<div id='sand' class='msg' style='display:none;'><b>Sand! Eee!</b><br>And mud! Frothy water! You enjoy the feeling of it on your...

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/tinygriffidle.gif);background-repeat: no-repeat;background-position: center;}

#xpos {display:inline-block;}
#ypos {display:inline-block;}
.leftbox, .rightbox {width:140px;display:inline-table;text-align:center;vertical-align:top;border:1px solid grey;border-radius:5px;padding:4px;}
.dirs {width:120px;border:none;margin:auto;}
.dirbtn {width:35px;background-color:#f4deb7;border:2px solid grey;border-radius:5px;padding:4px;}
.dirbtn:hover {cursor:pointer;background-color:white;transform:translate(0px,1px);}
.rabbit {width:30px;height:30px;position:absolute;background-image:url(http://griffusion.elementfx.com/pics/tinyrab.png);background-repeat: no-repeat;background-position: center;}
.r1 {top:130px;left:10px;}
.r2 {top:265px;left:48px;}
.r3 {top:205px;left:250px;}
.r4 {top:84px;left:270px;}

.msg {width:160px;padding:15px;border-radius:5px;position:absolute;top:10px;left:297px;}
#nest, #sand {background-color:#f4deb7;border:1px solid #998358;}
#pool, #water, #wfall {background-color:#d7e1f2;border:1px solid #3e5e91;}
#tree, #roots {background-color:#c9b2a3;border:1px solid #776356;}
#raven,#raven2,#raven3 {background-color:#bbbec1;border:1px solid #525456;}
#nogo,#catch,#shiny {width:160px;padding:15px;background-color:#bbbec1;border:1px solid #525456;border-radius:5px;position:absolute;top:180px;left:297px;}

JavaScript

var griffx = 50;  // default starting positions
var griffy = 50;  // will be updated as griffin moves
var rabbits = 0;
var raven = 0;  // if talk after caught 4 rabbits, turn to 1
var find1 = 0;
var find2 = 0;  // three items to find. After this, Raven is 2
var find3 = 0;
var items = 0; // and count them all, for status

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; $('#griff').css('background-image', 'url(http://griffusion.elementfx.com/pics/tinygriffidle.gif)'); }  // return to idle sprite
}); 

// 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){
if(griffx == 48 || (griffx == 52 && griffy ==...