ライフゲームの JavaScript 実装

ライフゲームの JavaScript 実装

コンセプト紹介

セルオートマトンとは、コンピュータの父であるジョン・フォン・ノイマンが、生体システムの自己複製機能をシミュレートするために 1950 年代初頭に提案した理論です。

ライフゲーム、または正式名称はジョン・コンウェイのライフゲームであり、1970 年代にイギリスの数学者ジョン・コンウェイによって発明されたセルオートマトンです。

論理的ルール

2 次元平面グリッドでは、各セルには「生きている」または「死んでいる」という 2 つの状態があり、次の瞬間の状態は周囲の 8 つのセルの状態によって完全に決定されます。

この世界には3つの進化のルールがあります。

  1. 周囲に生き残った細胞が 2 つある場合、細胞の生命状態は同じままです。
  2. 周囲に 3 つの生きている細胞がある場合、その細胞は生きている (死んだ細胞は復活します)。
  3. 周囲に生存しているセルが 2 個未満 (生命数が少ない) または 3 個を超える (生命数が多すぎる) 場合、セルは死んでいます。

完全なコード

バーニングフロスト/ライフゲーム

デモページ

基本構造

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

主な実装

システム構成: 2 次元平面グリッドのサイズを定義します。すべてのセルのライフ ステータスは、キーと値の形式でデータに保存されます。Execute は、canvas.js によって公開され、config オブジェクトにマウントされる内部メソッドです。

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

ルールの実装: 2 次元平面で各セルを走査し、現在のセルの状態を取得し、その周囲の生存セルの数を計算し、次の瞬間にセルが生きているか死んでいるかを判断し、この状態を保存し、レンダリング レイヤーの更新キャンバス メソッドの実行を呼び出してインターフェイスの表示を更新します。ここで、データを処理する際には、2 次元座標系を表すために 2 次元配列は使用されず、代わりに 1 次元の線形表現に変換され、データが 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座標法

/**
 * 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 を返します。
  }

以上がJavaScriptによるライフゲームの実装の詳細です。JavaScriptによるライフゲームの詳細については、123WORDPRESS.COMの関連記事もご覧ください。

以下もご興味があるかもしれません:
  • クリックナンバーゲームを実装するネイティブJS
  • js でパズルゲームを実装する
  • コメント付きのスネークゲームを実装する js
  • 2048 ゲームを実装するためのネイティブ js
  • JavaScript タイピングゲーム
  • JavaScript ジグソーパズルゲーム
  • ネイティブ js でカスタム難易度のマインスイーパ ゲームを実装する
  • Gobangゲームを実現するためのjsキャンバス
  • JavaScript を使って格闘ゲームを書く方法
  • JavaScript ベースのシンプルなマインスイーパ ゲームの実装

<<:  MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説

>>:  SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。

推薦する

MySQLインデックスの基礎となるデータ構造の詳細

目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...

Tomcatのデフォルトプログラム公開パスの使用と変更についての説明

tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...

Kubernetes を使用して Springboot または Nginx をデプロイするための詳細なチュートリアル

1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...

MySQL 最適化技術における Limit クエリの最適化分析

序文実際のビジネスでは、ページングは​​一般的なビジネス要件です。次に、制限クエリを使用します。制限...

threejs でリアルタイムポリゴン屈折を実装する方法

目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...

MySQLの共同クエリ最適化メカニズムの詳細な説明

目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...

MySQLのSQL文はインデックスを使用しません

インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...

VMware ESXi 6.0 および仮想マシンのインストール チュートリアルの展開 (画像とテキスト)

社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...

CSS設定div背景画像実装コード

コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...

webpackの遅延読み込みとプリロードの詳細な説明

目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...

ARGB、RGB、RGBAの違いと紹介

ARGB は、アルファ (透明度) チャネルが追加された RGB カラー モードであり、32 ビット...

CSS スタイルで一般的なグラフィック効果を示すサンプルコード

一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...

JS での new の手書き実装

目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...

純粋な HTML ページを送信し、パラメータを渡し、ID を確認する方法

プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...