基于CodeBuddy的Craft完成一个数字华容道的小游戏

参考

CodeBuddy，AI 时代的智能编程伙伴

插件功能入门

总结

本文主要基于CodeBuddy的Craft 完成一个数字华容道的小游戏，如果读者还不清楚怎么安装，在本文的前面附上了CodeBuddy 编程助手的安装步骤。读者可以根据需求自行确定从那开始。

新手友好篇-关于CodeBuddy 编程助手

智能代码助手简介

代码助手可以快速的帮我们补充代码，修改代码，添加注释，翻译中英文，起变量函数名字等操作，十分的友好，这类代码助手现阶段有较多的产品，比如：

CodeBuddy 编程助手
MarsCode编程助手
Baidu Comate智能代码助手
GitHub Copilot
通义灵码
Bito

本文主要基于CodeBuddy，AI 时代的智能编程伙伴进行高效代码编程体验，let’s go!!!

腾讯云代码助手 CodeBuddy简介

腾讯云代码助手是由腾讯云自研的一款开发编程提效辅助工具，开发者可以通过插件的方式将腾讯云代码助手安装到编辑器中辅助编程工作（VS Code 或者 JetBrians 系列 IDE）；

而腾讯云代码助手插件将提供：自动补全代码、根据注释生成代码、代码解释、生成测试代码、转换代码语言、技术对话等能力。通过腾讯云代码助手，开发者可以更高效地解决实际编程问题，提高编程效率和代码质量。。

本地 IDE 中快速安装及使用

在 Visual Studio Code 中安装

快速安装：

1.单击连接:腾讯云代码助手

2.单击在 Visual Studio Code中安装，弹出的提示框中选择打开Visual Stidio Code，

3.在打开的Visual Studio Code中单击Install 安装，并按照VScode的要求，选择信任即可

4.单击login登录，弹出登录页面

登录页面

5.在该页面登录即可，然后单击打开IDE继续使用

6.登录后的页面如下

插件功能入门

更多功能请参考插件功能入门参考，本文不一一展开，接下来从3个方面使用CodeBuddy ，看看对工作效率的提升。

CodeBuddy提供的一系列的对话快捷指令

在对话输入框中，输入 / 或 @ 调用预置的快捷指令：
/clear：清空当前会话。
/comments：为所选的代码添加文档注释。
/new-notebook：创建一个新的 Jupyter 笔记本。
/explain：解释所选代码的工作原理。
/fix：针对所选代码中的问题提出修复方案。
/tests：为所选代码生成单元测试。
/name-var：变量命名。
/cr：为所选代码和本地提交的 Diff 提出评审方案。
/help：查看使用指南。
@vscode：询问 VS Code。
@terminal：询问如何在终端中执行某些操作。
@workspace：询问您的工作空间，将自动引用当前代码。

环境准备篇-EdgeOne / EdgeOne Pages / EdgeOne Pages MCP

系统规划

用过CodeBuddy的朋友们，都知道尽管CodeBuddy的Craft可以完整的从0到1的实现一个小项目，但作为一个有超过1个月实战经验的码农，我是必须动用智慧做一下规划滴。

目标：采用原型模型，快速上线一个数字华容道的小游戏
步骤：
1.搭建基础环境，包括vscode，CodeBuddy编程助手
2.开发技术选型：基于html，css，javascript三件套，可以做响应式布局适配
3.确定项目上线的环境，经过研究，使用腾讯云的EdgeOne 和EdgeOne Pages
4.如何部署代码上线，采用EdgeOne Pages MCP。

EdgeOne 与EdgeOne Pages简介与使用

腾讯云的EdgeOne Pages功能基于EdgeOne边缘安全加速，提供了静动态WEB平台的部署。EdgeOne是腾讯云最近几年比较力推的服务，提供国内版和海外版。基于EdgeOne Pages 可以快速部署一套静态或动态网站！

EdgeOne新增站点并实现页面部署

EdgeOne的地址如下：

https://console.cloud.tencent.com/edgeone

添加站点后，有域名接入和无域名接入两种

购买了一个月的域名，并成功接入，花费9.9元

稍等片刻，控制台的站点列表中，会显示当前域名

