震惊！5分钟就能开发一个微信小程序游戏？

用腾讯云AI助手开发微信小程序游戏

原创已于 2024-12-09 11:28:40 修改 · 3.2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #游戏 #notepad++

于 2024-12-06 16:21:37 首次发布

我是一个小程序应用的产品经理

一次偶然的机会

我发现了腾讯云 AI 代码助手

据说已经支持微信开发者 IDE 下的编码辅助

并且在代码辅助开发的效率上有很大提升

还可以通过自然语言描述完成最终应用？！

那么我今天要来试试看

用腾讯云 AI 代码助手

来快速开发一个微信小程序游戏

「五子棋」

在这个决定之前，我花了一周看完了《代码的艺术》这本书，这本书提到了程序员最害怕的四件事

程序要写注释🫡

程序要写文档🫡

别人不写注释😨

别人不写文档😨

（你有被命中吗？）

不过

我完全没有这样的烦恼

因为腾讯云 AI 代码助手可以直接在编码中

生成注释文档、解释代码和优化代码质量

不信你看我的开发过程～

开始开发

< 创建小程序 />

打开微信开发者工具软件，点击添加按钮，出现如下页面。

选输入项目名称后，依次填写完毕后点击创建。在输入 AppID 的时候，下拉框中会列出来你这个微信号刚才注册的小程序的 AppID

*后端服务，因为小程序游戏还不需要后端，所以选择了不使用云服务。

*开发模式，选小程序；

*模板选择，选择 TS- 基础模板即可。

打开后，首次需要安装腾讯云 AI 代码助手插件。该插件已经在市场里集成，你只需要安装到当前项目即可。操作步骤，在前一章的「开发工具插件准备工作」中。

最终成功安装后的效果如下图所示：

< 开始描述需求和准备提示词 />

我打开微信开发者 IDE，点击底部的 AI 问答后打开技术对话侧栏。

为了减少攥写提示词的时间，我在对话中先让 AI 先帮我写了一份提示词。

由于腾讯云 AI 代码助手支持多轮技术对话，我可以继续提问以完善提示词内容。

这里附上最后的提示词：

# 角色
你是腾讯云AI代码助手，一位专业的微信小程序开发的专家，你精通WXML、WXSS的语法，你的任务是与开发者合作，理解自然语言描述的需求，并共同创造一个微信小程序。你是你心思缜密，并给出的答案细致入微，推理能力出色。你会仔细提供准确、事实、深思熟虑的答案。你要回答所有技术和代码相关问题。你生成的代码必须是完整的。
# 五子棋游戏需求描述
创建一个微信小程序，实现五子棋游戏。游戏应包含完整的五子棋规则，包括黑白双方轮流下子、连线判断胜负、禁手规则等。同时，需要明确展示玩家何时会失败，例如无合法位置可下、超时未下子等情况。请确保代码结构清晰，界面友好，用户体验流畅。

## 代码质量和代码要求
- 遵循微信小程序的开发规范和最佳实践。
- 使用模块化和组件化的开发方式，提高代码的可维护性和复用性。
- 进行充分的单元测试和集成测试，确保代码的稳定性和可靠性。
- 优化性能，减少资源消耗，提高游戏的响应速度。
- 确保代码的安全性，防止潜在的安全漏洞。
- 提供详细的注释和文档，方便其他开发者理解和维护代码。

## 实现要求
- 需要采用小程序canvas来绘制棋盘和棋子。
- 捕捉canvas的触摸事件，来保存触摸点到黑棋或者白棋数组，然后重新绘制canvas。
- 胜利算法判断，判断四个方向即（横向，纵向，左下，右下）是否满足五子连珠。
- 重新开始功能，需要清空所有棋子数组，然后绘制棋盘。
- 悔棋一步功能，remove上一步黑子数组或者白子数组的最后一个，然后绘制棋盘。

## 建议的目录结构和文件示例
```
/miniprogram
    /pages
        /index
            index.js
            index.json
            index.wxml
            index.wxss
        /game
            game.js
            game.json
            game.wxml
            game.wxss
    /utils
        util.js
    app.js
    app.json
    app.wxss
```

### index 页面
- `index.js`: 处理首页逻辑。
- `index.json`: 配置首页页面信息。
- `index.wxml`: 定义首页的结构。
- `index.wxss`: 设置首页的样式。

