JavaScript 實(shí)現(xiàn)生命游戲
元胞自動(dòng)機(jī)(Cellular Automata),是 20 世紀(jì) 50 年代初由計(jì)算機(jī)之父馮·諾依曼(John von Neumann)為了模擬生命系統(tǒng)所具有的自復(fù)制功能而提出來(lái)的。
生命游戲(Game of Life),或者叫它的全稱 John Conway’s Game of Life,是英國(guó)數(shù)學(xué)家約翰·康威在 1970 年代所發(fā)明的一種元胞自動(dòng)機(jī)。
邏輯規(guī)則在二維平面方格里,每個(gè)細(xì)胞有兩種狀態(tài):存活或死亡,而下一時(shí)刻的狀態(tài)完全受它周?chē)?8 個(gè)細(xì)胞的狀態(tài)而定。
這個(gè)世界有三條演化規(guī)則:
當(dāng)周?chē)?2 個(gè)存活細(xì)胞時(shí),該細(xì)胞生命狀態(tài)保持原樣; 當(dāng)周?chē)?3 個(gè)存活細(xì)胞時(shí),該細(xì)胞為存活狀態(tài)(死亡細(xì)胞會(huì)復(fù)活); 當(dāng)周?chē)婊罴?xì)胞低于 2 個(gè)時(shí)(生命數(shù)量稀少)或周?chē)^(guò) 3 個(gè)存活細(xì)胞時(shí)(生命數(shù)量過(guò)多),該細(xì)胞為死亡狀態(tài)。 完整代碼焚霜 / LifeGame
演示頁(yè)面
基本結(jié)構(gòu)
index.html // 主頁(yè)面,初始化系統(tǒng),控制系統(tǒng)運(yùn)行等canvas.js // 渲染層,創(chuàng)建畫(huà)布,手動(dòng)繪制,畫(huà)布更新方法等LifeGame.js // 邏輯層,創(chuàng)建運(yùn)行系統(tǒng),系統(tǒng)運(yùn)行邏輯,數(shù)據(jù)更新等主要實(shí)現(xiàn)
系統(tǒng)配置:定義二維平面方格尺寸,data 中以 key,value 形式存儲(chǔ)了所有細(xì)胞的生命狀態(tài),execute 是 canvas.js 暴露出來(lái)的內(nèi)部方法,掛載到 config 對(duì)象上。
const config = { width: 100, // 橫向細(xì)胞數(shù)量 height: 100, // 縱向細(xì)胞數(shù)量 size: 4 + 1, // 細(xì)胞大小,細(xì)胞間距 1px speed: 200, // 細(xì)胞迭代速度 alive: ’#000000’, // 細(xì)胞存活顏色 dead: ’#FFFFFF’, // 世界顏色(細(xì)胞死亡顏色) data: new Map(), // 系統(tǒng)運(yùn)行數(shù)據(jù) execute, // 更新畫(huà)布方法 };
規(guī)則實(shí)現(xiàn):遍歷二維平面里每個(gè)細(xì)胞,拿到當(dāng)前的細(xì)胞狀態(tài),計(jì)算其周?chē)婊罴?xì)胞的數(shù)量,判斷其下一時(shí)刻是存活還是死亡,并將這個(gè)狀態(tài)保存下來(lái),通過(guò)調(diào)用渲染層的更新畫(huà)布方法 execute 來(lái)更新界面顯示。這里在處理 data 數(shù)據(jù)時(shí)沒(méi)有用二維數(shù)組表示二維坐標(biāo)系,而是將其轉(zhuǎn)換為一維線性表示,將數(shù)據(jù)保存在 Map 中。
// LifeGame.js // 二維坐標(biāo)系一維線性表示 const MakeKey = (x = 0, y = 0) => y * 10000 + x; function refreshWorld() { const next = new Map(); // 更新后的系統(tǒng)運(yùn)行數(shù)據(jù) // 迭代二維坐標(biāo)系所有元素 IterateCells(config, (x, y) => { const index = MakeKey(x, y); // 計(jì)算坐標(biāo)對(duì)應(yīng)的 key const current = config.data.get(index); // 當(dāng)前細(xì)胞狀態(tài) // 計(jì)算當(dāng)前細(xì)胞周?chē)婊罴?xì)胞的數(shù)量 switch (borderSum(x, y)) {case 2: // 當(dāng)周?chē)?2 個(gè)存活細(xì)胞時(shí),該細(xì)胞保持原樣。 next.set(index, current); break;case 3: // 當(dāng)周?chē)?3 個(gè)存活細(xì)胞時(shí),該細(xì)胞為存活狀態(tài)。 next.set(index, true); !current && config.execute(x, y, true); // 狀態(tài)變化,更新畫(huà)布 break;default: // 當(dāng)周?chē)拇婊罴?xì)胞低于 2 個(gè)時(shí),該細(xì)胞為死亡狀態(tài)。(生命數(shù)量稀少) // 當(dāng)周?chē)谐^(guò) 3 個(gè)存活細(xì)胞時(shí),該細(xì)胞為死亡狀態(tài)。(生命數(shù)量過(guò)多) next.set(index, false); current && config.execute(x, y, false); // 狀態(tài)變化,更新畫(huà)布 break; } return true; }); return next; }
系統(tǒng)的啟動(dòng)與停止
// LifeGame.js // 開(kāi)啟系統(tǒng) function startWorld() { stopWorld(); // 停止之前啟動(dòng)的循環(huán) // 根據(jù)迭代速度啟動(dòng)系統(tǒng),循環(huán)更新系統(tǒng) interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500); starting = true; // 開(kāi)啟啟動(dòng)標(biāo)識(shí) return true; } // 關(guān)閉系統(tǒng),當(dāng)前系統(tǒng)運(yùn)行數(shù)據(jù)保留 function stopWorld() { clearInterval(interval); // 停止循環(huán) starting = false; // 關(guān)閉啟動(dòng)標(biāo)識(shí) return true; }
計(jì)算存活細(xì)胞方法
// 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++) {// 邊界判斷if (i < 0 || j < 0 || i >= width || j >= height || (i === x && j === y)) { continue;}if (data.get(MakeKey(i, j))) { sum++; // 存活細(xì)胞數(shù)量累加} } } return sum; }
迭代二維坐標(biāo)系方法
/** * 迭代二維坐標(biāo)系所有元素,執(zhí)行回調(diào)函數(shù) * @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;};
更新畫(huà)布方法
// canvas.js function execute(x, y, life) { const { size, alive, dead } = config; // 設(shè)置細(xì)胞顏色 context.fillStyle = life ? alive : dead; // 繪制細(xì)胞,細(xì)胞間距 1px context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1); return true; }
以上就是JavaScript 實(shí)現(xiàn)生命游戲的詳細(xì)內(nèi)容,更多關(guān)于JavaScript 生命游戲的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. 解決vue頁(yè)面刷新,數(shù)據(jù)丟失的問(wèn)題2. python 讀txt文件,按‘,’分割每行數(shù)據(jù)操作3. python logging.info在終端沒(méi)輸出的解決4. vue路由分文件拆分管理詳解5. vue+vuex+axios從后臺(tái)獲取數(shù)據(jù)存入vuex,組件之間共享數(shù)據(jù)操作6. 詳解android adb常見(jiàn)用法7. SpringBoot使用Captcha生成驗(yàn)證碼8. android studio實(shí)現(xiàn)簡(jiǎn)單的計(jì)算器(無(wú)bug)9. android 控件同時(shí)監(jiān)聽(tīng)單擊和雙擊實(shí)例10. Python 忽略文件名編碼的方法
