JavaScript實現(xiàn)生命游戲的方法

這篇文章主要介紹JavaScript實現(xiàn)生命游戲的方法，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

javascript是一種什么語言

javascript是一種動態(tài)類型、弱類型的語言，基于對象和事件驅(qū)動并具有相對安全性并廣泛用于客戶端網(wǎng)頁開發(fā)的腳本語言，同時也是一種廣泛用于客戶端Web開發(fā)的腳本語言。它主要用來給HTML網(wǎng)頁添加動態(tài)功能，現(xiàn)在JavaScript也可被用于網(wǎng)絡(luò)服務(wù)器，如Node.js。

概念介紹

元胞自動機（Cellular Automata），是 20 世紀(jì) 50 年代初由計算機之父馮·諾依曼（John von Neumann）為了模擬生命系統(tǒng)所具有的自復(fù)制功能而提出來的。

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

邏輯規(guī)則

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

這個世界有三條演化規(guī)則：

1. 當(dāng)周圍有 2 個存活細胞時，該細胞生命狀態(tài)保持原樣；

2. 當(dāng)周圍有 3 個存活細胞時，該細胞為存活狀態(tài)（死亡細胞會復(fù)活）；

3. 當(dāng)周圍存活細胞低于 2 個時（生命數(shù)量稀少）或周圍超過 3 個存活細胞時（生命數(shù)量過多），該細胞為死亡狀態(tài)。
   

基本結(jié)構(gòu)

index.html   // 主頁面，初始化系統(tǒng)，控制系統(tǒng)運行等
canvas.js    // 渲染層，創(chuàng)建畫布，手動繪制，畫布更新方法等
LifeGame.js  // 邏輯層，創(chuàng)建運行系統(tǒng)，系統(tǒng)運行邏輯，數(shù)據(jù)更新等

主要實現(xiàn)

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

  const config = {
    width: 100, // 橫向細胞數(shù)量
    height: 100, // 縱向細胞數(shù)量
    size: 4 + 1, // 細胞大小，細胞間距 1px
    speed: 200, // 細胞迭代速度
    alive: '#000000', // 細胞存活顏色
    dead: '#FFFFFF', // 世界顏色（細胞死亡顏色）
    data: new Map(), // 系統(tǒng)運行數(shù)據(jù)
    execute, // 更新畫布方法
  };

規(guī)則實現(xiàn)：遍歷二維平面里每個細胞，拿到當(dāng)前的細胞狀態(tài)，計算其周圍存活細胞的數(shù)量，判斷其下一時刻是存活還是死亡，并將這個狀態(tài)保存下來，通過調(diào)用渲染層的更新畫布方法 execute 來更新界面顯示。這里在處理 data 數(shù)據(jù)時沒有用二維數(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)運行數(shù)據(jù)
    // 迭代二維坐標(biāo)系所有元素
    IterateCells(config, (x, y) => {
      const index = MakeKey(x, y); // 計算坐標(biāo)對應(yīng)的 key
      const current = config.data.get(index); // 當(dāng)前細胞狀態(tài)
      // 計算當(dāng)前細胞周圍存活細胞的數(shù)量
      switch (borderSum(x, y)) {
        case 2:
          // 當(dāng)周圍有 2 個存活細胞時，該細胞保持原樣。
          next.set(index, current);
          break;
        case 3:
          // 當(dāng)周圍有 3 個存活細胞時，該細胞為存活狀態(tài)。
          next.set(index, true);
          !current && config.execute(x, y, true); // 狀態(tài)變化，更新畫布
          break;
        default:
          // 當(dāng)周圍的存活細胞低于 2 個時，該細胞為死亡狀態(tài)。（生命數(shù)量稀少）
          // 當(dāng)周圍有超過 3 個存活細胞時，該細胞為死亡狀態(tài)。（生命數(shù)量過多）
          next.set(index, false);
          current && config.execute(x, y, false); // 狀態(tài)變化，更新畫布
          break;
      }
      return true;
    });
    return next;
  }

系統(tǒng)的啟動與停止

  // LifeGame.js
  
  // 開啟系統(tǒng)
  function startWorld() {
    stopWorld(); // 停止之前啟動的循環(huán)
    // 根據(jù)迭代速度啟動系統(tǒng)，循環(huán)更新系統(tǒng)
    interval = setInterval(() => (config.data = refreshWorld()), config.speed || 500);
    starting = true; // 開啟啟動標(biāo)識
    return true;
  }

  // 關(guān)閉系統(tǒng)，當(dāng)前系統(tǒng)運行數(shù)據(jù)保留
  function stopWorld() {
    clearInterval(interval); // 停止循環(huán)
    starting = false; // 關(guān)閉啟動標(biāo)識
    return true;
  }

計算存活細胞方法

  // 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++; // 存活細胞數(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;
};

更新畫布方法

  // canvas.js
  
  function execute(x, y, life) {
    const { size, alive, dead } = config;
    // 設(shè)置細胞顏色
    context.fillStyle = life ? alive : dead;
    // 繪制細胞，細胞間距 1px
    context.fillRect(x * size + 1, y * size + 1, size - 1, size - 1);

    return true;
  }

以上是“JavaScript實現(xiàn)生命游戲的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！