JavaScript 實現生命遊戲

阿新 • • 發佈：2021-04-25

概念介紹

元胞自動機（Cellular Automata），是 20 世紀 50 年代初由計算機之父馮諾依曼（John von Neumann）為了模擬生命系統所具有的自複製功能而提出來的。

生命遊戲（Game of Life），或者叫它的全稱 John Conway's Game of Life，是英國數學家約翰康威在 1970 年代所發明的一種元胞自動機。

邏輯規則

在二維平面方格里，每個細胞有兩種狀態：存活或死亡，而下一時刻的狀態完全受它周圍 8 個細胞的狀態而定。

這個世界有三條演化規則：

當週圍有 2 個存活細胞時，該細胞生命狀態保持原樣；
當週圍有 3 個存活細胞時，該細胞為存活狀態（死亡細胞會復活）；

當週圍存活細胞低於 2 個時（生命數量稀少）或周圍超過 3 個存活細胞時（生命數量過多），該細胞為死亡狀態。

完整程式碼

焚霜 / LifeGame

演示頁面

基本結構

index.html   // 主頁面，初始化系統，控制系統執行等
canvas.js    // 渲染層，建立畫布，手動繪製，畫布更新方法等
LifeGame.js  // 邏輯層，建立執行系統，系統執行邏輯，資料更新等

主要實現

系統配置：定義二維平面方格尺寸，data 中以 key,value 形式儲存了所有細胞的生命狀態，execute 是 canvas.js 暴露出來的內部方法，掛載到 config 物件上。

  const config = {
    width: 100,// 橫向細胞數量
    height: 100,// 縱向細胞數量
    size: 4 + 1,// 細胞大小，細胞間距 1px
   程式設計客棧 speed: 200,// 細胞迭代速度
    alive: '#000000',// 細胞存活顏色
    dead: '#FFFFFF',//wPpnknS 世界顏色（細胞死亡顏色）
    data: new Map(),// 系統執行資料
    execute,// 更新畫布方法
  };

規則實現：遍歷二維平面裡每個細胞，拿到當前的細胞狀態，計算其周圍存活細胞的數量，判斷其下一時刻是存活還是死亡，並將這個狀態儲存下來，通過呼叫渲染層的更新畫布方法 execute 來更新介面顯示。這裡在處理 data 資料時沒有用二維陣列表示二維座標系，而是將其轉換為一維線性表示，將資料儲存在 Map 中。

  // 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,false); // 狀態變化，更新畫布
          break;
      }
      return true;
    });
    return next;
  }

系統的啟動與停止

  // 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;wPpnknS
  }

計算存活細胞方法

  // LifeGame.js
  
  function borderSum(x = 0,y = 0) {
    const { http://www.cppcns.comwidth,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;
  }

迭代二維座標系方法

/**
 * 迭代二維座標系所有元素，執行回撥函式
 * @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)) {
        ret程式設計客棧urn false;
      }
    }
  }
  return true;
};

更新畫布方法

  // canvas.js
  
  function execute(x,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 生命遊戲的資料請關注我們其它相關文章！