从“猜瓶子”来看豆包和ChatGPT的编程效果差异
- 2025/08/21
- 0阅读
最近在小红书直播里总看到一个直播游戏，其中A负责摆出一个随机颜色的瓶子顺序，B负责在对面调整自己一侧的瓶子顺序，直到猜出A所摆放的瓶子顺序。
某在线直播间
我发现网上已经有很多发布的小程序版和APP版的猜瓶子游戏，由于这游戏规则并不复杂，操作也很简单，我打算让豆包写个试试看。这次怕我的表述不清楚，我决定先让豆包总结出游戏规则，再用豆包的AI编程来实现游戏效果。
一、豆包
提示语：
猜瓶子顺序 的游戏规则是啥？
豆包的回复
豆包给出了详细的游戏设定和规则，并给出了一个操作示例。于是我直接拿这段规则去让豆包生成小游戏。
（1）第一版
提示语：
我准备使用Phaser3编写一个单机小游戏——“猜瓶子”，游戏规则如下：
基础设定：
1、游戏会提供一组瓶子（数量通常固定，比如 4-6 个，不同关卡可能有调整），每个瓶子有独特标识（如颜色、数字、图案等，用于区分）。
2、存在一个 “目标顺序”—— 即这组瓶子预设的正确排列方式，该顺序在游戏开始后隐藏，玩家需通过操作推理。
3、初始时，瓶子会以随机打乱的顺序呈现，与目标顺序不同。
玩家操作：
1、核心操作是 “交换瓶子位置”：玩家可任意选择两个瓶子，交换它们在序列中的位置（比如选择第 2 个和第 5 个瓶子，交换后两者位置互换）。
2、操作后可 “提交当前顺序”（部分游戏可能自动判定），向系统确认是否要获取反馈。
反馈机制：
1、每次提交后，系统会给出 “位置正确数” 的反馈 —— 即当前顺序中，位置与目标顺序完全一致的瓶子数量。
2、反馈仅告知数量，不指明具体是哪几个瓶子（比如反馈 “2 个正确”，但不说明是第 1、3 个还是第 2、5 个）。
游戏目标：
1、玩家需结合每次交换后的反馈，逐步调整瓶子顺序，最终让所有瓶子的位置都与目标顺序完全一致（即系统反馈 “全部位置正确”），完成该关卡。
举个简单例子：若有 A、B、C、D 四个瓶子，目标顺序是 “A-B-C-D”，初始顺序是 “B-A-D-C”。玩家第一次交换 1 号与 2 号瓶子，顺序变为 “A-B-D-C”，提交后系统反馈 “2 个位置正确”（此时 A 在 1 号、B 在 2 号，与目标一致）；接着玩家交换 3 号与 4 号瓶子，顺序变为 “A-B-C-D”，系统反馈 “4 个位置正确”，游戏通关。
第一版的豆包贴心的加入了关卡选择（使用HTML的Select下拉框实现），但是代码它没有跑起来😂
使用HTML结构分离关卡
第一版只能看到UI，点击按钮并没有反应
（2）第二版
我最初以为是HTML+Canvas混用导致哪里出现了问题，于是让豆包改为纯Canvas结构试试。
提示语：
我希望把选择关卡的动作也放在游戏中执行
结果这次连UI也看不到了，于是我打开控制台，发现有报错。
这次好了，连UI也没了
（3）第三版
提示语：
运行不了，浏览器报错：The Content Security Policy directive ‘upgrade-insecure-requests’ is ignored when delivered in a report-only policy.
豆包认为是Phaser尝试使用WebGL绘制导致的，于是它做的调整是：将渲染模式从Phaser.AUTO改为Phaser.CANVAS，避免可能的 WebGL 安全限制。但这并没有什么作用。
第三版，依旧啥也看不到
我觉得可能是豆包在网站中内嵌网页预览导致的CSP问题，于是我尝试把代码拷贝到本地运行，发现看不到任何报错信息。好麻烦，试试ChatGPT吧😥
看不到报错咋排错啊😄
二、ChatGPT
（1）第一版
提示语：
我准备使用Phaser3编写一个单机小游戏——“猜瓶子”，游戏规则如下：
基础设定：
1、游戏会提供一组瓶子（数量通常固定，比如 4-6 个，不同关卡可能有调整），每个瓶子有独特标识（如颜色、数字、图案等，用于区分）。
2、存在一个 “目标顺序”—— 即这组瓶子预设的正确排列方式，该顺序在游戏开始后隐藏，玩家需通过操作推理。
3、初始时，瓶子会以随机打乱的顺序呈现，与目标顺序不同。
玩家操作：
1、核心操作是 “交换瓶子位置”：玩家可任意选择两个瓶子，交换它们在序列中的位置（比如选择第 2 个和第 5 个瓶子，交换后两者位置互换）。
2、操作后可 “提交当前顺序”（部分游戏可能自动判定），向系统确认是否要获取反馈。
反馈机制：
1、每次提交后，系统会给出 “位置正确数” 的反馈 —— 即当前顺序中，位置与目标顺序完全一致的瓶子数量。
2、反馈仅告知数量，不指明具体是哪几个瓶子（比如反馈 “2 个正确”，但不说明是第 1、3 个还是第 2、5 个）。
游戏目标：
1、玩家需结合每次交换后的反馈，逐步调整瓶子顺序，最终让所有瓶子的位置都与目标顺序完全一致（即系统反馈 “全部位置正确”），完成该关卡。
举个简单例子：若有 A、B、C、D 四个瓶子，目标顺序是 “A-B-C-D”，初始顺序是 “B-A-D-C”。玩家第一次交换 1 号与 2 号瓶子，顺序变为 “A-B-D-C”，提交后系统反馈 “2 个位置正确”（此时 A 在 1 号、B 在 2 号，与目标一致）；接着玩家交换 3 号与 4 号瓶子，顺序变为 “A-B-C-D”，系统反馈 “4 个位置正确”，游戏通关。
和发给豆包的第一版提示语完全一致，ChatGPT在梳理了游戏思路后，给出了一个简易Demo（居然一把就通过了）。我再试试完善下功能。
一把过，太👍了
（2）第二版
提示语：
很好，简易版的效果和我所想一致，现在我们增加一些功能，请实现下面几个需求：
1、移除“提交”按钮，每次操作后自动更新正确数。
2、在游戏左上角显示已操作的步数和限制步数，例如“1/10”，如果关卡没有限制步数，则限制步数为“∞”。
3、给游戏增加多关卡，最多出现12个瓶子；当瓶子数量达到上限时，开始限制游戏步数为30步。
4、增加一个调试用的debug变量，设置为true时，在右下角展示正确的瓶子颜色顺序。
效果很赞
（3）第三版
提示语：
增加主菜单 / 重新开始按钮，只有debug为true时可以自由选择关卡，否则需要逐个游玩解锁，已解锁的关卡可以重复游玩
可以看到主界面关卡错位了，debug模式下的游戏界面右下角也出现了一些展示问题。小问题，让GPT改改。
（4）第四版
提示语：
现在游戏中有一些小问题，请让我们修复一下：
1、主菜单场景，关卡按钮垂直排列会出现遮挡情况，请改成横向排列 + 自动换行的形式，并且增加滚动展示关卡功能，因为后期可能会有几百个关卡；
2、debug=false时，主菜单依旧展示所有关卡，未解锁的关卡点击不进入游戏；
3、游戏场景的右下角debug区域，改至左下角，解决遮挡问题；
从这步开始，GPT开始出现幻觉了，开始修改和重命名不存在的代码了，所以本次测试就到此为止吧。最后附上Demo✨。
三、最终效果
主包稍微优化了一下，调整了关卡按钮间距和增加了debug设置按钮，大家感兴趣的话可以试玩一下😋
从“猜瓶子”来看豆包和ChatGPT的编程效果差异
作者：有点东西
链接： https://www.youdiandongxi.com/article/try-ai-create-game3.html
协议：本文采用 CC BY-NC-SA 4.0 隐私协议，转载请注明出处！
