Simulation Game

by ian_smithz

HTML

<h1>Simple Simulation Game</h1>
Board Length: <input type="textbox" id="bsize" size="3" value="20">
Percent of table blocks (0-20): <input type="textbox" id="pblocks" size="3" value="10">
<br/><br/>
Set Simulation Values:<br/>
Player Red (<font color='red'>&oplus;</font>): Left % <input type="textbox" id="aleft" size="3" value="10"> Right % <input type="textbox" id="aright" size="3" value="10"><br/>
Player Green (<font color='green'>&otimes;</font>):  Left % <input type="textbox" id="bleft" size="3" value="10"> Right % <input type="textbox" id="bright" size="3" value="10">
<br/><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;<div id="time"></div>
<br/><br/>
<div id="gameBoard" >
<!--- Will be populated dynamically. --->
</div>

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;
         ...