JavaScript implementation of the Game of Life

index.html // Main page, initialize the system, control system operation, etc. canvas.js // Rendering layer, create canvas, manually draw, canvas update method, etc. LifeGame.js // Logic layer, create and run system, system operation logic, data update, etc.

  const config = {
    width: 100, // horizontal cell number height: 100, // vertical cell number size: 4 + 1, // cell size, cell spacing 1px
    speed: 200, // cell iteration speed alive: '#000000', // cell survival color dead: '#FFFFFF', // world color (cell death color)
    data: new Map(), // System operation data execute, // Update canvas method};

  // LifeGame.js

  // One-dimensional linear representation of a two-dimensional coordinate system const MakeKey = (x = 0, y = 0) => y * 10000 + x;

  function refreshWorld() {
    const next = new Map(); // Updated system operation data // Iterate all elements of the two-dimensional coordinate system IterateCells(config, (x, y) => {
      const index = MakeKey(x, y); // Calculate the key corresponding to the coordinate
      const current = config.data.get(index); // Current cell state // Calculate the number of surviving cells around the current cell switch (borderSum(x, y)) {
        case 2:
          // When there are 2 live cells around, the cell remains as is.
          next.set(index, current);
          break;
        case 3:
          // When there are 3 surviving cells around it, the cell is alive.
          next.set(index, true);
          !current && config.execute(x, y, true); // Status changes, update canvas break;
        default:
          // When the number of living cells around it is less than 2, the cell is dead. (Life is scarce)
          // When there are more than 3 living cells around, the cell is dead. (Too many lives)
          next.set(index, false);
          current && config.execute(x, y, false); // Status changes, update canvas break;
      }
      return true;
    });
    return next;
  }

  // LifeGame.js
  
  // Start the system function startWorld() {
    stopWorld(); // Stop the previously started loop // Start the system according to the iteration speed and update the system in a loop interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);
    starting = true; // Turn on the startup flag return true;
  }

  // Shut down the system, and keep the current system running data function stopWorld() {
    clearInterval(interval); // Stop the loop starting = false; // Turn off the start flag return true;
  }

  // LifeGame.js
  
  function borderSum(x = 0, y = 0) {
    const { width, height, data } = config;
    let sum = 0;
    for (let j = y - 1; j <= y + 1; j++) {
      for (let i = x - 1; i <= x + 1; i++) {
        // Boundary judgment if (i < 0 || j < 0 || i >= width || j >= height || (i === x && j === y)) {
          continue;
        }
        if (data.get(MakeKey(i, j))) {
          sum++; // Accumulate the number of surviving cells}
      }
    }
    return sum;
  }

/**
 * Iterate all elements of the 2D coordinate system and execute the callback function* @param config: { width: number, height: number }
 * @param callback: (x: number, y: number) => boolean
 */
const IterateCells = ({ width, height }, callback) => {
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      if (callback && !callback(x, y)) {
        return false;
      }
    }
  }
  return true;
};

  // canvas.js
  
  function execute(x, y, life) {
    const { size, alive, dead } = config;
    // Set cell color context.fillStyle = life ? alive : dead;
    // Draw cells with a spacing of 1px between cells
    context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1);

    return true;
  }