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>
<p>
<div class='map'>
<div class='grid'></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' 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'...CSS
.map {width:900px;height:570px;position:relative;margin-bottom:20px;background-image:url(https://orig00.deviantart.net/03e8/f/2018/188/b/b/village1_by_bronzehalo-dcgkumm.png);background-repeat: no-repeat;background-position: center;}
.grid {height:100%;background-image:url(https://orig00.deviantart.net/e4f3/f/2018/189/9/d/mappgrid_by_bronzehalo-dcgn4k7.png);}
#griff{position:absolute;top:406px;left:317px;width:40px;height:40px;background-repeat: no-repeat;background-position:...JavaScript
const db = {
/*
* Tile layouts: where can walk, etc.
* Graphics are all pre-drawn, no tile images needed.
* Looks isometric, but is rectangle grid with squished squares.
*/
exploreScreens: [
{
id: 1, name: "Tarak Village",
tiles: [
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
]
},{
}
],
/*
* When leaving a screen, which to load next?
* Certain tiles lead to positions on other maps.
*/
explorePortals: [
{
id: 1, targetScreen: 2, targetX: 5, targetY: 5,
desc: "Go down the path?"
}
],
/*
* There can be multiple tiles in one portal.
* Even the whole side of a screen could be open.
*/
explorePortalTiles: [
{id: 1, screenId: 1, posX: 6, posY: 6, portalId: 1},
{id: 2, screenId: 1, posX: 7, posY: 6,...