从Prompt到上线：CloudBase AI Toolkit 3步打造H5射击小游戏新体验

一、前言

在这个快速发展的数字时代，CloudBase AI Toolkit GitHub地址（https://github.com/TencentCloudBase/CloudBase-AI-ToolKit）作为腾讯云开发的重要工具，正引领着AI编程的新趋势。其不仅能够无缝适配主流AI编程工具，还能自动生成功能齐全的前后端应用及小程序，并一键部署到腾讯云。

这种全栈自动化的特性，使得开发者能够专注于创意实现，而不是繁琐的配置工作。本项目旨在利用CloudBase AI Toolkit的强大能力，开发一款H5页面射击小游戏，满足用户对娱乐和挑战的需求。

通过该平台，用户将能够在60秒内进行射击游戏，获得实时得分反馈，并参与排行榜的竞争。此项目的最终目标不仅是提供一个简单有趣的游戏体验，更是通过高效的开发流程，展示CloudBase AI Toolkit在快速构建和部署应用方面的巨大潜力，从而推动创新应用的开发与上线。

二、开通云开发环境

1、访问 腾讯云开发控制台开通环境，新用户可以免费开通体验。

开通完成之后登录。

三、配置 AI IDE

1、配置 CloudBase MCP，在项目根目录创建 .cursor/mcp.json 文件：

{
  "mcpServers": {
    "cloudbase-mcp": {
      "command": "npx",
      "args": ["-y", "@cloudbase/cloudbase-mcp@latest"]
    }
  }
}

配置成功如下：

四、启用 AI 规则

对 AI 说：

在当前项目中下载云开发 AI 规则

五、开发狙击水果小游戏过程

1、在 Agent 模式下与 AI 对话：

登录云开发

弹出如下界面之后，微信扫码登录。

进行CLI授权操作。

登录成功。

2、在AI对话框中输入如下内容：

开发一个H5页面射击小游戏，前方有香蕉、苹果、梨、大枣，它们一直在不规则移动，射中的物体越大得分越少，60秒内完成射击，时间归零自动结算，需要进行排行，每个用户登录之后需要输入一个昵称，昵称不可以重复，使用云数据库存储，最后部署。

得到如下的输出。

输入如下反馈：

1、同意使用 React + Tailwind CSS 进行开发。
2、使用用网络素材即可。
3、每次游戏分数都记录，同一个用户取历史最高值进行排行。

继续执行后反馈。

切换npm源继续执行。

云函数部署完成。

前端项目已准备好，Tailwind CSS 也已集成。

开发基本完成。

预览完整的 H5 射击小游戏，所有核心功能均已打通。

访问游戏然后进行试玩。

排行榜

六、查看CloudBase资源信息

1、在云函数中可以看到通过Cursor生成的函数文件。

2、在数据库--文档型云数据库，可以看到创建的scores和users字段。

七、总结

本H5射击小游戏的开发不仅展现了 CloudBase AI Toolkit 在快速构建和部署应用方面的强大能力，同时也凸显了 AI 工具在软件开发领域中的巨大商业价值。在当前的 AI 发展趋势下，这种全栈自动化开发模式将成为主流，特别是在游戏、电商、社交等应用场景中，AI 工具能够帮助开发者快速构建原型，并通过数据驱动的方式优化产品体验。

未来，随着 AI 工具的进一步成熟，开发者将能够更专注于产品的创意设计和用户体验优化，推动更多高质量应用的诞生，从而加速整个行业的数字化转型进程。