### game 页面
- `game.js`: 处理游戏页面逻辑。
- `game.json`: 配置游戏页面信息。
- `game.wxml`: 定义游戏页面的结构。
- `game.wxss`: 设置游戏页面的样式。

### utils 目录
- `util.js`: 存放工具函数和辅助方法。

### 全局配置
- `app.js`: 小程序逻辑。
- `app.json`: 小程序公共设置。
- `app.wxss`: 小程序公共样式表。

## 五子棋完整游戏规则

### 基本规则
- 五子棋盘为15×15的网格。
- 黑白双方轮流在棋盘上落子。
- 先在横、竖或斜线上连成五子的一方获胜。

### 禁手规则（主要针对黑方）
- 三三禁手：黑方不得在已有两子的交叉点再落子形成三三。
- 四四禁手：黑方不得在已有三子的交叉点再落子形成四四。
- 长连禁手：黑方不得形成六子及以上的连续连线。

### 胜利条件
- 任何一方率先在棋盘上形成五子连珠即获胜。
- 如果一方投降或双方同意和棋，则游戏结束。

### 失败情况
- 当一方无合法位置可下子时，即该方失败。
- 在规定时间内未下子的一方视为超时失败。
- 违反禁手规则的黑方自动判负。

请生成五子棋微信小程序的完整的工程代码，不允许出现未实现的代码。代码需要充分考虑上述规则、代码质量和代码要求，并确保按照建议的目录结构和文件示例组织代码，以确保游戏逻辑的正确性与完整性。

接下来我把完善的提示词贴入腾讯云 AI 代码助手，看看它给我生成了怎么样的小程序。

工程代码生成过程

< 准备好结构 />

安装提示词的结构，先按照微信开发者平台的页面要求，在 Pages 上创建一个目录 game，右键 game 目录，点击「新建Page」，输入 index 回车后，会帮助生成多个 index 文件。

接下来，我们打开腾讯云 AI 代码助手，把刚才录入的提示词输入进去，腾讯云 AI 代码助手为我生成了每一段的代码。部分代码可能会省略，我保持着耐心，因为后面可以让它继续生成

<对话框引用微信小程序知识库/>

腾讯云 AI 代码助手已经内置了微信小程序知识库，我们可以把微信小程序开发的所有技术文档和规范都录入进去了，这样生成的会话中的代码内容会更好。

我来试试，首先先输入 # ，然后选择微信小程序，然后输入刚刚的提示词，回车。如下图：

小技巧：对于我这种不喜欢用鼠标的，可以直接一口气输入 # 微信，然后省略后面的文字，通过上下键选中后直接回车就选上了，非常的方便。

< 根据对话里的步骤完成代码 />

我根据对话中的代码依次插入依次插入到工程中，然后点击顶部条的编译按钮后便可以在左边看到预览效果。

< 通过内联对话优化代码 />

第一次运行效果中只有棋盘，并没有办法插入棋子，于是我打开了核心代码 game.js 文件，我发现函数还没有绘制棋子。

凭借对话中的代码描述，棋子可能需要独立绘制。那么这里可能有两种办法，一种是 canvas 绘制，一种是插入图片。那么我来试试腾讯云 AI 代码助手的内联对话给我怎么样的修复方法。

圈选代码后，通过快捷键（我是 mac 电脑）我用的是 Cmd+I，如果是 Windows 电脑的话快捷键为 Alt+I。

在顶部条出现输入框后输入需求，如下图所示

他给了我一个路径，让我自己准备白棋子和黑棋子的图片。我按目录的位置存放进去了之后，再次运行程序，运行后成功了！✌️

运行的效果如下图所示。当然代码还不够好，我接下来继续完善一下。

优化代码的艺术

当前应用只是可以运行，还不够好。我需要增加代码注释和文档，并生成一个项目工程的 Readme.md 文档，然后把核心逻辑解读后进行下重构。

< 生成文档注释 />

腾讯云 AI 代码助手贴心的给出了三种方法生成文档注释：

第一种，通过圈选核心代码，右键，选择腾讯云 AI 代码助手下的生成文档，如下：

第二种，进入插件的高级设置，如下图「圈1」开启「圈2」和「圈3」

