Skip to content

Instantly share code, notes, and snippets.

@iznax

iznax/MiniAdventureGame.html

Last active January 17, 2018 04:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iznax/f1716316152508898dac8619bc079b09 to your computer and use it in GitHub Desktop.
Save iznax/f1716316152508898dac8619bc079b09 to your computer and use it in GitHub Desktop.
Download ZIP
Mini Adventure Game
Raw
Readme.md
Raw
MiniAdventureGame.html
<!DOCTYPE html>
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2018 by anonymous (http://jsbin.com/ihigih/9/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<meta name="robots" content="noindex">
<html>
<head>
<meta charset=utf-8 />
<title>Mini Adventure</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body{ font-family: monospace; font-size: 32px; text-align: center; }
table{ font-family: monospace; font-size: 20px; text-align: center; }
</style>
</head>
<body>
<b>Mini Adventure</b>
<br><br>
<table align="center">
<tr><td align="center" width=256><b id="title"/></td></tr>
<tr>
<td><canvas id="canvas" width="216" height="216"/></td>
<td width=1></td>
<td><div id="out"></div></td>
</tr>
<tr><td align=center><div id="notes"></div></td></tr>
</table>
<canvas id="tile" width="24" height="24"/>
<script id="jsbin-javascript">
function $(id)
{
return document.getElementById(id)
}
var canvas = $("canvas");
var ctx = canvas.getContext("2d");
var out = $('out');
var notes = $('notes');
var title = $('title');
var W = 9, X=W-1; // View size
var H = 9, Y=H-1;
var SZ=24;
var r = 1; // current room index
var x=y=4; // player position
var Inv={ G:0, K:0, W:0 }; // inventory Gold,Keys,Water
var R = []; // Room list
R[1] = { T:"Start", N:2 };
R[2] = { T:"Path", N:3, S:1, I:"$" };
R[3] = { T:"Crossroads", S:2, W:4, N:7, E:5 };
R[4] = { T:"Ruins", E:3, W:11, X:"/", C:"#", I:"$" };
R[5] = { T:"Path", W:3, E:6,EK:'8', X:"/", C:"#", I:"k" };
R[6] = { T:"Grotto", W:5, S:10, I:"V" };
R[7] = { T:"Gate", N:8,NK:'#', S:3, I:"H", Toll:3 };
R[8] = { T:"Jester", N:9, S:7, I:"J" };
R[9] = { T:"Throne", S:8, I:"K" };
R[10] = { T:"Cave", N:6, E:13,EK:'8', M:"&" };
R[11] = { T:"Shore", F:"~", E:4, W:12 };
R[12] = { T:"Island", E:11, I:"$" };
R[13] = { T:"Cell", W:10, X:'/', C:"#", I:"Q" };
R[14] = { T:"Treasury", E:9, C:"$" };
var hi=0;
var Hint=
[
"I am the jester",
"You are the knight.",
"To slay the beast",
"You must learn to fight.",
"You cannot kill",
"Without a deadly tool.",
"Search carefully",
"In the watery pool."
];
var edge = [1,0,0,0,0,0,0,0,1];
var door = [1,1,1,0,0,0,1,1,1];
var cage = [0,0,0,1,1,1,0,0,0];
var inner = [0,1,1,1,1,1,1,1,0];
function Get(i,j)
{
var w=R[r];
var c = ".";
if (w.F && inner[i] && inner[j]) c = w.F;
if (!w.W & i==0) c='X';
if (!w.N & j==0) c='X';
if (!w.E & i==X) c='X';
if (!w.S & j==Y) c='X';
if (edge[i]&door[j]) c='X';
if (edge[j]&door[i]) c='X';
if (w.I&&i==4&&j==4) c=w.I;
if (w.X&&i==1&&j==1) c=w.X;
if (w.C&&cage[i]&cage[j]) c=w.C;
if (w.M&&i==2&j==6) c=w.M;
if (w.NK&&j==0&&cage[i]) c=w.NK;
if (w.EK&&i==X&&cage[j]) c='8';
if (w.WK&&i==0&&cage[j]) c='8';
if (w.SK&&j==Y&&cage[i]) c='8';
return c;
}
function Draw()
{
title.innerHTML = R[r].T;
var view = "";
for (var j=0; j<H; j++)
{
for (var i=0; i<W; i++)
{
var c = (i==x&&j==y) ? '@' : Get(i,j);
view += c;
if (c=Tile[c]) ctx.drawImage(c,i*SZ,j*SZ);
}
view += "<br>";
}
out.innerHTML = view;
var text = Inv.G ? "$="+Inv.G+" " : "";
var inv = [];
if (Inv.K) inv.push(" key");
if (Inv.B) inv.push(" boat");
if (Inv.S) inv.push(" sword");
if (Inv.Q) inv.push(" queen");
if (inv.length) text += "<br>You have a"+inv+".";
if (R[r].Q) text += "<br>"+R[r].Q;
notes.innerHTML = text;
}
document.onkeydown = function()
{
var w=R[r];
var k = event.keyCode;
var i=x;
var j=y;
if (k==37) --i;
if (k==38) --j;
if (k==39) i++;
if (k==40) j++;
var c = Get(i,j);
if (w.Q && k==89 && w.Toll) // Yes?
{
if(Inv.G>=w.Toll)
w.Q="Paid.",Inv.G-=w.Toll,w.NK=w.Toll=0;
else
w.Q="Not enough.";
c=0;
}
if (w.Q && k==78) w.Q=0,c=0; // No?
if (c=='$') // gold coin?
{
Inv.G++;
w.I=0;
}
if (c=='/') // switch-off?
{
w.X='\\';
w.C=0; // open cage
}
if (c=='\\') // switch-on?
{
w.X='/';
w.C='#'; // close cage
}
if (c=='k') // keys?
{
Inv.K++;
w.I=0;
}
if (c=='8') // door?
{
if (Inv.K>0)
{
w.Q = "Unlocked.";
w.NK=w.EK=w.SK=w.WK=0;
Inv.K--;
}
else
{
w.Q = "Locked.";
}
}
if (c=='V') // boat?
{
Inv.B=1;
w.I=0;
}
if (c=='H') // Guard?
{
w.Q = w.Toll ? "Pay $3 Toll? Y/N" : "You may pass.";
}
if (c=='J')
{
w.Q = Hint[hi++%8];
}
if (c=='K')
{
if (Inv.Q || w.M=='Q')
{
w.Q="Thank you!";
w.M='Q';
Inv.Q=0;
w.W=14; // open secret door!
}
else
{
w.Q = "Slay the dragon!";
}
}
if (c=='Q')
{
w.Q="Thank you!";
if (w.I == c) w.I=0,Inv.Q=1;
}
if (c=='!') // sword?
{
Inv.S=1;
w.I=0;
}
if (c=='~') // water?
{
// Water searched counter
w.I = Inv.B && ++Inv.W == 48 ? '!':w.I; // reveal sword
w.Q = "Water";
if (Inv.B) c='.';
}
if (c=='&') // dragon?
{
if (Inv.S)
{
w.Q = "You killed it.";
w.M = 0;
w.I = 'k';
}
else
{
w.Q = "Dragon!";
}
}
if (c=='.') // floor?
{
if (i<0)r=w.W;
if (j<0)r=w.N;
if (i>X)r=w.E;
if (j>Y)r=w.S;
x=(i+W)%W;
y=(j+H)%H;
w.Q=0; // clear any questions etc.
}
Draw();
}
function CreateImage(c1,c2,t)
{
var canvas = $("tile");
var ctx = canvas.getContext("2d");
var s=SZ/8;
for(var k=0;k<8;k++)
for(var b=0;b<8;b++)
{
var rgb = (t[k]&(1<<b)) ? c1:c2;
ctx.fillStyle = "rgb("+ rgb +")";
ctx.fillRect(b*s,k*s,s*2,s*2);
}
var img = new Image();
img.src = canvas.toDataURL();
return img;
}
// Color palette
var C=
[
[0,0,0], // black
[75,75,75], // dark
[180,180,180], // gray
[255,255,255], // white
[255,0,0], // red
[0,255,0], // green
[0,0,255], // blue
[255,255,0], // yellow
[200,150,64], // brown
[70,130,180], // steel blue
];
// Image list of 8x8 pixel tiles
var Tile = [];
Tile['.'] = CreateImage(C[1],C[0],[0,0,0,0,0,0,0,0]); // Floor
Tile['X'] = CreateImage(C[9],C[0],[255,255,255,255,255,255,255,255]); // Wall
Tile['@'] = CreateImage(C[3],C[0],[56,56,16,124,186,56,40,108]);
Tile['$'] = CreateImage(C[7],C[0],[0,60,102,90,90,102,60,0]); // Coin
Tile['8'] = CreateImage(C[8],C[0],[85,186,87,170,85,234,93,170]); // Door
Tile['k'] = CreateImage(C[7],C[0],[0,60,36,60,8,24,8,24]); // Key
Tile['/'] = CreateImage(C[3],C[0],[0,96,96,48,48,24,24,60]); // Switch
Tile['\\'] = CreateImage(C[2],C[0],[0,6,6,12,12,24,24,60]); // Off
Tile['#'] = CreateImage(C[1],C[0],[102,255,255,102,102,255,255,102]);
//[204,51,0,14+32+128,0,204,51,0]
Tile['~']=CreateImage(C[6],C[0],[3,136,48,4+64,3,136,48,4+64]); // Water
Tile['V'] = CreateImage(C[3],C[0],[0,102,102,126,60,24,0,0]); // Boat
Tile['!'] = CreateImage(C[3],C[0],[8,24,24,24,24,60,24,24]); // Sword
Tile['H'] = CreateImage(C[2],C[0],[12,76,82,126,94,76,76,94]); // Guard
Tile['J'] = CreateImage(C[5],C[0],[16,56,16,124,186,40,40,68]); // Jester
Tile['K'] = CreateImage(C[7],C[0],[84,56,16,124,124,40,40,108]); // King
Tile['Q'] = CreateImage(C[7],C[0],[56,84,16,124,124,40,40,108]); // Queen
Tile['&'] = CreateImage(C[4],C[0],[28,118,12,24,58,58,28,56]); // Dragon
// Hide the canvas for building tile images.
$("tile").style.visibility='hidden';
Draw();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment