概念介紹
元胞自動機（Cellular Automata），是 20 世紀 50 年代初由計算機之父馮·諾依曼（John von Neumann）為了模擬生命系統所具有的自復制功能而提出來的。
生命游戲（Game of Life），或者叫它的全稱 John Conway's Game of Life，是英國數學家約翰·康威在 1970 年代所發明的一種元胞自動機。
邏輯規則
在二維平面方格里，每個細胞有兩種狀態：存活或死亡，而下一時刻的狀態完全受它周圍 8 個細胞的狀態而定。
這個世界有三條演化規則：
- 當周圍有 2 個存活細胞時，該細胞生命狀態保持原樣；
- 當周圍有 3 個存活細胞時，該細胞為存活狀態（死亡細胞會復活）；
- 當周圍存活細胞低于 2 個時（生命數量稀少）或周圍超過 3 個存活細胞時（生命數量過多），該細胞為死亡狀態。
完整代碼
基本結構
|
1
2
3
|
index.html // 主頁面，初始化系統，控制系統運行等canvas.js // 渲染層，創建畫布，手動繪制，畫布更新方法等LifeGame.js // 邏輯層，創建運行系統，系統運行邏輯，數據更新等 |
主要實現
系統配置：定義二維平面方格尺寸，data 中以 key,value 形式存儲了所有細胞的生命狀態，execute 是 canvas.js 暴露出來的內部方法，掛載到 config 對象上。
|
1
2
3
4
5
6
7
8
9
10
|
const config = { width: 100, // 橫向細胞數量 height: 100, // 縱向細胞數量 size: 4 + 1, // 細胞大小，細胞間距 1px speed: 200, // 細胞迭代速度 alive: '#000000', // 細胞存活顏色 dead: '#FFFFFF', // 世界顏色（細胞死亡顏色） data: new Map(), // 系統運行數據 execute, // 更新畫布方法}; |
規則實現：遍歷二維平面里每個細胞，拿到當前的細胞狀態，計算其周圍存活細胞的數量，判斷其下一時刻是存活還是死亡，并將這個狀態保存下來，通過調用渲染層的更新畫布方法 execute 來更新界面顯示。這里在處理 data 數據時沒有用二維數組表示二維坐標系，而是將其轉換為一維線性表示，將數據保存在 Map 中。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
// LifeGame.js// 二維坐標系一維線性表示const MakeKey = (x = 0, y = 0) => y * 10000 + x;function refreshWorld() { const next = new Map(); // 更新后的系統運行數據 // 迭代二維坐標系所有元素 IterateCells(config, (x, y) => { const index = MakeKey(x, y); // 計算坐標對應的 key const current = config.data.get(index); // 當前細胞狀態 // 計算當前細胞周圍存活細胞的數量 switch (borderSum(x, y)) { case 2: // 當周圍有 2 個存活細胞時，該細胞保持原樣。 next.set(index, current); break; case 3: // 當周圍有 3 個存活細胞時，該細胞為存活狀態。 next.set(index, true); !current && config.execute(x, y, true); // 狀態變化，更新畫布 break; default: // 當周圍的存活細胞低于 2 個時，該細胞為死亡狀態。（生命數量稀少） // 當周圍有超過 3 個存活細胞時，該細胞為死亡狀態。（生命數量過多） next.set(index, false); current && config.execute(x, y, false); // 狀態變化，更新畫布 break; } return true; }); return next;} |
系統的啟動與停止
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// LifeGame.js// 開啟系統function startWorld() { stopWorld(); // 停止之前啟動的循環 // 根據迭代速度啟動系統，循環更新系統 interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500); starting = true; // 開啟啟動標識 return true;}// 關閉系統，當前系統運行數據保留function stopWorld() { clearInterval(interval); // 停止循環 starting = false; // 關閉啟動標識 return true;} |
計算存活細胞方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
// LifeGame.jsfunction 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++) { // 邊界判斷 if (i < 0 || j < 0 || i >= width || j >= height || (i === x && j === y)) { continue; } if (data.get(MakeKey(i, j))) { sum++; // 存活細胞數量累加 } } } return sum;} |
迭代二維坐標系方法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
/** * 迭代二維坐標系所有元素，執行回調函數 * @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;}; |
更新畫布方法
|
1
2
3
4
5
6
7
8
9
10
11
|
// canvas.jsfunction execute(x, y, life) { const { size, alive, dead } = config; // 設置細胞顏色 context.fillStyle = life ? alive : dead; // 繪制細胞，細胞間距 1px context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1); return true;} |
以上就是JavaScript 實現生命游戲的詳細內容，更多關于JavaScript 生命游戲的資料請關注服務器之家其它相關文章！
原文鏈接：https://juejin.cn/post/6954228948373143583