返回代码后，可以在函数头或者鼠标悬浮后出现蓝色提示，点击「生成文档」，如下图

第三种是直接使用快捷键，按键如下：

看了一下生成文档的效果，还不错，同时腾讯云 AI 代码助手还增强了一些示例方法描述。觉得满意的话直接点击「采纳」就可以应用上去了。

< 重构代码 />

在对话框中，我使用 /fix 给当前代码进行修复，无论是语法错误，还是逻辑问题，或者是代码需要重构，一个 /fix 可以给出 AI 检查后的建议和修复方案。

腾讯云 AI 代码助手提供了智能插入的方法，通过大模型为其生成合并的 Diff View 预览效果，如下图，清晰很多了。腾讯云 AI 代码助手在如下视图下可以选择部分采纳或者全部采纳。

< 运行错误查询原因 />

我在开发中有时会发现如下图的错误，我的做法是把错误直接复制给到腾讯云 AI 代码助手，他能正确的给我结合当前工程代码进行分析，给出正确的解决方案。如下图，发现错误后，给出 init（）函数修复建议，通过对话代码区域的「智能插入」运行后，右边出现了 Diff View 预览，全部采纳后，问题解决。

工具准备

< 开发工具插件准备工作 />

1. 腾讯云 AI 代码助手，已经内置在小程序开发者平台内了，只需要开启一下就可以。在微信开发者平台，点击编辑器内的插件扩展，找到「腾讯云 AI 代码助手」，点击安装即可。

2. 其他版本的 IDE，如 VSCode，也可以在下面的地址下载并安装使用

https://marketplace.visualstudio.com/items?itemName=Tencent-Cloud.coding-copilot

< 小程序相关准备工作/>

小程序后台登录注册地址

https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN

个人就可以进行注册并且完成小程序开发者认证。

微信开发者工具下载地址

https://developers.weixin.qq.com/

miniprogram/dev/devtools/stable.html

⚠️这里需要下载1.06.2409140以上的版本哦。

该工具可用于开发小程序、小游戏和插件。

小程序开发微信官方文档：

https://developers.weixin.qq.com/miniprogram

/dev/framework/

不用细看，因为腾讯云 AI 助手已经贴心的帮助你集成到对话里了。只需要的时候引用 #微信小程序然后输入你的问题即可帮你回答并附上代码示例。

后记

作为产品经理，能够开发出符合预期的产品是一件很振奋的事儿，微信小程序它轻巧、快速，让用户随时随地都能享受到服务。而有腾讯云 AI 助手的加入，让我们的开发工作更加得心应手。也能够让我更快速地制作出符合预期的、满足用户需求的产品，腾讯云 AI 代码助手非常贴心，在技术对话中能够帮助我洞察用户需求，补全代码，极大提升了我的开发效率，帮助我节省精力创造更多美好的事物。

< 使用总结 />

采用腾讯云 AI 代码助手插件是可以很好的解决自然语言需求生成代码工程的能力，结合微信开发者平台和混元 AI 大模型，确实可以大大帮助非专业人群生成所需的应用和小程序。同时编码辅助上丝毫不差于国外产品，它还能帮我在编辑代码的时候快速生成代码，优化当前代码，甚至自动生成开发者头疼的注释和代码文档。

在实践过程中，有时会出现编译出错展示不出效果，或者模型偷懒问题导致函数没有实现的，我可以利用对话进一步多轮对话「强迫」

腾讯云 AI 代码助手继续完成项目工程。

< 利用好提示词 />

如果你开始有能力给出一些正确的反问，代表你开始对代码有一定的认知。那么接下来你需要写出更好的提示词。让 AI 懂你的描述，这是一个循序渐进的过程。通过提示词强化和扩写，快速完成一个描述清晰的提示词，节省时间，同时也强化腾讯云 AI 助手对于生成结果质量。

< 未来展望 />

IDE 在不断强化编码智能化的属性，比如最近微软 Java 插件发布了实验性版本的 AI 能力，让 VSCode 在 Java 开发上有了很强的飞跃，在意图判断上也有更智能更自动化的操作。腾讯云 AI 代码助手努力让开发有更高的效率、让更多人能够更容易实现自己的奇思妙想，为这个世界创造更多美好。

产品体验