コンセプト紹介セルオートマトンとは、コンピュータの父であるジョン・フォン・ノイマンが、生体システムの自己複製機能をシミュレートするために 1950 年代初頭に提案した理論です。 ライフゲーム、または正式名称はジョン・コンウェイのライフゲームであり、1970 年代にイギリスの数学者ジョン・コンウェイによって発明されたセルオートマトンです。 論理的ルール2 次元平面グリッドでは、各セルには「生きている」または「死んでいる」という 2 つの状態があり、次の瞬間の状態は周囲の 8 つのセルの状態によって完全に決定されます。 この世界には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の関連記事もご覧ください。 以下もご興味があるかもしれません:
|
<<: MySQLデータベース設計:Pythonを使ったスキーマ操作方法の詳しい解説
>>: SpringbootはDockerデプロイメントを統合し、Dockerイメージを構築する2つの方法を実装します。
目次1. インデックスの種類1. B+ツリー2. MyISAM と InnoDB の B+ ツリー ...
tomcat7 のデフォルトのプログラム公開パスは tomcat/webapps/ROOT/ です。...
1 はじめに「Maven がワンクリックで Springboot を Docker リポジトリにデプ...
序文実際のビジネスでは、ページングは一般的なビジネス要件です。次に、制限クエリを使用します。制限...
目次序文ステップ1: セットアップと前方屈折ステップ2: 反射とフレネル方程式ステップ3: 多面屈折...
目次MySQL フェデレーテッド クエリ実行戦略。実行計画フェデレーテッドクエリオプティマイザーMy...
インデックス集約を使用しない MySQL クエリご存知のとおり、インデックスを追加することはクエリ速...
社内には以前からアイドル状態だった、構成の整ったサーバーがあったので、EXSI 6.0 を使って複数...
効果: css: .s_type { 境界線: なし; 境界線の半径: 5px; 背景色: #f3f...
コンポーネントに背景画像コントロールを追加するには、次の 2 つの手順だけが必要です。 <表示...
目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...
ARGB は、アルファ (透明度) チャネルが追加された RGB カラー モードであり、32 ビット...
一般的な基本グラフィックと私が遭遇するいくつかの小さなアイコンについて簡単に説明します。以下は CS...
目次1 新しいオペレータの紹介2 新しいものは何をしましたか? 3 新しい演算子の実装をシミュレート...
プロジェクトにはアンケートが必要ですが、クライアントはアンケートのタイトルが純粋なHTMLタグでなけ...