Simulation Game

HTML

<table>
  <tr>
    <td>
      
    </td>
  </tr>
</table>

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() {
    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;';


//  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 / 3, 10);
// location of B
var bc = 1;
var br = parseInt(Number($('#bsize').val()) * 2 / 3, 10);
// Movement of A
var aleft = Number($('#aleft').val());
var aright = Number($('#aright').val());
// Movement of B
var bleft = Number($('#bleft').val());
var bright = Number($('#bright').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++) {
        v[r] = new Array(columnCount);
        rowHtml = "<tr>";
        for (var c = 1; c <= columnCount; c++) {
            var ct = randomCellType();
            if ((ct == 0) || (c == 1)) {
                v[r][c] = 0;
                rowHtml += ("<td class=\"empty\"><div id='" + cellID(r, c) + "' class='empty'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div></td>");
            }
            else {
                v[r][c] = -1;
         ...