在 AI 與 Web 前端不斷融合的背景下，如何讓一個具備智能行為的 AI 應用快速上線、跨平臺運行，成為開發者關注的重點。我們通過構建一個基于 TensorFlow.js 的貪吃蛇 AI 游戲，借助 Docker Desktop 的最新特性，實現了前端即模型運行環境、即部署平臺的閉環體驗。這一實踐聚焦于兩個核心目標：一是探索 AI 游戲智能體的構建與部署流程，二是驗證 Docker 在本地 AI 應用開發與交付中的高效性與便捷性。通過容器化方式，整個貪吃蛇 AI 系統可快速運行在任意支持 Docker 的本地環境，真正做到了“即開即用、無需依賴”。

本次應用的核心是構建一個貪吃蛇 AI，通過 TensorFlow.js 實現智能決策模型，再利用 Docker 進行容器化部署。開發者只需克隆代碼并運行 Docker 命令，即可在瀏覽器中體驗 AI 驅動的游戲交互。以下是本次應用開發的詳細步驟，希望能對您有所啟發。

克隆存儲庫

git clone //github.com/dockersamples/snake-game-tensorflow-docker

安裝 Docker Desktop

小提示：Windows用戶建議選擇Linux發行版

>> 最新版本  Docker Desktop 下載 <<

快速運行

安裝 Docker Desktop 后，運行預先構建的 Docker 鏡像，并在命令提示符中執行以下命令。它將拉取鏡像并啟動一個運行 Snake-game:v1 Docker 鏡像的新容器，并在主機上公開 8080 端口。

運行以下命令來啟動應用程序：

docker compose up

接下來打開瀏覽器，訪問 //localhost:8080 查看蛇游戲的輸出并開始您的第一個游戲。

為什么要使用 Docker 來運行？

• 無需在您的機器上安裝 Nginx — Docker 會處理它。
• 游戲在任何支持 Docker 的系統上都以相同的方式運行。
• 您可以輕松地將您的游戲作為 Docker 鏡像共享，其他人只需一個命令即可運行它。

游戲邏輯

 index.html file 是游戲的基礎，定義了網頁的布局和結構。它會獲取驅動 AI 的 TensorFlow.js 庫，以及用于處理游戲邏輯的 script.js 和用于 AI 動作的 ai.js 。游戲界面簡潔實用，配備模式選擇器，可讓玩家在手動控制（使用箭頭鍵）和 AI 模式之間切換。當 AI 進行訓練時，記分牌會動態更新得分、最高分和代數。此外，游戲本身基于 HTML <canvas> 元素運行，使其具有高度的交互性。接下來，我們將探索 JavaScript 文件如何讓這款游戲栩栩如生！

文件：index.html

HTML 文件設置了游戲的結構，例如游戲畫布和控制按鈕。它還從 TensorFlow 獲取庫，代碼將進一步使用該庫來訓練貪吃蛇。

• 畫布：繪制游戲的地方。
• 模式選擇器：讓您在手動和 AI 游戲之間切換。
• TensorFlow.js：為 AI 大腦提供動力的庫！

文件：script.js

該文件處理游戲中的所有事情——繪制棋盤、移動蛇、放置水果和記錄分數。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let snake = [{ x: 5, y: 5 }];
let fruit = { x: 10, y: 10 };
let direction = { x: 1, y: 0 };
let score = 0;

• snake：蛇開始的位置。
• fruit：蘋果所在的位置。
• direction：蛇移動的方向。

游戲循環

游戲循環使游戲保持運行，更新蛇的位置，檢查碰撞并處理分數。

function gameLoopManual() {
    const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
    if (head.x === fruit.x && head.y === fruit.y) {
        score++;
        fruit = placeFruit();
    } else {
        snake.pop();
    }
    snake.unshift(head);
}

模式切換

document.getElementById('mode').addEventListener('change', function() {
    gameMode = this.value;
});

訓練人工智能

文件：ai.js

