Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New Coder
    Join Date
    Jun 2009
    Posts
    81
    Thanks
    0
    Thanked 8 Times in 8 Posts

    simple text button-based room crawl

    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.

    Code:
    <!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
    Last edited by rdspoons; 02-29-2012 at 01:35 PM.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •