世俱杯 2025

在 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 &lt;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部署领域的优秀产品，帮助企业通过容器化技术实现应用的快速构建。