一分钟用 MCP 上线一个 2048 小游戏（CodeBuddy版）

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

你好，我是悟空。

背景

现在 AI 辅助编程越来越强大，从最开始的 Agent、Function Calling，到现在的 MCP，学习 AI 成本的降低了很多。

这次我们用 CodeBuddy + MCP 开发一个 2048 小游戏，并部署到公网上。全程不用写代码，只需要和 CodeBuddy AI 工具对话即可。

MCP 介绍

Model Context Protocol（模型上下文协议）简称为 MCP 协议。简单来说，它就是给 AI 和各类工具数据之间搭了个标准化的”桥梁”，让开发者不用再为对接问题头疼了。原理如下图所示：

MCP 主要是为了解决当前 AI 模型因数据孤岛限制，无法充分发挥潜力的难题，MCP 使得 AI 应用能够安全地访问和操作本地及远程数据，为 AI 应用提供了连接万物的接口。

CodeBuddy 接入 EdgeOne Page MCP Server

接入 MCP

如下图所示，点击 CodeBuddy 对话框的 MCP 按钮。

然后在 MCP 市场搜索 EdgeOne Pages，就能找到对应的 MCP 服务，点击安装即可。如下图所示：

安装完成后，会在一个 Json 配置文件中生成 EdgeOne Page MCP Server 的配置。

自动生成 2048 游戏

与 CodeBuddy 对话如下：

写一个2048的小游戏，并部署到 EdgeOne Pages。

CodeBuddy 开始进行游戏生成。

整体的思路如下：

1. 任务分析：用户要求创建一个2048小游戏并部署到EdgeOne Pages。2048是一个经典的滑动方块数字合并游戏，需要实现游戏逻辑和界面。
2. 技术选择：2048游戏可以使用纯HTML/CSS/JavaScript实现，不需要后端服务，适合部署到EdgeOne Pages。
3. 实现步骤：
   1. 创建HTML文件作为游戏入口
   2. 添加CSS样式
   3. 编写JavaScript游戏逻辑
   4. 部署到EdgeOne Pages
4. 复杂度评估：这个任务涉及创建3-4个文件，复杂度适中，不需要拆分。
5. 工具需求：
   1. 首先需要创建游戏文件
   2. 然后使用edgeone-pages-mcp的deploy-html工具部署

CodeBuddy 通过对话的方式生成代码文件，如下图所示：

在本地可以看到生成的 html、js、css 文件，如下图所示：2

自动部署游戏到公网

CodeBuddy 自动调用 EdgeOne Pages MCP Server 服务，将代码上传了EdgeOne Pages 服务器上，并返回了公网 URL。

image-20250510221305000

打开2048 游戏链接，就可以开始游戏了。

但是发现了 Bug，数字只出现在左上角，根本就玩不了。我们让 CodeBuddy 修复下 Bug。

修复 bug

向 CodeBuddy 提问：

有 bug，方块都在左上角。

然后 CodeBuddy 就会修复 Bug，并将修复后的代码部署为一个新的站点。

现在可以畅玩 2048 游戏了。