create the game of life in javascript

To create the Game of Life in JavaScript, we will use a simple canvas and some basic JavaScript to simulate the cellular automata.

First, we need to set up the canvas in our HTML file:


<!DOCTYPE html>
<html>
  <head>
    <title>Game of Life</title>
  </head>
  <body>
    <canvas id="life" width="800" height="600"></canvas>

    <script src="life.js"></script>
  </body>
</html>
195 chars
12 lines

Next, we'll write our JavaScript code in the life.js file:


index.tsx
// Define the dimensions of the grid
const rows = 80;
const cols = 60;

// Define the size of each cell
const cellSize = 10;

// Create the canvas context and set the fill style
const canvas = document.getElementById('life');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';

// Define a 2D array to store the state of each cell (0 or 1)
let grid = [];

// Initialize the grid with random values
for (let i = 0; i < rows; i++) {
  grid[i] = [];
  for (let j = 0; j < cols; j++) {
    grid[i][j] = Math.floor(Math.random() * 2);
  }
}

// Define a function to draw the grid
function drawGrid() {
  // Iterate over each cell in the grid
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      // Set the cell's color based on its value (0 or 1)
      if (grid[i][j] === 1) {
        ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
      } else {
        ctx.clearRect(i * cellSize, j * cellSize, cellSize, cellSize);
      }
    }
  }
}

// Define a function to update the grid
function updateGrid() {
  // Create a copy of the grid
  let newGrid = grid.map(row => [...row]);

  // Iterate over each cell in the grid
  for (let i = 0; i < rows; i++) {
    for (let j = 0; j < cols; j++) {
      // Count the number of live neighbors for each cell
      let neighbors = 0;
      for (let x = -1; x <= 1; x++) {
        for (let y = -1; y <= 1; y++) {
          if (!(x === 0 && y === 0) &&
              i + x >= 0 && i + x < rows &&
              j + y >= 0 && j + y < cols &&
              grid[i + x][j + y] === 1) {
            neighbors++;
          }
        }
      }

      // Apply the rules of the Game of Life to each cell
      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;
      }
    }
  }

  // Update the grid
  grid = newGrid;
}

// Define the animation loop
function loop() {
  // Clear the canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Draw the grid
  drawGrid();

  // Update the grid
  updateGrid();

  // Request the next frame of the animation
  requestAnimationFrame(loop);
}

// Start the animation loop
requestAnimationFrame(loop);
2247 chars
90 lines

This code will create a canvas with random cells and simulate the Game of Life by updating the grid at each frame of the animation loop. The rules of the Game of Life are applied to each cell to determine its new value, and the canvas is updated to reflect the new state of the grid.

similar javascript code snippets

how to use useeffect in javascript

how to create a proxy variable in javascript

how to create fibonacci in javascript

how to parse a json string in javascript

how to use usestate in javascript

loop in javascript

create a loop in javascript

loop from 1 to 10 in javascript

create a react context in javascript

how to create a rest api in javascript

related categories