It's pretty easy to create a state-driven simulation.

All you need to do is:
1) create an object that has a variable that will be used to hold a state function.
2) create any states that model what you want the object to be able to do.

The states themselves are nothing more than functions that utilize the this keyword to assign any resulting values to the object the function gets attached to. The this keyword will refer to the object the funtion is attached to, so the function can also access the objects properties through this.

Note: If you want to be able to replace states at will, try to keep them plug-and-play when you design them so you can mix it up. The example does this by using a function variable "state" that acts like a sinlge interface for the state functions, one that takes no arguments and returns no values.

Below is a trivial example of three miners who go to work, get tired and go home, rest up, and then do it all again.

<!doctype html>
A simple state-driven simulation
<style type='text/css'>
body {font-family:Tempus Sans ITC,Times New Roman,Times, Serif;
	background: #23292e;
	margin: 20px;
textarea {
	background: #e8ed90;
	border: 1px solid #a9ae54;
	padding: 15px;
	width: 500px;
	font-weight: bold;
	font-size: 14px;
	color: #7c7834;
td {padding-left:5px;}
#resting {width:100px;height:200px;background-color:navy;color:white;}
#athome {width:100px;height:200px;background-color:blue;color:white;}
#working {width:100px;height:200px;background-color:red;color:white;}
#goingtowork {width:200px;height:75px;background-color:red;color:white;}
#goinghome {width:200px;height:75px;background-color:blue;color:white;}
<script type="text/javascript">

/** How to make a simple state-driven simulation **/
//create a simple object template
function Miner(state,name,health){
	if(health==null)health = [1,9,10]; //[min,max,current]; = name;	//<- a few properties to be manipulted
	this.state=state;   	//<- this property is a mthod holder. It holds a state when the state is in use.

//create a buch of states that do something
//each state can replace itself with a different state as needed.
var minerstate={
	rest:function(){	//<- this state lets the miner get some energy back.
			this.state=minerstate.athome;  //<- see how the state is assigned without quotes and parentheses. It's an object (function) asignment.
	work:function(){	// <- this one governs what the miner does when at work
	gohome:function(){	// <- this is a simple transitional state
		this.statename="going home";
	athome:function(){	// <- this transitional state is conditional based
		this.statename="at home";
	gotowork:function(){	// <- another simple transition
		this.statename="going to work";;

//bad style - bunch of globals thrown togther for the display
var resting="";
var athome="";
var working="";
var goinghome="";
var goingtowork="";

function loop(){ // <- run the simulation
	for(var i=0;i<miners.length;i++){
		miners[i].state();	// <- this is what drive the simulation. It performs the current state.

		//the rest is junk for the display
		if(miners[i].statename=="resting")resting+="("+miners[i].name+" zzz)\r\n";
		if(miners[i].statename=="at home")athome+="("+miners[i].name+")\r\n";
		if(miners[i].statename=="working")working+="("+miners[i].name+" dig dig)\r\n";
		if(miners[i].statename=="going home")goinghome+="<<("+miners[i].name+" tired) ";
		if(miners[i].statename=="going to work")goingtowork+="("+miners[i].name+" hi-ho)>> ";
function display(){
	var s = ""
	for(var i=0;i<miners.length;i++){
		var n = miners[i].name;
		s+=n+" (Miner "+i+")\t is " + miners[i].statename + "...\r\n"
		+ "health = " + miners[i].health[2] + "\r\n"
		+ "wealth = " + miners[i].wealth + "\r\n\r\n";
	document.getElementsByTagName("textarea")[0].value = s;
// create some miners for the mine.
var miners=[];
miners[0] = new Miner(,"Fred");
miners[1] = new Miner(,"Mark",[2,15,5]);
miners[2] = new Miner(,"Buddy",[3,8,4]);

// let 'em loose.
<h1>A simple state-driven simulation</h1>
<!-- bad style-table based display -->
<td><textarea rows="15" cols="40"></textarea></td>
<td valign="top">
		<td align="center">resting</td><td align="center">at home</td><td align="right">going to work =></td><td align="center">working</td>
		<td id='resting' rowspan="3"></td><td id="athome" rowspan="3"></td><td id="goingtowork"></td><td id='working' rowspan="3"></td>
		<td id='goinghome'></td>
		<td align="center">resting</td><td align="center">at home</td><td align="left"><= going home</td><td align="center">working</td>
finaly, you don't have to stuff all of your states into an object like the example. You can create stand-alone functions to act as states like this:

function gotoBank(){
     this.statename="goto bank";
This creates a new gotoBank transitional state. You would need to add an atBank state before you could use it.

Remember to use the this keyword to get and set the object values, or call on any object method that needs to run (this really means the object that the function gets attached to).