提示：可以不用添加域名，我添加域名后，要使用自定义的域名还需要备案，备案的时候还需要购买云服务器，直接使用腾讯云EdgeOne提供的域名就可以了。。。

在EdgeOne中提供了一个Pages的功能，在该功能中，可以创建项目，选择模板，然后部署

部署后的项目testdemo单击预览即可查看到

EdgeOne Pages实现页面部署

地址如下

https://edgeone.ai/products/pages

进入会，按照要求注册登录即可

登录后，可以切换en为中文，这个页面和EdgeOne很像，但不一样

EdgeOne的链接
https://console.cloud.tencent.com/edgeone/pages
EdgeOne Pages中的链接
https://console.tencentcloud.com/edgeone/pages

创建项目有三种方式，具体创建过程按照提示就可以，然后依然可以通过公网访问，如下。

这样，如果完成了项目，就可以直接上线了。

同时为了支持MCP的调用，创建一个API key

EdgeOne Pages MCP安装

采用EdgeOne Pages MCP完成生成的项目自动部署到EdgeOne Pages

在vscode的CodeBuddy中单击MCP的图标，然后安装

安装完毕如下

添加EdgeOne Pages的token

{
  "mcpServers": {
    "edgeone-pages-mcp": {
      "command": "npx",
      "args": [
        "edgeone-pages-mcp"
      ],
      "env": {
        "EDGEONE_PAGES_API_TOKEN": "VJ1AXevDxxxxxxxxxxbvU=",
        "EDGEONE_PAGES_PROJECT_NAME": ""
      }
    }
  }
}

开始提问：

edgeone-pages-mcp MCP Server 已经安装完成，通过使用工具之一来演示服务器的功能

输出如下：

单击部署的页面URL，如下：

开发篇-基于CodeBuddy的Craft完成一个数字华容道的小游戏

环境准备好后，写一个提示词吧

✅ 提示词：生成网页版《数字华容道》益智游戏界面

目标描述：
我希望你基于以下说明和规则，创建一个网页版的《数字华容道》益智游戏。该游戏应支持多种尺寸的棋盘（3×3、4×4、5×5），提供良好的用户交互体验，并具备以下功能特性：
支持选择不同难度进行初始化（简单 / 中等 / 困难）
点击相邻数字与空格交换位置
响应式布局，适配不同设备屏幕
移动动画效果，增强可视化体验
实时记录移动步数和用时
支持手动设置初始布局
自动验证手动设置的布局是否可解
内置智能求解器（A*算法），逐步展示解决方案
详细规则如下：
游戏面板由 n×n 的方格组成（支持 3×3、4×4、5×5）undefined每个方格包含 1 到 n²-1 的数字，以及一个空格undefined玩家只能通过将数字移动到相邻的空格来重新排列数字undefined当所有数字按顺序排列（1 到 n²-1），且空格在最后时，游戏获胜
初始化难度选项：
简单：1-5 步随机打乱
中等：5-50 步随机打乱
困难：50-500 步随机打乱
玩法技巧说明（可选显示区域）：
观察目标数字到目的地的最短路径
提前规划空格的移动路线
多步思考，避免无效来回移动
布局可解性验证条件：
奇数阶（3×3、5×5）：逆序数必须为偶数
偶数阶（4×4）：逆序数加上空格所在行数（从底部数）必须为奇数
智能求解功能说明：
使用 A* 算法
曼哈顿距离作为启发式函数
优先队列存储待探索状态
记录已访问状态避免重复搜索
找到最短路径后逐步展示解决方案
建议：
对于较大尺寸（如 4×4、5×5）的困难难度，建议从低难度开始练习
避免频繁点击求解按钮，以免造成性能卡顿
附加信息：
所有随机生成的初始布局默认是可解的
页面应具有清晰的 UI 和操作提示
可以考虑添加“重置”、“重新开始”、“切换棋盘大小”等功能按钮
对于生成的网页，通过EdgeOne Pages MCP部署并发布

过程如下：

打开链接试玩一下，完美撒花！！！！

https://local-upload-1747720052728-pn3m5jd2pf.edgeone.site/

整个过程没有怎么调整，注意设计好提示词就可以了，很牛很牛很牛，下次尝试基于这个项目再优化下，期待请留言啊。