Simulation Game 4 Player

by Ron Eaglin

HTML

<h1>Simple Simulation Game</h1>
Game Settings (you can change some of the settings)<br/>
Board Length: <input type="textbox" id="bsize" size="3" value="20">
Walls (% of Board): <input type="textbox" id="pblocks" size="3" value="10">
Speed (ms/step):<input type="textbox" id="speed" size="3" value="500">
<br/><br/>
Simulators Values: (you set chance of turning left or right)<br/>
<table><tr>
<td>Player Red (<font color='red'>&oplus;</font>): </td>
<td>Left % <input type="textbox" id="aleft" size="3" value="10"> </td>
<td>Right % <input type="textbox" id="aright" size="3" value="10"></td>
</tr>
<tr>
<td>Player Green (<font color='green'>&otimes;</font>):  </td>
<td>Left % <input type="textbox" id="bleft" size="3" value="10"> </td>
<td>Right % <input type="textbox" id="bright" size="3" value="10"></td>
</tr>
<tr>
<td>Player Blue(<font color='blue'>&diams;</font>): </td>
<td>Left % <input type="textbox" id="cleft" size="3" value="10"> </td>
<td>Right % <input type="textbox" id="cright" size="3" value="10"><br/></td>
</tr>
<tr>
<td>Player Pink (<font color='purple'>&hearts;</font>):  </td>
<td>Left % <input type="textbox" id="dleft" size="3" value="10"> </td>
<td>Right % <input type="textbox" id="dright" size="3" value="10"></td>
</tr>
</table>
<br/>
<input type="button" value="Create Board" id="create" />&nbsp;&nbsp;
<input type="button" value="Play Game" id="play" />&nbsp;&nbsp;
<input type="button" value="Stop Game" id="stop" />&nbsp;&nbsp;
Number of Simulation Steps: <span id="steps"></span>

<div id="gameBoard" >
<!--- Will be populated dynamically. --->
</div>

CSS

td.empty{http://jobs.jsfiddle.net/
background-color: white;
width: 10px 
}

td.block{
background-color: black ;
width: 10px
}

div.active {
background-color: white ;
    
}

div.block {
background-color: black ;

}

div.a {
 background-color: red ;
    
}

div.b {
 background-color: green ;
   
}

board td {
background-color: #F0F0F0 ;
border: 1px solid #333333 ;
cursor: pointer ;
height: 25px ;
line-height: 25px ;
overflow: hidden ;
text-align: center ;
width: 25px ;
margin-left:30px;    
}

JavaScript

$('#create').click(function() {
    var w = Number($('#bsize').val());
    buildTable(20, w);
});

$('#play').click(function() {
    // put play code here
    playGame();
});

$('#stop').click(function() {
    // put stop play code here
    stopGame();
});

var rightArrow = '&rarr;';
var downArrow = '&darr;';
var upArrow = '&uarr;';
var redPiece = '&oplus;';
var greenPiece = '&otimes;';
var bluePiece = '&diams;';
var pinkPiece = '&hearts;';


//  Size (width) of board
var width = Number($('#bsize').val());
// Number of blocks
var nblocks = Number($('#nblocks').val());
// Global variables
var v = []; // Global array
// location of A
var ac = 1;
var ar = parseInt(Number($('#bsize').val()) * 1 / 5, 10);
// Movement of A
var aleft = Number($('#aleft').val());
var aright = Number($('#aright').val());

// location of B
var bc = 1;
var br = parseInt(Number($('#bsize').val()) * 2 / 5, 10);
// Movement of B
var bleft = Number($('#bleft').val());
var bright = Number($('#bright').val());

// location of C
var cc = 1;
var cr = parseInt(Number($('#bsize').val()) * 3 / 5, 10);
// Movement of C
var cleft = Number($('#cleft').val());
var cright = Number($('#cright').val());

// location of D
var dc = 1;
var dr = parseInt(Number($('#bsize').val()) * 4 / 5, 10);
// Movement of D
var dleft = Number($('#dleft').val());
var dright = Number($('#dright').val());


// timer for the program
var timer = 0;
var time = 0;

function randomCellType() {
    var p = Number($('#pblocks').val());
    var r = 100.0 * Math.random();
    if (r >= p) {
        return 0;
    } else {
        return -1;
    }
}

function cellID(r, c) {
    return "R" + r + "C" + c;
}

function buildTable(rowCount, columnCount) {
    // Build the markup for a given row.
    var tableHeader = "<table id='gameBoard' class='board' border='1' colsize='3'>";
    var tableFooter = "</table>";

    var rowHtml = "";
    var tableHtml = "";
    width = Number($('#bsize').val());
    for (var r = 1; r <= rowCount; r++) {
       ...