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

本次應(yīng)用的核心是構(gòu)建一個(gè)貪吃蛇 AI，通過(guò) TensorFlow.js 實(shí)現(xiàn)智能決策模型，再利用 Docker 進(jìn)行容器化部署。開(kāi)發(fā)者只需克隆代碼并運(yùn)行 Docker 命令，即可在瀏覽器中體驗(yàn) AI 驅(qū)動(dòng)的游戲交互。以下是本次應(yīng)用開(kāi)發(fā)的詳細(xì)步驟，希望能對(duì)您有所啟發(fā)。

克隆存儲(chǔ)庫(kù)

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

安裝 Docker Desktop

小提示：Windows用戶建議選擇Linux發(fā)行版

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

快速運(yùn)行

安裝 Docker Desktop 后，運(yùn)行預(yù)先構(gòu)建的 Docker 鏡像，并在命令提示符中執(zhí)行以下命令。它將拉取鏡像并啟動(dòng)一個(gè)運(yùn)行 Snake-game:v1 Docker 鏡像的新容器，并在主機(jī)上公開(kāi) 8080 端口。

運(yùn)行以下命令來(lái)啟動(dòng)應(yīng)用程序：

docker compose up

接下來(lái)打開(kāi)瀏覽器，訪問(wèn) //localhost:8080 查看蛇游戲的輸出并開(kāi)始您的第一個(gè)游戲。

為什么要使用 Docker 來(lái)運(yùn)行？

• 無(wú)需在您的機(jī)器上安裝 Nginx — Docker 會(huì)處理它。
• 游戲在任何支持 Docker 的系統(tǒng)上都以相同的方式運(yùn)行。
• 您可以輕松地將您的游戲作為 Docker 鏡像共享，其他人只需一個(gè)命令即可運(yùn)行它。

游戲邏輯

 index.html file 是游戲的基礎(chǔ)，定義了網(wǎng)頁(yè)的布局和結(jié)構(gòu)。它會(huì)獲取驅(qū)動(dòng) AI 的 TensorFlow.js 庫(kù)，以及用于處理游戲邏輯的 script.js 和用于 AI 動(dòng)作的 ai.js 。游戲界面簡(jiǎn)潔實(shí)用，配備模式選擇器，可讓玩家在手動(dòng)控制（使用箭頭鍵）和 AI 模式之間切換。當(dāng) AI 進(jìn)行訓(xùn)練時(shí)，記分牌會(huì)動(dòng)態(tài)更新得分、最高分和代數(shù)。此外，游戲本身基于 HTML <canvas> 元素運(yùn)行，使其具有高度的交互性。接下來(lái)，我們將探索 JavaScript 文件如何讓這款游戲栩栩如生！

文件：index.html

HTML 文件設(shè)置了游戲的結(jié)構(gòu)，例如游戲畫布和控制按鈕。它還從 TensorFlow 獲取庫(kù)，代碼將進(jìn)一步使用該庫(kù)來(lái)訓(xùn)練貪吃蛇。

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

文件：script.js

該文件處理游戲中的所有事情——繪制棋盤、移動(dòng)蛇、放置水果和記錄分?jǐn)?shù)。

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：蛇開(kāi)始的位置。
• fruit：蘋果所在的位置。
• direction：蛇移動(dòng)的方向。

游戲循環(huán)

游戲循環(huán)使游戲保持運(yùn)行，更新蛇的位置，檢查碰撞并處理分?jǐn)?shù)。

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;
});

訓(xùn)練人工智能

文件：ai.js

該文件創(chuàng)建并訓(xùn)練神經(jīng)網(wǎng)絡(luò)——學(xué)習(xí)如何玩貪吃蛇的人工智能大腦！以下三段代碼分別為定義神經(jīng)網(wǎng)絡(luò)、優(yōu)化器函數(shù)和記住自己的動(dòng)作并進(jìn)行自我訓(xùn)練。

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();
  }
}

每場(chǎng)比賽結(jié)束后，人工智能都會(huì)查看發(fā)生的情況，調(diào)整其內(nèi)部連接，并嘗試在下一場(chǎng)比賽中取得進(jìn)步。

movementOptions 數(shù)組定義了蛇可能的移動(dòng)方向：“左”、“前”和“右”。

使用學(xué)習(xí)率為 0.001 的 Adam 優(yōu)化器編譯模型，并指定均方誤差損失函數(shù)。trainNeuralNet 函數(shù)用于使用給定的 moveRecord 數(shù)組訓(xùn)練神經(jīng)網(wǎng)絡(luò)。該函數(shù)迭代 moveRecord 數(shù)組，為預(yù)期運(yùn)動(dòng)創(chuàng)建獨(dú)熱編碼張量，并使用TensorFlow.js 的 fit 方法訓(xùn)練模型。

預(yù)測(cè)下一步行動(dòng)

在玩游戲時(shí)，人工智能會(huì)預(yù)測(cè)最佳動(dòng)作應(yīng)該是什么。

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

開(kāi)發(fā)設(shè)置

下面介紹如何使用 Docker 設(shè)置貪吃蛇游戲的開(kāi)發(fā)環(huán)境！

為了使開(kāi)發(fā)更加順暢，您可以使用 Docker Volumes 來(lái)避免每次更改游戲文件時(shí)重建 Docker 鏡像。從 Snake-AI-TensorFlow-Docker 代碼所在的文件夾運(yùn)行命令：

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

使用以下命令檢查容器是否正在運(yùn)行

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

打開(kāi)瀏覽器并訪問(wèn) //localhost:8080，您將看到貪吃蛇游戲的輸出。這種設(shè)置非常適合開(kāi)發(fā)，因?yàn)樗梢员３忠磺锌焖偾覄?dòng)態(tài)。  

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

慧都科技是專注軟件工程、智能制造、石油工程三大行業(yè)的數(shù)字化解決方案服務(wù)商。在軟件工程領(lǐng)域，我們提供開(kāi)發(fā)控件、研發(fā)管理、代碼開(kāi)發(fā)、部署運(yùn)維等軟件開(kāi)發(fā)全鏈路所需的產(chǎn)品，提供正版授權(quán)采購(gòu)、技術(shù)選型、個(gè)性化維保等服務(wù)，幫助客戶實(shí)現(xiàn)技術(shù)合規(guī)、降本增效與風(fēng)險(xiǎn)可控。

慧都科技是Docker的中國(guó)區(qū)的合作伙伴，Docker作為DevOps部署領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)通過(guò)容器化技術(shù)實(shí)現(xiàn)應(yīng)用的快速構(gòu)建。