...

View Full Version : simple text button-based room crawl



rdspoons
02-29-2012, 12:08 PM
This is a very simple, but full, old-school text based button-clicking game simulating an adventure into a maze. It's is an example of using data structures and states to help keep code simple.



<!doctype html>
<html>
<head>
<title>
simple text button-based room crawl: Death-Maze
</title>
<style type='text/css'>
body {background:#000;}
.deathmaze {position:relative;width:350px;height:250px;padding:10px;
font-size:1.2em;font-family:Tempus Sans ITC, Tempus Sans, Purisa, Verdana; background:navy; color:#66ccff;padding:10px;}
.deathmaze button {width:140px;padding:5px;height:30px;background:navy;color:#66ccff;margin-bottom:5px;
border:solid 1px #66ccff;-moz-border-radius:1em 1em 1em 1em;border-radius:1em 1em 1em 1em;}
.deathmaze button:hover {background:#3333cc;}
.deathmaze .notice {position:relative;width:300;border:solid 5px #66ccff;padding:10px;margin:auto 0px;}
</style>
</head>
<body>
<div class="deathmaze">
<div id="story"></div>
<div id="buttons"></div>
</div>
<script>
var deathmaze = (function(){
/* data structures and states simplifying code*/

/*a hero and some monsters to play with*/
var hero={name:"Hero",fight:.9,hits:14},
nomonster={name:"No Monster",fight:0,hits:0},
goul={name:"a Ghoul",fight:.4,hits:12},
skeleton={name:"a Skeleton",fight:.2,hits:10},
orc={name:"an Orc",fight:.3,hits:14},
witch={name:"a Witch",fight:.2,hits:6},
rat={name:"a Rat",fight:.1,hits:4},
slime={name:"a Slime",fight:.15,hits:8};

/*you can use cloned monster objects if you dont want to see dead critters deeper in the maze*/

/*the rooms to explore. exits hold the maze of room connections*/
rooms=[];
rooms["Entrance Room"]={name:"Entrance Room",monster:nomonster,gold:0,exits:["Golden Room"]}
rooms["Golden Room"]={name:"Golden Room",monster:rat,gold:5,exits:["Red Room","Green Room"]}
rooms["Red Room"]={name:"Red Room",monster:skeleton,gold:5,exits:["Blue Room"]}
rooms["Green Room"]={name:"Green Room",monster:slime,gold:5,exits:["Black Room"]}
rooms["Blue Room"]={name:"Blue Room",monster:orc,gold:5,exits:["White Room","Silver Room"]}
rooms["Black Room"]={name:"Black Room",monster:witch,gold:5,exits:["Purple Room","Silver Room"]}
rooms["White Room"]={name:"White Room",monster:rat,gold:5,exits:["Gray Room"]}
rooms["Silver Room"]={name:"Silver Room",monster:rat,gold:5,exits:["Gray Room"]}
rooms["Purple Room"]={name:"Purple Room",monster:skeleton,gold:5,exits:["Golden Room"]}
rooms["Gray Room"]={name:"Gray Room",monster:goul,gold:5,exits:["Dark Room"]}
rooms["Dark Room"]={name:"Dark Room",monster:witch,gold:5,exits:["Light Room","Green Room"]}
rooms["Light Room"]={name:"Light Room",monster:orc,gold:5,exits:["Exit Room"]}
rooms["Exit Room"]={name:"Exit Room",monster:nomonster,gold:0,exits:[]}

/*possible states for the game and functionality*/
states={
/*movemnt state*/
move:function(n){
var m = rooms[n].monster;
if(m!=nomonster){ /*state change: use 'this' to point back to game object*/
this.show=states.fight;
this.show(n);
return;
}
var s="";
if(n == "Exit Room"){
s+="<p>Congratulations warrior, you've bested the Death-Maze!</p>"
+"<div class='notice'>Your name will be heard in story and song in the farthest reaches of the relm.</div>";
}else{
s+="You are in the "+rooms[n].name+".<br>"
s+="There is "+rooms[n].monster.name+" in the room.<br>"
for(var i=0;i<rooms[n].exits.length;i++)
s+="<br><span>You see a door to a </span> <button onclick='deathmaze.enterRoom(\""+rooms[n].exits[i]+"\")'>"+rooms[n].exits[i]+"</button>";
}
document.getElementById("buttons").innerHTML = s;
},
/*combat state*/
fight:function(n){
var m = rooms[n].monster;
var s="";
if(m==nomonster){ /*state change: use 'this' to point back to game object*/
this.show=states.move;
this.show(n);
return;
}
if(fight(m.fight) == true)
m.hits-=1;
else
hero.hits-=1;
if(hero.hits<1){
s += "<p>You were killed by "+m.name+"."
+"<br>Your corpse remains forever entombed in the bowels of the Death-Maze</p>"
+"<div>Knife pinned notice on the Raoring Boar's door: <p class='notice'>'WARRIORS! You good enuff for the Death-Maze?'</p></div>";
}else{
s += "You are in the "+n+".<br>";
s+=hero.name+" :"+hero.hits + "<br>" + m.name + " :"+m.hits;
if(m.hits<1){
/*yo could do something with the gold here*/
rooms[n].monster=nomonster;
s+="<br>The "+m.name.replace(/a |an /,"")+" is dead.";
s+="<br><button onclick='deathmaze.enterRoom(\""+n+"\")'> Examine Room </button>";
}else{
s+="<br><br><button onclick='deathmaze.enterRoom(\""+n+"\")'> Fight </button>";
}
}
document.getElementById("buttons").innerHTML = s;
}
}

/*a stateful game object*/
var game={
show:states.move
}

/*the games main function*/
function enterRoom(r)
{
game.show(r);
}

/*a combat function*/
function fight(n)
{
var r=false;
if(Math.random()>n)
r=true;
return r;
}

/*start the game*/
enterRoom("Entrance Room");

/*public interface*/
return {
enterRoom:function(n){enterRoom(n)}
}
})();
</script>
</body>
</html>


tested in ie,ff,chrome,safari,opera



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum