Cursor新人入门实操项目03：做出你的第一款网页游戏
功能&需求背景说明
游戏网站因为是用户的需求目的地，用户停留时间长，所以现在互联网上依然存在大量的休闲游戏网站，而且搜索引擎也热衷于为游戏网站提供流量。游戏网站的变现方式主要以广告模式为主，你可以通过在网站中加入Google Ads的方式实现展示广告变现（Google Ads的添加逻辑我们会在后续的教程中提及）。
另外，很多经典小游戏，由于大语言模型对相关概念的理解非常充分，你只需要表述“贪吃蛇”“俄罗斯方块”“flappy bird”等概念，Cursor就能很清楚的知道对应的游戏机制是什么样的，所以会很容易生成代码，需要重复对话的次数很少，也是新手最容易做出的小产品之一，你可以通过这个过程去体验做出自己的小游戏，去感受由此带来的正反馈。
因为新的一年是蛇年，所以我这就给大家演示个“贪吃蛇”游戏的例子吧。
一、准备.cursorrules文件
小游戏你可以用各种不同的编程语言实现，比如python、html等，我们这次的诉求是做一个网页版的小游戏，所以我们采用html的网页模式。
我们同样可以为这个网页小游戏开发项目准备一个.cursorrules文件。让AI以更符合你的背景和需要的方式实现你的目标。
我们可以通过.cursorrules文件去限制AI的编程语言选择和表现。在本次网页项目中，你可以在根目录创建.cursorrules文件，并在其中放入以下规范要求：
# Role
你是个具有优秀编程习惯的AI，但你也知道自己作为AI的所有缺陷，所以你总是遵守以下规则：
## 架构选择
1. 你的用户是没有学习过编程的初中生，在他未表明技术栈要求的情况下，总是选择最简单、易操作、易理解的方式帮助他实现需求，比如可以选择html/css/js就做到的，就不使用react或next.js的方式；
2. 总是遵守最新的最佳实践，比如撰写Next.js 项目时，你将总是遵守Next.js 14版本的规范（比如使用app router而不是pages router），而不是老的逻辑；
3. 你善于为用户着想，总是期望帮他完成最省力操作，尽量让他不需要安装新的环境或组件。
# 本规则由 AI进化论-花生 创建，版权所有，引用请注明出处
## 开发习惯
1. 开始一个项目前先读取根目录下的readme文档，理解项目的进展和目标，如果没有，则自己创建一个；
2. 在写代码时总是有良好的注释习惯，写清楚每个代码块的规则；
3. 你倾向于保持代码文件清晰的结构和简洁的文件，尽量每个功能，每个代码组都独立用不同的文件呈现；
4. 当遇到一个bug经过两次调整仍未解决时，你将启动系统二思考模式：
- 首先系统性分析导致bug的可能原因
- 提出具体的假设和验证思路
- 提供三种不同的解决方案，并详细说明每种方案的优缺点
- 让用户根据实际情况选择最适合的方案
## 设计要求
1. 你具有出色的审美，是apple inc. 工作20年的设计师，具有出色的设计审美，会为用户做出符合苹果审美的视觉设计；
2. 你是出色的svg设计师，当设计的网站工具需要图像、icon时，你可以自己用svg设计一个。
## 对话风格
1. 总是为用户想得更多，你可以理解他的命令并询问他想要实现的效果；
2. 当用户的需求未表达明确，容易造成误解时，你将作为资深产品经理的角色一步步询问以了解需求；
3. 在完成用户要求的前提下，总是在后面提出你的进一步优化与迭代方向建议。
你现在也可以通过安装我的Cursor插件「花生：中文 Cursor Rules」的方式去实现快速创建.cursorrules文件的目的。
二、在Composer agent模式下中清晰明确表达你的需求
做完前期准备，就到了你表达需求的时刻了，你可以通过Command+I（或ctrl+I）的快捷键调出Cursor的Composer功能，注意在对话输入框的右下角选择agent模式（这个模式下Cursor能提供更自动化的代码查找和分步骤的创建操作），在其中清晰明确地表达你的需求。
通常来说，如果你的需求比较复杂的话，一步步来，每次只表达一部分的需求是更好的，因为AI的上下文窗口有限，每次能处理的任务量有限，为了避免出错，提高每个模块的输出效率，你最好让他每次处理的任务少一些。不过因为我们目前的小游戏需求很简单，所以你可以比较直接完成你的需求表述，比如：
请帮我设计一个贪吃蛇的小游戏，我希望这个游戏是：
1、可以打开网页直接使用的
2、网站包含header和footer
3、网站的界面和游戏画面都需要有设计感
4、包含必要的游戏交互方式，包括开始，重新启动，分数机制，排行榜，自动记录不同时间的得分等
接着，你就看到Cursor非常快速的帮我完成了需求分析和代码的写入了：
三、测试&优化迭代
1、打开HTML测试
通常而言，这个小游戏很简单，AI非常理解对应的概念，能很容易一次性就做出一个可用的东西，我们要进行测试也很容易，只要在电脑上打开刚才创建的新项目的文件夹，打开“html”文件即可，我这一次性要求获得的网站效果如下：
你得到的网站很可能长得不太一样，或者文案有些差异，这都不要紧，而且是很正常的情况。因为现在的生成式AI是预测下一个token的工具，并且在预测时保留了一些随机性，所以理论上，同一个提示词，我们每个人获得的代码都会稍微有些差异，这很正常。
测试之后，我发现网站的样式还可以，基本上的元素都具备了，但，游戏机制明显存在问题，包括：
1）游戏界面中没有贪吃蛇可以吃的“食物”；
2）贪吃蛇撞到边缘后直接出去了，游戏没有结束。
2、解Bug
你很可能不会遇到和我一样的bug，如果直接可用了那很好，如果有问题那也很正常，你只需要表述清楚你遇到的问题让Cursor解决即可，比如我下一步的prompt是：
现在存在两个问题：
1、贪吃蛇撞墙后不会死亡，而是直接穿出，导致游戏无法结束
2、游戏界面中不存在贪吃蛇可以吃的豆子，导致贪吃蛇无法得分和变长
请解决上述两个问题
Cursor在认为自己修改完成bug后，还自作主张做了以下“优化”
但是在Cursor修改完成后，我再次在网页上做了实际测试，发现样式确实更好看的，但是问题并没有解决。
没关系，bug一次性调整不好的情况是很正常的，我们动用我们要求cursor进行深思熟虑，用系统二思考的prompt，并且我为他提供了截图作为上下文信息（这可以辅助它排查问题）：
这是目前游戏界面的情况，界面上依然没有“食物”，以及撞到黑色边缘时依然不会死亡。
请根据我的描述仔细审查代码，一步步思考和告诉我可能导致该错误的原因，并为我提供最solid的三种解决方式，不要急着改代码。
然后他提供了对问题的深入分析和多种解决：
我选择了「方案一」，让Cursor调整，结果果然成功了。
3、优化迭代
接下来，为了让我们游戏再稍微有些不一样，我让Cursor对游戏机制做了些小调整。
接下来我希望你再做两点调整：
1、增大游戏区域，框和高都增加30%
2、把“食物”调整为随机采用不同颜色的豆子，并且蛇吃了之后，身体颜色就能变成所吃的“食物”的颜色
Cursor一次性便实现了我的需求。
当然，你可以用不同的策略把这个游戏做得不一样，比如音效、蛇的样式，增加可以联网的排行榜，两个人一起玩等等。甚至你也可以让Cursor去给你提供更好玩的优化建议，去做出个不那么一样的贪吃蛇。
四、发布上线
到了这个阶段，你的网页小游戏就可用了，但你不想只是自己使用，希望你的朋友也能用上你的网站，怎么办？
你可以通过下面这个教程去了解部署上线，拥有自己的域名，并且让国内的用户都可以访问的方式：
👉你可以通过这个github仓库查看我本次项目产生的源代码：https://github.com/alchaincyf/snake
💻你可以通过这个线上链接体验我这次教程制作的小游戏：https://snake.img2046.com/
