Conway’s Game of Life in JavaScript
Last Updated :
30 Jul, 2024
We will create Conway's Game of Life, a classic cellular automaton devised by mathematician John Conway. The game consists of a grid of cells, each of which can be in one of two states: alive or dead. The state of each cell evolves over time based on simple rules, leading to fascinating patterns and behaviors.
Prerequisites
About Conway's Game of Life
Conway's Game of Life is a fascinating cellular automaton created by mathematician John Conway. It's a game that doesn't require players; instead, it evolves based on its initial setup. Imagine a grid of cells, where each cell can either be alive or dead. Here's how the game works:
Setting Up: You start by placing living cells on the grid. This could be done randomly or following specific patterns that you choose.
Neighbors Matter: Each cell looks at its eight neighbors – those cells that are next to it horizontally, vertically, or diagonally.
Rules for Life and Death:
- Birth: If a dead cell has exactly three live neighbors, it springs to life in the next generation.
- Survival: A live cell with two or three live neighbors continues to live in the next generation.
- Death: Any cell with fewer than two live neighbors dies due to loneliness, while a cell with more than three live neighbors dies from overcrowding.
Next Generation: After applying these rules to every cell on the grid simultaneously, a new generation is born. This new layout replaces the old one, and the cycle continues.
What Happens Next: Depending on how you set things up, various outcomes are possible:
- Stable Patterns: Some configurations settle into a stable state where no further changes happen.
- Oscillation: Certain setups oscillate between different patterns, repeating over and over.
- Growth or Decay: Other configurations may grow indefinitely, stabilize into a repeating pattern, or eventually fade away.
Despite its simplicity, Conway's Game of Life showcases incredibly complex behaviors. It's been used in many fields like computer science and biology to explore emergent properties and computational systems.
Approach
- A canvas element is created with an ID of "gameCanvas" and a width of 600 pixels and height of 400 pixels. The canvas is styled with a black border.
- The script calculates the number of rows and columns based on the canvas size and a cell size of 10 pixels. A function createGrid() initializes a 2D array representing the grid. Each cell in the grid is randomly assigned a value of 1 (alive) or 0 (dead) based on a 30% chance of being alive.
- drawGrid() function clears the canvas and then iterates through the grid, drawing live cells as black squares. updateGrid() function applies Conway's Game of Life rules to update the grid based on the current state of each cell and its neighbors. It creates a new grid with the updated cell states.
- The countNeighbors(row, col) function calculates the number of live neighbors for a given cell at coordinates (row, col). It checks the eight neighboring cells and counts the live ones.
- mainLoop() is the main function that orchestrates the updating and drawing of the grid. It calls updateGrid() to update the grid based on Conway's rules, followed by drawGrid() to redraw the grid on the canvas. This loop continues as long as the isRunning flag is set to true.
- Event listeners are added to three buttons: Start, Pause, and Restart.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Conway's Game of Life</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas"
width="600"
height="400"></canvas>
<br />
<br />
<button id="startButton">Start</button>
<button id="pauseButton">Pause</button>
<button id="restartButton">Restart</button>
<script>
// Initialize canvas and context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Define cell size and grid dimensions
const cellSize = 10;
const numRows = Math.floor(canvas.height / cellSize);
const numCols = Math.floor(canvas.width / cellSize);
// Function to initialize the grid
function createGrid() {
const grid = [];
for (let i = 0; i < numRows; i++) {
grid[i] = [];
for (let j = 0; j < numCols; j++) {
grid[i][j] = Math.
random() > 0.7 ? 1 : 0; // Random initialization
}
}
return grid;
}
let grid = createGrid();
let isRunning = false;
let animationId = null;
// Function to draw the grid
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < numRows; i++) {
for (let j = 0; j < numCols; j++) {
if (grid[i][j] === 1) {
ctx.fillStyle = 'black';
ctx.fillRect(j * cellSize, i *
cellSize, cellSize, cellSize);
}
}
}
}
// Function to update the grid based on Conway's rules
function updateGrid() {
const newGrid = [];
for (let i = 0; i < numRows; i++) {
newGrid[i] = [];
for (let j = 0; j < numCols; j++) {
const neighbors = countNeighbors(i, j);
if (grid[i][j] === 1 && (neighbors < 2 || neighbors > 3)) {
newGrid[i][j] = 0;
} else if (grid[i][j] === 0 && neighbors === 3) {
newGrid[i][j] = 1;
} else {
newGrid[i][j] = grid[i][j];
}
}
}
grid = newGrid;
}
// Function to count live neighbors of a cell
function countNeighbors(row, col) {
let count = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const r = row + i;
const c = col + j;
if (r >= 0 && r < numRows && c >= 0 &&
c < numCols && !(i === 0 && j === 0)) {
count += grid[r][c];
}
}
}
return count;
}
// Main loop to update and draw the grid
function mainLoop() {
updateGrid();
drawGrid();
if (isRunning) {
animationId = requestAnimationFrame(mainLoop);
}
}
document.getElementById('startButton')
.addEventListener('click', function () {
if (!isRunning) {
isRunning = true;
mainLoop();
}
});
document.getElementById('pauseButton')
.addEventListener('click',
function () {
isRunning = false;
cancelAnimationFrame(animationId);
});
document.getElementById('restartButton')
.addEventListener('click',
function () {
isRunning = false;
cancelAnimationFrame(animationId);
grid = createGrid();
drawGrid();
});
</script>
</body>
</html>
Output:
Similar Reads
Pong Game in JavaScript
Pong game is a two-player table tennis-themed video game. The game involves two paddles and a moving ball. The players have to move paddles in an upwards or downward direction and save the ball from getting hit by the wall. If the ball hits the wall then it's a score for another player. Prerequisite
6 min read
Crack-The-Code Game using JavaScript
It is quite easy to develop with some simple mathematics. A player has to guess the 3 numbers in order to win this game by using 5 simple hints. This is going to be a very interesting game. This game is built using simple mathematics in JavaScript. Prerequisites: Basic knowledge of some front-end te
5 min read
Flappy Bird Game in JavaScript
Flappy Bird is an endless game that involves a bird that the player can control. The player has to save the bird from colliding with the hurdles like pipes. Each time the bird passes through the pipes, the score gets incremented by one. The game ends when the bird collides with the pipes or falls do
5 min read
Create a Reflex Game using JavaScript
A reflex game is a simple fun game that measures your responding speed. It is quite simple to make and understand. We will be designing a reflex game that will calculate your responding speed. The rules are simple just press the stop button when you see the change in background color, and the time y
6 min read
Pig Game Design using JavaScript
In this article, we will be explaining the steps and various logic required in making of the famous Pig Game, which is a virtual dice game. About Game: In this game, User Interface (UI) contains user/player that can do three things, they are as follows: There will be two players in this game. At the
11 min read
Conway’s Game of Life using React
In this article, we'll explore how to build an interactive version of Conway's Game of Life using React. Conway's Game of Life is a classic cellular automaton devised by mathematician John Conway. It's a fascinating simulation that demonstrates emergent complexity from simple rules. Output Preview:
4 min read
JavaScript Pair Game
In this article, we will create a Card Pair game using JavaScript. The Concentration or Memory Matching Game is mainly utilized for memory tests & concentration levels of the player. Here, the player needs to find out all the matching pairs of identical cards placed that are face-down on the boa
4 min read
Corona Fighter Game using JavaScript
In this article, we will create a covid fighter game using HTML, CSS, and JavaScript. In this game, we will create three objects the first object will represent the user which have to cross several hurdles to reach the final object. Approach: We will create the HTML layout first, style it using CSS,
6 min read
JavaScript Common Mistakes
JavaScript is an easy language to get started with, but achieving mastery takes a lot of effort, time, and patience. Beginners often make a few well-known mistakes. In this article, we’ll cover some of the most common learning mistakes people make and find out how to overcome them. Many of these tip
4 min read
Number Guessing Game using JavaScript
A Number Guessing Game is a simple game where the player tries to guess a randomly generated number within a specified range. Using JavaScript, you can create this game by generating a random number, taking user input, and providing feedback like too high or too low. PrerequisitesHTMLJavaScriptAppro
2 min read