掘金 人工智能 11小时前
一分钟用 MCP 上线一个 2048 小游戏
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文介绍了如何使用腾讯云代码助手 CodeBuddy 结合模型上下文协议(MCP),零代码开发并部署一个 2048 小游戏到公网。MCP 解决了 AI 模型因数据孤岛限制而无法充分发挥潜力的难题,通过 CodeBuddy 接入 EdgeOne Page MCP Server,用户只需通过对话指令,CodeBuddy 即可自动生成游戏代码文件,并部署到 EdgeOne Pages 服务器上,生成公网 URL。即使出现 Bug,也能通过对话指令快速修复并重新部署,极大地降低了 AI 辅助编程的门槛。

💡**MCP 协议**:MCP 协议旨在解决 AI 模型因数据孤岛限制而无法充分发挥潜力的难题,它为 AI 和各类工具数据之间搭建了一个标准化的桥梁,使得 AI 应用能够安全地访问和操作本地及远程数据。

🧩**CodeBuddy 接入 MCP**:通过在 CodeBuddy 对话框中点击 MCP 按钮,并在 MCP 市场搜索 EdgeOne Pages,安装对应的 MCP 服务,即可完成接入,为后续的自动化部署奠定基础。

🎮**自动生成与部署 2048 游戏**:用户只需向 CodeBuddy 发出“写一个2048的小游戏,并部署到 EdgeOne Pages”的指令,CodeBuddy 即可自动完成任务分析、技术选择、代码生成和部署等步骤,最终生成可玩的 2048 游戏公网链接。

🛠️**Bug 修复与迭代**:即使游戏存在 Bug,用户也只需通过对话向 CodeBuddy 描述问题,CodeBuddy 即可自动修复 Bug,并将修复后的代码部署为一个新的站点,实现快速迭代。

我正在参加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 开始进行游戏生成。

整体的思路如下:

    任务分析:用户要求创建一个2048小游戏并部署到EdgeOne Pages。2048是一个经典的滑动方块数字合并游戏,需要实现游戏逻辑和界面。

    技术选择:2048游戏可以使用纯HTML/CSS/JavaScript实现,不需要后端服务,适合部署到EdgeOne Pages。

    实现步骤

      创建HTML文件作为游戏入口添加CSS样式编写JavaScript游戏逻辑部署到EdgeOne Pages

    复杂度评估:这个任务涉及创建3-4个文件,复杂度适中,不需要拆分。

    工具需求

      首先需要创建游戏文件然后使用edgeone-pages-mcp的deploy-html工具部署

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

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

自动部署游戏到公网

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

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

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

修复 bug

向 CodeBuddy 提问:

有 bug,方块都在左上角。

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

现在可以畅玩 2048 游戏了。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

CodeBuddy MCP协议 AI编程 2048游戏 零代码开发
相关文章