game of life
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> </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>