Eloquent-JavaScript-ES/code/solutions/18_3_conways_game_of_life.html at master · Eloquent-JavaScript-Espanol/Eloquent-JavaScript-ES

Repository navigation

History

<!doctype html>

<button id="next">Next generation</button>

const width = 30, height = 15;

// I will represent the grid as an array of booleans.

let gridNode = document.querySelector("#grid");

// This holds the checkboxes that display the grid in the document.

let checkboxes = [];

for (let y = 0; y < height; y++) {

for (let x = 0; x < width; x++) {

let box = document.createElement("input");

box.type = "checkbox";

gridNode.appendChild(box);

checkboxes.push(box);

}

gridNode.appendChild(document.createElement("br"));

}

function gridFromCheckboxes() {

return checkboxes.map(box => box.checked);

}

function checkboxesFromGrid(grid) {

grid.forEach((value, i) => checkboxes[i].checked = value);

}

function randomGrid() {

let result = [];

for (let i = 0; i < width * height; i++) {

result.push(Math.random() < 0.3);

}

return result;

}

checkboxesFromGrid(randomGrid());

// This does a two-dimensional loop over the square around the given

// x,y position, counting all fields that have a cell but are not the

// center field.

function countNeighbors(grid, x, y) {

let count = 0;

for (let y1 = Math.max(0, y - 1); y1 <= Math.min(height - 1, y + 1); y1++) {

for (let x1 = Math.max(0, x - 1); x1 <= Math.min(width - 1, x + 1); x1++) {

if ((x1 != x || y1 != y) && grid[x1 + y1 * width]) {

count++;

}

return count;

}

function nextGeneration(grid) {

let newGrid = new Array(width * height);

for (let y = 0; y < height; y++) {

for (let x = 0; x < width; x++) {

let neighbors = countNeighbors(grid, x, y);

let offset = x + y * width;

if (neighbors < 2 || neighbors > 3) {

newGrid[offset] = false;

} else if (neighbors == 2) {

newGrid[offset] = grid[offset];

} else {

newGrid[offset] = true;

}

return newGrid;

}

function turn() {

checkboxesFromGrid(nextGeneration(gridFromCheckboxes()));

}

document.querySelector("#next").addEventListener("click", turn);

let running = null;

document.querySelector("#run").addEventListener("click", () => {

if (running) {

clearInterval(running);

running = null;

} else {

running = setInterval(turn, 400);

}

});

</script>

FilesExpand file tree

18_3_conways_game_of_life.html

Latest commit

History

18_3_conways_game_of_life.html

File metadata and controls