game of life
unknown
javascript
3 years ago
4.7 kB
3
Indexable
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding: 0;
margin: 0;
}
#content{
width: 100%;
height: 100%;
}
table{
padding: 0;
margin: 0;
border-collapse: collapse;
table-layout: fixed;
}
table tr{
padding: 0;
margin: 0;
line-height: 4px;
}
table tr td{
padding: 0;
margin: 0;
width: 4px;
border: 1px solid black;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="content">
</div>
<script>
var WIDTH = 196;
var HEIGHT = 196;
var BLACK = 'rgb(0, 0, 0)';
var ARRAY = [];
$( document ).ready( function () {
//Generate sandBox
var tTable = $('<table></table>');
for(var col = 0; col < WIDTH; col++)
{
ARRAY[col] = [];
var tCol = $('<tr></tr>');
for(var row = 0; row < HEIGHT; row++)
{
ARRAY[col][row] = 0;
var tRow = $('<td> </td>');
tCol.append(tRow);
}
tTable.append(tCol);
}
$('#content').append(tTable);
//Initialize cell alive
for(var col = 0; col < WIDTH; col++)
{
for(var row = 0; row < HEIGHT; row++)
{
ARRAY[col][row] = Rand() === 1 /*|| Rand() === 10 */? 1 : 0;
}
}
//Draw sandBox
for(var col = 0; col < WIDTH; col++)
{
for(var row = 0; row < HEIGHT; row++)
{
$(tTable[0].rows[col].cells[row]).css('background-color', ARRAY[col][row] === 1 ? 'black' : 'white');
}
}
//Evolve cycle
setInterval(function() {
for(var col = 0; col < WIDTH; col++)
{
for(var row = 0; row < HEIGHT; row++)
{
var isAlive= false;
var wasAlive = $(tTable[0].rows[col].cells[row]).css('background-color') === BLACK;
if(wasAlive)
{
var nearbyCellAlive = 0;
if(col < WIDTH-1 && row < WIDTH-1 && $(tTable[0].rows[col+1].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row < WIDTH-1 && $(tTable[0].rows[col+0].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && row < WIDTH-1 && $(tTable[0].rows[col-1].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && $(tTable[0].rows[col-1].cells[row+0]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && row > 1 && $(tTable[0].rows[col-1].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row > 1 && $(tTable[0].rows[col+0].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row > 1 && col < WIDTH-1 && $(tTable[0].rows[col+1].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col < WIDTH-1 && $(tTable[0].rows[col+1].cells[row+0]).css('background-color') === BLACK) nearbyCellAlive++;
if(nearbyCellAlive === 2 || nearbyCellAlive === 3)
{
//she stay alive
}
else
{
//she died
ARRAY[col][row] = 0;
}
}
else
{
var nearbyCellAlive = 0;
if(col < WIDTH-1 && row < WIDTH-1 && $(tTable[0].rows[col+1].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row < WIDTH-1 && $(tTable[0].rows[col+0].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && row < WIDTH-1 && $(tTable[0].rows[col-1].cells[row+1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && $(tTable[0].rows[col-1].cells[row+0]).css('background-color') === BLACK) nearbyCellAlive++;
if(col > 1 && row > 1 && $(tTable[0].rows[col-1].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row > 1 && $(tTable[0].rows[col+0].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(row > 1 && col < WIDTH-1 && $(tTable[0].rows[col+1].cells[row-1]).css('background-color') === BLACK) nearbyCellAlive++;
if(col < WIDTH-1 && $(tTable[0].rows[col+1].cells[row+0]).css('background-color') === BLACK) nearbyCellAlive++;
if(nearbyCellAlive === 3)
{
ARRAY[col][row] = 1;
}
}
}
}
for(var col = 0; col < WIDTH; col++)
{
for(var row = 0; row < HEIGHT; row++)
{
$(tTable[0].rows[col].cells[row]).css('background-color', ARRAY[col][row] === 1 ? 'black' : 'white');
}
}
}, 1500);
});
function Rand() { return Math.floor(Math.random()*(15-1+1)+1); }
</script>
</body>
</html>