基于CloudBase AI Toolkit十首歌的时间开发《动物连连看》微信小游戏

基于CloudBase AI Toolkit十首歌的时间开发《动物连连看》微信小游戏

CloudBase AI ToolKit介绍

在这种情况下，CloudBase AI Toolkit 的出现为开发者提供了全新的解决方案。作为腾讯云开发（CloudBase）推出的新一代AI开发工具，它无缝适配主流AI编程工具，如 Cursor、CodeBuddy、Trae、WinSurf 等，能够自动生成可直接部署的前后端应用与小程序，并一键发布到腾讯云开发平台。这种“AI+开发”的模式，极大地简化了开发流程，让开发者无需深入掌握复杂的开发技术，即可快速搭建出符合需求的应用。

CloudBase AI Toolkit 不仅支持多种代码风格（如 HTML、CSS、JavaScript、Python 等），还允许用户通过简单的Prompt进行定制化配置，从而实现个性化的界面设计和功能布局。这一特性使得开发者能够根据自身需求快速构建出符合品牌形象的应用，同时也能灵活调整样式和交互逻辑，确保应用在不同场景下都能呈现出最佳效果。

此外，CloudBase AI Toolkit 的一键发布功能进一步提升了开发效率。开发者只需在开发环境中输入相应的指令，即可将应用快速部署到云端，实现从开发到上线的无缝衔接。这种高效的开发流程，不仅节省了大量时间，也降低了开发门槛，使得更多开发者能够参与到应用的建设中来。

AI ToolKit GitHub

CloudBase AI ToolKit 核心优势解析

CloudBase AI ToolKit 是腾讯云推出的一站式低代码开发工具，结合AI能力，可快速构建Web应用、小程序及后端服务。

AI ToolKit 开源仓库地址：

GitHub地址：https://github.com/TencentCloudBase/CloudBase-AI-ToolKit

CNB地址：https://cnb.cool/tencent/cloud/cloudbase/CloudBase-AI-ToolKit

基于CloudBase AI Toolkit十首歌的时间开发《动物连连看》微信小游戏

刚才介绍了CloudBase AI ToolKit是个什么，那我们怎么用，现在星哥就利用它演示开发《动物连连看》微信小游戏。

1.准备工作

现在安装 VS Code+CodeBuddy AI 编程助手以及 腾讯云开发环境。安装方法可以参考之前星哥写的文章：腾讯CodeBuddy从零打造家庭相册

如图，在VS Code的插件中搜索“腾讯代码助手”安装。

img

2.开通腾讯云开发环境

腾讯云开发是一款云原生一体化开发平台，提供后端云服务，让开发者无需管理服务器，即可快速构建应用。

打开：腾讯云开发官方控制台：https://console.cloud.tencent.com/tcb 开通服务

1. 点击“新建”按钮。
2. 新用户可以优先选择免费体验版。
3. 根据提示填写环境名称（例如：lianliankan）、选择地域等信息。然后点击确认按钮，等待环境创建完成。

img

创建成功

img

3.配置 MCP

腾讯云代码助手CodeBuddy 与 腾讯云开发环境进行交互，需要配置 CodeBuddy 的 MCP。

点击 CodeBuddy 的图标，找到并点击“MCP市场”按钮。

img

如图，点击右侧的“+”按钮。

img

这是会弹出一个json文件

img

在编辑框中，粘贴以下JSON 配置代码，粘贴完成后，点击保存按钮。

{
    "mcpServers": {
    "cloudbase": {
        "command": "npx",
        "args": ["@cloudbase/cloudbase-mcp@latest"],
        "timeout": 120000,
        "env": {
            "CLOUDBASE_DEBUG": "true"
        }
    }
    }
}

img

MCP成功安装之后，就可以看到它提供的工具了：

img

完成以上步骤后，VS Code、CodeBuddy 和腾讯云开发环境就已经成功连接并配置完毕。

4.授权

在“codebuddy”对话框中输入“登录云开发”

img

在弹出的浏览器页面中选择云开发环境，再点击确认授权

img

选择云开发环境，点击确认选择

img

CodeBuddy 提示登录成功

img

再在 CodeBuddy 输入“在当前项目中下载云开发 AI 规则”

img

已添加的配置文件和目录包括：
​
1. 各种 AI 编辑器的配置目录：
​
.cursor - Cursor 编辑器配置
.windsurf - WindSurf 编辑器配置
.comate - Comate 编辑器配置
.vscode - VS Code 相关配置
.clinerules - Cline 编辑器规则
.codex - Codex 配置
.gemini - Gemini 配置
.lingma - Lingma 配置
.roo - Roo 配置
.trae - Trae 配置
.rules - 通用规则
.github - GitHub Copilot 指令
2. 配置文件：
​
.mcp.json - MCP 配置文件
.augment-guidelines - 增强指南
3. 文档文件：
​
AGENTS.md - 代理相关文档
CLAUDE.md - Claude 相关文档
README.md - 项目说明文档
现在您可以使用各种 AI 编辑器（如 Cursor、WindSurf、CodeBuddy 等）来更高效地开发您的云开发项目。这些配置文件包含了针对云开发的特定规则和指导，可以帮助 AI 更好地理解和辅助您的开发工作。

文件夹中有这么多文件

img

5.CodeBuddy 输入开发需求

基础规则

10×10 网格布局，随机生成 动物主题图标（猴子/熊猫/兔子/大象/河马/海豚/小猫/小狗/斑马等）

消除条件：选择两个相同动物，通过 ≤2 条直线连接（允许折线）

路径验证：路径需全空且不可穿墙，自动高亮显示连接线

操作流程

点击选中动物 → 自动寻路 → 成功消除（特效+音效）

场景构建:

2D横版布局：深林布局

时间限制

无时间限制

经济系统

货币体系 是金币：消除一个活动10个金币

任务与成就： 通过关奖励100个金币。

技术实现需求

微信小游戏原生Canvas API + JavaScript

使用微信云开发（CloudBase）存储玩家数据

微信登录：获取用户头像/昵称显示在排行榜

把游戏开发需求输入之后，CodeBuddy就会自动coding了。

img

6.导入微信开发者工具

访问 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下载微信开发者工具，安装

img

如图，导入项目

img

导入之后可能会有报错，不要慌，这是正常现象，根据报错内容进行修改即可

img

解决报错：

img

经过一番的调试：

说是调试，其实就是告诉CodeBuddy哪里出问题了，CodeBuddy 就会自动修复。

导入微信开发者工具报错：
[ app.json 文件内容错误] app.json: ["tabBar"]["list"][0]["iconPath"]: "images/tab/home.png" 未找到
["tabBar"]["list"][0]["selectedIconPath"]: "images/tab/home_selected.png" 未找到
["tabBar"]["list"][1]["iconPath"]: "images/tab/rank.png" 未找到
["tabBar"]["list"][1]["selectedIconPath"]: "images/tab/rank_selected.png" 未找到(env: Windows,mp,1.06.2504010; lib: 3.8.11)

img

项目代码完整开源

本项目已在 CNB 平台进行完整开源。

项目地址： https://cnb.cool/xgss-net/lianliankan

总结

这次的开发体验可以用“丝滑”来形容。

过去写这样一个小游戏可能需要 20-30 天时间，特别是算法和 UI 调整。但在 CloudBase AI Toolkit 的辅助下，我们只花了 40 分钟完成了从策划、开发到测试部署的一整套流程。

如果你有一个创意，不妨马上试试 CloudBase AI Toolkit，开启你的 AI 快开发之旅。