I've created a simple life simulation game and I'm looking for ways to optimize the code.
Any suggestions on how to make the code cleaner?
jsfiddle: https://jsfiddle.net/04vazdrb/
/*
JavaScript Implementation of Conway's Game Of Life
*/
window.onload = function() {
var gridHeight = 400;
var gridWidth = 400;
var theGrid = createCellArray(gridWidth);
var mirrorGrid = createCellArray(gridWidth);
var genCounter = 0;
seed();
tick();
//main loop
function tick() {
drawGrid();
updateGrid();
counter();
requestAnimationFrame(tick);
}
/* Returns an array with n elements and initializes an empty
nested array in each element using a FOR loop.
*/
function createCellArray(rows) {
var arr = [];
for (var i = 0; i < rows; i++) {
arr[i] = [];
}
return arr;
}
// Populating and initializing the grid randomly.
function seed() {
// Iterate through rows
for (var j = 0; j < gridHeight; j++) {
// Iterate through columns
for (var k = 0; k < gridWidth; k++) {
// Generate a random binary number between 0 and 1
var randomBinary = Math.floor(Math.random() * 2);
// Set the state of the cell
theGrid[j][k] = randomBinary;
}
}
}
// Draw each cell in the grid as a pixel on a Canvas
function drawGrid() {
var c = document.getElementById("gridCanvas");
var ctx = c.getContext("2d"); // Get the canvas context
ctx.clearRect(0, 0, 400, 400); // Clear the canvas before each redraw
// Iterate through rows
for (var j = 1; j < gridHeight; j++) {
// Iterate through columns
for (var k = 1; k < gridWidth; k++) {
if (theGrid[j][k] === 1) { // Alive cell
ctx.fillStyle = "#71bc4a"; // Green color
ctx.fillRect(j, k, 1, 1); // Fill a cell
}
}
}
}
// Update the grid based on the game rules
function updateGrid() {
// Iterate through rows
for (var j = 1; j < gridHeight - 1; j++) {
// Iterate through columns
for (var k = 1; k < gridWidth - 1; k++) {
var totalCells = 0;
// Add up the total values for the surrounding cells
totalCells += theGrid[j - 1][k - 1]; // Top left
totalCells += theGrid[j - 1][k]; // Top center
totalCells += theGrid[j - 1][k + 1]; // Top right
totalCells += theGrid[j][k - 1]; // Middle left
totalCells += theGrid[j][k + 1]; // Middle right
totalCells += theGrid[j + 1][k - 1]; // Bottom left
totalCells += theGrid[j + 1][k]; // Bottom center
totalCells += theGrid[j + 1][k + 1]; // Bottom right
// Apply the rules to each cell
if (theGrid[j][k] === 0) {
switch (totalCells) {
case 3:
// If cell is dead and has 3 neighbors, switch it on
mirrorGrid[j][k] = 1;
break;
default:
mirrorGrid[j][k] = 0; // Otherwise leave it dead
}
// Apply rules to living cell
} else if (theGrid[j][k] === 1) {
switch (totalCells) {
case 0:
case 1:
mirrorGrid[j][k] = 0; // Die of loneliness
break;
case 2:
case 3:
mirrorGrid[j][k] = 1; // Carry on living
break;
case 4:
case 5:
case 6:
case 7:
case 8:
mirrorGrid[j][k] = 0; // Die of overcrowding
break;
default:
mirrorGrid[j][k] = 0; //
}
}
}
}
// Iterate through rows
for (var j = 0; j < gridHeight; j++) {
// Iterate through columns
for (var k = 0; k < gridWidth; k++) {
// Copy mirrorGrid to theGrid
theGrid[j][k] = mirrorGrid[j][k];
}
}
}
// Generation counter
function counter() {
genCounter++;
document.getElementById("generationCount").innerHTML = "Generation: " + genCounter;
}
}