JSFiddle - React, Tailwind, and code Playground

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

by Gwyn Milcote

HTML

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

<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 legs.</div>
<div id='water' class='msg' 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' class='msg'...

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-repeat: no-repeat;background-position: center;}
.idlen{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#96f495;}
.idles{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#f49e95;}
.idlew{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#fce5ba;}
.idlee{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#f0d9f9;}
.idlene{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#cd76f2;}
.idlenw{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#76a6f2;}
.idlese{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#b7cff7;}
.idlesw{background-image:url(http://griffusion.elementfx.com/pics/tinygriffidle.gif);background-color:#e8effc;}

.north{background-image:url(http://griffusion.elementfx.com/pics/tinygriffn.gif);}
.south{background-image:url(http://griffusion.elementfx.com/pics/tinygriffs.gif);}
.east{background-image:url(http://griffusion.elementfx.com/pics/tinygriffe.gif);}
.west{background-image:url(http://griffusion.elementfx.com/pics/tinygriffw.gif);}
.northeast{background-image:url(http://griffusion.elementfx.com/pics/tinygriffne.gif);}
.northwest{background-image:url(http://griffusion.elementfx.com/pics/tinygriffnw.gif);}
.southeast{background-image:url(http://griffusion.elementfx.com/pics/tinygriffse.gif);}
.southwest{background-image:url(http://griffusion.elementfx.com/pics/tinygriffsw.gif);}

#xpos {display:inline-block;}
#ypos {display:inline-block;}
.leftbox, .rightbox...

JavaScript

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

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').attr('class', 'idle'+lastdir); 
    }  // 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('-=15','-=15');});
$goNorthEast.mousedown(function() {moveNE('+=15','-=15');});
$goSouthWest.mousedown(function() {moveSW('-=15','+=15');});
$goSouthEast.mousedown(function() {moveSE('+=15','+=15');});

// 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 == 59) || (griffx == 53 &&...