Multiple Run Simulation Game 4 Player

HTML

Simple Simulation Game inspired by <a href="http://www.youtube.com/watch?v=NHWjlCaIrQo" target="_new">Wargames</a><br/>
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/>
Times to Play:<input type="textbox" id="nplays" size="3" value="1" > Number Games Played: <span id="npl"></span>
<br/><br/>
Simulator 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="5"> </td>
<td>Right % <input type="textbox" id="aright" size="3" value="5"></td>
    <td><span id="rc">Red:</span></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>
<td><span id="gc">Green:</span></td>
    </tr>
<tr>
<td>Player Blue(<font color='blue'>&diams;</font>): </td>
<td>Left % <input type="textbox" id="cleft" size="3" value="15"> </td>
<td>Right % <input type="textbox" id="cright" size="3" value="15"><br/></td>
<td><span id="bc">Blue:</span></td>
    </tr>
<tr>
<td>Player Pink (<font color='purple'>&hearts;</font>):  </td>
<td>Left % <input type="textbox" id="dleft" size="3" value="20"> </td>
<td>Right % <input type="textbox" id="dright" size="3" value="20"></td>
<td><span id="pc">Pink:</span></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>
    <br/>
    Instructions on how to use...

CSS

td.empty{
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() {
    buildTable();
});

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

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

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

var rn = 0;
var gn = 0;
var bn = 0;
var pn = 0;

var nplays = Number($('#nplays').val());
var nplayed = 1;
//  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() {
    
   var rowCount = Number($('#bsize').val());
   var columnCount = 20;
    // Build the markup for a given row.
    var tableHeader = "<table id='gameBoard' class='board' border='1' colsize='3'>";
    var tableFooter =...