ライフゲームの JavaScript 実装

index.html // メインページ、システムの初期化、システム操作の制御など。 canvas.js // レンダリングレイヤー、キャンバスの作成、手動描画、キャンバス更新方法など。 LifeGame.js // ロジックレイヤー、システムの作成と実行、システム操作ロジック、データ更新など。

  定数設定 = {
    width: 100, // 水平セル番号 height: 100, // 垂直セル番号 size: 4 + 1, // セルサイズ、セル間隔 1px
    speed: 200, // セルの反復速度 alive: '#000000', // セルの生存色 dead: '#FFFFFF', // ワールドカラー (セルの死色)
    data: new Map(), // システム操作データ実行、// キャンバスメソッドの更新};

  // ライフゲーム.js

  // 2 次元座標系の 1 次元線形表現 const MakeKey = (x = 0, y = 0) => y * 10000 + x;

  関数refreshWorld() {
    const next = new Map(); // 更新されたシステム操作データ // 2次元座標系のすべての要素を反復処理する IterateCells(config, (x, y) => {
      const index = MakeKey(x, y); // 座標に対応するキーを計算する
      const current = config.data.get(index); // 現在のセルの状態 // 現在のセルの周囲の生き残ったセルの数を計算する switch (borderSum(x, y)) {
        ケース2:
          // 周囲に 2 つの生きているセルがある場合、セルはそのまま残ります。
          next.set(インデックス、現在値);
          壊す;
        ケース3:
          // 周囲に 3 つの生き残ったセルがある場合、そのセルは生きています。
          next.set(インデックス、true);
          !current && config.execute(x, y, true); // ステータスが変更され、キャンバスが更新されます break;
        デフォルト：
          // 周囲の生きている細胞の数が 2 未満の場合、その細胞は死んでいます。 （命は少ない）
          // 周囲に 3 つ以上の生きている細胞がある場合、その細胞は死んでいます。 （命が多すぎる）
          次はインデックスを false に設定します。
          current && config.execute(x, y, false); // ステータスが変更され、キャンバスが更新されます break;
      }
      true を返します。
    });
    次へ戻る;
  }

  // ライフゲーム.js
  
  // システム関数を開始する startWorld() {
    stopWorld(); // 以前に開始したループを停止します // 反復速度に応じてシステムを開始し、ループ内でシステムを更新します interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);
    startup = true; // 起動フラグをオンにします return true;
  }

  // システムをシャットダウンし、現在のシステムを実行したままにします data function stopWorld() {
    clearInterval(interval); // ループを停止します。starting = false; // 開始フラグをオフにします。return true;
  }

  // ライフゲーム.js
  
  関数 borderSum(x = 0, y = 0) {
    const { 幅、高さ、データ } = config;
    合計を 0 とします。
    (j = y - 1; j <= y + 1; j++) の場合 {
      (i = x - 1; i <= x + 1; i++) の場合 {
        // 境界判定 if (i < 0 || j < 0 || i >= 幅 || j >= 高さ || (i === x && j === y)) {
          続く;
        }
        if (data.get(MakeKey(i, j))) {
          sum++; // 生き残ったセルの数を累積する}
      }
    }
    合計を返します。
  }

/**
 * 2D 座標系のすべての要素を反復処理し、コールバック関数を実行します * @param config: { width: number, height: number }
 * @param コールバック: (x: 数値、y: 数値) => ブール値
 */
const IterateCells = ({ 幅, 高さ }, コールバック) => {
  (y = 0; y < 高さ; y++) の場合 {
    (x = 0; x < 幅; x++) の場合 {
      if (コールバック && !コールバック(x, y)) {
        false を返します。
      }
    }
  }
  true を返します。
};

  // キャンバス.js
  
  関数実行(x, y, life) {
    const { size, alive, dead } = config;
    // セルの色を設定します context.fillStyle = life ? alive : dead;
    // セル間の間隔を 1px にしてセルを描画します
    context.fillRect(x * サイズ + 1、y * サイズ + 1、サイズ - 1、サイズ - 1);

    true を返します。
  }