这是熊猫的第56篇原创
前几天写了个文章，讲到爆火的Shap10r。

这个游戏看起来很复杂，但是玩法很简单，就是从24个元素之中找到5个元素，按照正确的顺序排列，就能过关。

在思考做点什么来承接这个游戏的流量，考虑的方法有：
1. web端做个网页，包括游戏攻略，游戏下载地址，游戏视频等；
2. google play上个包；
3. 复刻一个上架ios store；

第一个想法是用cursor帮忙写一个ios的app，但是苹果不让过审，准备的内容白费了。

只能转变了思路，不如做一个网站。先把游戏做出来。
于是有了这篇文章。

和Cursor对话

按照我这几个月学习用AI编程的经验，大概是这样一个流程：

1. 先和crusor确认需求，不要求写代码，但是要通过反复的交流，理解需求；
2. 根据需求，确定自己要用的技术路线，我现在对html/css/js有一定的了解，于是要告诉他希望实现的语言，来实现这个需求的项目结构。
3. 开始分步写代码，完成毛坯房的搭建；
4. 开始装修，调整效果，给他明确的指令；
5. 反复调整，直到满意；

从Shap10r说起

理解需求：

我现在习惯先给他一个需求，比如说我期望做一个这样的游戏，游戏界面是这样的：
文章配图
记得先用「Chat」交流，写代码再到「Composer」：
文章配图
这时候他会生成一整段的Markdown格式内容，这是他的理解，你可以根据他的回复调整细节：

文章配图
文档会再更新，如此反复几次，

文章配图
需求大概是明确了，这时候cursor是一名产品经理AI，帮助我们梳理需求，完成1.0版本的内容。

开始编程

接下来我们就可以切换到Composer里面，开始写代码了，这时候Cursor成为了一名程序员AI。

第一步是结构，这是最重要。这样才能整体性的写代码，后续改bug也好改。

文章配图
在创建结构之后，他顺手就把index.html和style.css写完了。
顺便提出了下一步的建议（很主动）：

文章配图
接下来就是逐步实现game.js/ui.js/storage.js。
注意一些跟他交流的细节：你可以问他怎么好写一点？
就像在工作中和程序员沟通功能时，你可以问他们，如何实现快一点？

文章配图
我一般会让他把一部分的逻辑全部写完，不中断他。这样他的思路会清晰一点。

完善css后，我们就可以开始调试。一般来说，他设置的css，我最开始都不会改，没必要。先实现功能，再换美术。

这时候我变成了一名挑剔的测试人员，他仍然是程序员。

我用默认浏览器打开，发现网页不对劲，调试出现了问题：

文章配图
你可以截图问问他：

文章配图
原来是部署的问题，代码没有问题。
可以在cursor里面用Command+J 启动终端，输入命令。
再访问localhost，你会发现内容跑起来：

文章配图
特别好，虽然只是实现了一部分功能，但是这时候我们的框架已经搭出来了。接下来要做的第一步就是检查玩法是否如我们期望的实现。

文章配图
你会发现他虽然说得很好，都做完了，但是确实很丑，并且：
1. 第六列的答案数字，基本看不清楚。
2. 第五列无法输入；
3. 比例不太好，元素选择器太大，而输入框的格子太小；

文章配图
一项一项的给他明确出来，让他修改。
他也会修改，并且同时更新需求文档。这时候又是程序员，又是产品经理。

文章配图
改完一看，还行，第六列的数字能看清楚，第五列的位置也能输入了。

文章配图
除了这种完全看不清楚的问题，一般来说，我会先测试流程能否跑通，这个很重要。

文章配图
胜利正常结束。
文章配图
失败时填满了，游戏无法结束。

文章配图
这时候游戏还不完整，需要继续优化，明确的给他下达指令。

文章配图
然后就改好了。
不过他用的是数字，数字对于这个游戏来说，并不明确，数字是背后一层的算法，前端要展示图片比较好。

继续修改。

文章配图
文章配图
文章配图
有时候会有奇奇怪怪的问题出现，但是不用着急，一张图一张图的跟他说明问题即可。

最终改出来的这个效果，我觉得还行，虽然字体还不够好看，可以先放着。

接下来开始调整美术：

文章配图
外发光太浅了，看不清楚。让cursor改一改。

文章配图
在深色模式下，发现这两个颜色很不好看，于是要求更换，并且希望他来提建议。

这个也是最近探索到的一个方法，你提出建议，让他思考，因为他的知识库更大，然后你来做决定。

文章配图
接下来，我想让他实现一个自动填充，且跳过已填充区域的功能，让游戏简化下，于是出现了奇怪的bug：

文章配图
竟然直接把答案的位置占了？

文章配图
文章配图
自动跳过了一个空位置？

文章配图
本应该锁定的列，被替换了。

继续改。
继续改。。
继续改。。。

然后出现了一个很搞笑问题

罢工了？

文章配图
Cursor不知道因为什么原因，罢工了。
试了几次都暂时没恢复。

没有了程序员，工作完全无法开展。
暂时就这样吧。

大部分的功能已经实现了，这个产品因为是别人的创意，暂时也没有想法进一步优化了。

这个过程大概花了2个小时，包括需求交流，代码编写，截图优化等。

暂时部署到了vercel，有兴趣的朋友可以试试：
https://shaplor.vercel.app/

总结：

算是第一次用cursor写游戏，感觉还是不错，对于用Cursor写代码的信心又提高了一层。

简单项目基本可以一人快速实现。
一个人就是一个组：包括web端开发、游戏开发、服务端开发、产品经理、测试等角色；

感觉能做的事情更多了。

分享给大家，希望对你也有启发。我是专注于休闲游戏变现的熊猫，持续分享游戏技术思考与搞钱经验，欢迎大家交流，2024我们一起出海搞钱。


相关阅读
这个游戏昨天下载18万｜tiktok的流量太强了
4个步骤，让Cursor帮我写了一个标准房贷计算器｜房贷变化网更新
算算你的房贷降了多少｜用Cursor 2个小时，写了一个房贷变化计算器｜从0到1系列
Cursor 官方使用指南｜提高编程效率的三个方法