// ================================= // README // ====== // The variables underneath this header until the next header (lines x to y) can be changed to your own preferences. // // FPS = frames per second --> Number of updates you want to happen in a second. // grid --> The squares you want to fill. I made a small spaceship, but you can make any figure you like! // // WIDTH --> The number of horizontal cells // HEIGHT --> The number of vertical cells // CELLDIM --> The width and height of a cell in the visualisation // // Please tell me what you think about it! // ================================= var FPS = 3; var grid = [ [1,0,1], [0,1,1], [0,1,0] ]; var WIDTH = 20; var HEIGHT = 20; var CELLDIM = 20; // ================================= // BASIC FUNCTIONS // ================================= function geti(s) { return document.getElementById(s); } // ================================= // GLOBAL VARIABLES // ================================= var c, ctx; var gol; var fps; // ================================= // CLASSES // ================================= class GameOfLife { constructor(t, y, p, e) { this.width = t; this.height = y; this.cd = p; // cell dimensions this.grid = this.fillGrid(e); } // Returns a grid with the 2D array passed as parameter, or an empty grid fillGrid(arr2d) { var g = []; for(var i = 0; i < this.height; i++) { g[i] = []; for(var j = 0; j < this.width; j++) { if(arr2d && arr2d[i] && arr2d[i][j]) { g[i][j] = arr2d[i][j]; } else { g[i][j] = 0; } } // for j } // for i return g; } // fillGrid() // Draw the background, cells and the grid _draw() { background(); // Cells for(var i = 0; i < this.grid.length; i++) { for(var j = 0; j < this.grid[i].length; j++) { // If a cell is alive if(this.grid[i][j]) { ctx.beginPath(); ctx.fillStyle = "#222"; ctx.fillRect(j * this.cd, i * this.cd, this.cd, this.cd); ctx.closePath(); } } // for j } // for i horizontal(this); vertical(this); } // _draw() // Check how many neighbours a cell has numOfNeighbours(i, j) { var n = 0; if(this.grid[i - 1]) { if(this.grid[i - 1][j - 1]) { n++; } if(this.grid[i - 1][j]) { n++; } if(this.grid[i - 1][j + 1]) { n++; } } // if i-1 if(this.grid[i][j - 1]) { n++; } // NOT THE CENTER, THAT'S THE CELL ITSELF :D if(this.grid[i][j + 1]) { n++; } if(this.grid[i + 1]) { if(this.grid[i + 1][j - 1]) { n++; } if(this.grid[i + 1][j]) { n++; } if(this.grid[i + 1][j + 1]) { n++; } } // if i+1 return n; } // numOfNeighbours // Returns a 1 or a 0, depending if the cell needs to live or die according to the number of neighbours nextCell(c, n) { // If <2 nb or >3 nb or (2nb and not alive atm) if(n < 2 || n > 3 || (n == 2 && !c)) { return 0; } // If (2nb and alive) or 3nb else if((n == 2 && c) || n == 3) { return 1; } else { console.error("Uncaught ReferenceError: " + c + " - " + n); } } // nextCell(n) // Create new grid according to the actual grid with methods above update() { this.newGrid = this.fillGrid(); // For every cell for(var i = 0; i < this.grid.length; i++) { for(var j = 0; j < this.grid[i].length; j++) { var c = this.grid[i][j]; // Make a shortcut... var non = this.numOfNeighbours(i, j); // ...check the neighbours... var newCell = this.nextCell(c, non); // ...get a 0 or 1... this.newGrid[i][j] = newCell; // ...and put in the new grid } // for j } // for i this.grid = this.newGrid; this._draw(); } // update() } // GameOfLife // ================================= // EVENT LISTENERS // ================================= window.addEventListener("load", function() { alert("I made in the JS very clear what you can change without breaking anything (I hope ;) ). You can change the dimensions and the shape that's going around. "); // ---- Set variables c = geti("game-of-life"); ctx = c.getContext("2d"); // ---- Initialise canvas c.width = c.height = ctx.width = ctx.height = window.innerWidth; fps = 1000 / FPS; gol = new GameOfLife(WIDTH, HEIGHT, CELLDIM, grid); gen(); }); // ================================= // CANVAS FUNCTIONS // ================================= function background() { ctx.fillStyle = "#555"; ctx.fillRect(0, 0, ctx.width, ctx.height); } function horizontal(p) { for(var i = 0; i <= p.width * p.cd; i += p.cd) { ctx.beginPath(); ctx.strokeStyle = "#CCC"; ctx.lineWidth = 2; ctx.moveTo(i, 0); ctx.lineTo(i, p.height * p.cd); ctx.stroke(); ctx.closePath(); } } function vertical(p) { for(var i = 0; i <= p.height * p.cd; i += p.cd) { ctx.beginPath(); ctx.strokeStyle = "#CCC"; ctx.lineWidth = 2; ctx.moveTo(0, i); ctx.lineTo(p.width * p.cd, i); ctx.stroke(); ctx.closePath(); } } // ================================= // GAME OF LIFE FUNCTIONS // ================================= function gen() { gol.update(); setTimeout(function() { gen(); }, fps); }

Conway's Game Of Life