game of life

mail@pastecode.io avatar
unknown
javascript
2 years ago
4.7 kB
3
Indexable
Never
<!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>&nbsp;</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>