該文件創建并訓練神經網絡——學習如何玩貪吃蛇的人工智能大腦！以下三段代碼分別為定義神經網絡、優化器函數和記住自己的動作并進行自我訓練。

var movementOptions = ['left', 'forward', 'right'];
const neuralNet = tf.sequential();
neuralNet.add(tf.layers.dense({units: 256, inputShape: [5]}));
neuralNet.add(tf.layers.dense({units: 512}));
neuralNet.add(tf.layers.dense({units: 256}));
neuralNet.add(tf.layers.dense({units: 3}));

const optAdam = tf.train.adam(.001);
neuralNet.compile({
  optimizer: optAdam,
  loss: 'meanSquaredError'
});

async function trainNeuralNet(moveRecord) {
  for (var i = 0; i < moveRecord.length; i++) {
     const expected = tf.oneHot(tf.tensor1d([deriveExpectedMove(moveRecord[i])], 'int32'), 3).cast('float32');
     posArr = tf.tensor2d([moveRecord[i]]);
     await neuralNet.fit(posArr, expected, { batchSize: 3, epochs: 1 });
     expected.dispose();
     posArr.dispose();
  }
}

每場比賽結束后，人工智能都會查看發生的情況，調整其內部連接，并嘗試在下一場比賽中取得進步。

movementOptions 數組定義了蛇可能的移動方向：“左”、“前”和“右”。

使用學習率為 0.001 的 Adam 優化器編譯模型，并指定均方誤差損失函數。trainNeuralNet 函數用于使用給定的 moveRecord 數組訓練神經網絡。該函數迭代 moveRecord 數組，為預期運動創建獨熱編碼張量，并使用TensorFlow.js 的 fit 方法訓練模型。

預測下一步行動

在玩游戲時，人工智能會預測最佳動作應該是什么。

function computePrediction(input) {
  let inputs = tf.tensor2d([input]);
  const outputs = neuralNet.predict(inputs);
  return movementOptions[outputs.argMax(1).dataSync()[0]];
}

開發設置

下面介紹如何使用 Docker 設置貪吃蛇游戲的開發環境！

為了使開發更加順暢，您可以使用 Docker Volumes 來避免每次更改游戲文件時重建 Docker 鏡像。從 Snake-AI-TensorFlow-Docker 代碼所在的文件夾運行命令：

docker run -it --rm -d -p 8080:80 --name web -v ./:/usr/share/nginx/html nginx

使用以下命令檢查容器是否正在運行

harsh@Harshs-MacBook-Air snake-game-tensorflow-docker % docker ps
CONTAINER ID   IMAGE     COMMAND                  CREATED         STATUS         PORTS                  NAMES
c47e2711b2db   nginx     "/docker-entrypoint.…"   3 seconds ago   Up 2 seconds   0.0.0.0:8080->80/tcp   web

打開瀏覽器并訪問 //localhost:8080，您將看到貪吃蛇游戲的輸出。這種設置非常適合開發，因為它可以保持一切快速且動態。  

從模型訓練、容器部署到瀏覽器推理，貪吃蛇 AI 系統的實現過程不僅是一次完整的端到端 AI 應用落地探索，也展示了 Docker Desktop 與 TensorFlow.js 在輕量級 AI 開發中的協同潛力。這種“瀏覽器即平臺”的方式，使得 AI 不再是高門檻、依賴后端的大型工程，而是可以作為 Web 模塊，靈活嵌入到任意系統中運行。對于教育、演示、開發者工具以及交互式內容平臺而言，這是一種更輕巧、更可控的 AI 應用路徑，也為 Web AI 模型的快速部署提供了實際范例。未來，隨著 Docker 在 AI 本地推理支持方面的持續進化，這樣的“容器+前端AI”組合將釋放更多開發與運營可能。

慧都科技是專注軟件工程、智能制造、石油工程三大行業的數字化解決方案服務商。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。

慧都科技是Docker的中國區的合作伙伴，Docker作為DevOps部署領域的優秀產品，幫助企業通過容器化技術實現應用的快速構建。