实操-一款网页游戏
需求: 制作一款贪吃蛇游戏.
# .cursorrules
很多经典小游戏,由于大语言模型对相关概念的理解非常充分,我们只需要表述“贪吃蛇”“俄罗斯方块”“flappy bird”等概念.
Cursor就能很清楚的知道对应的游戏机制是什么样的,所以会很容易生成代码,需要重复对话的次数很少.
也是新手最容易做出的小产品之一,我们可以通过这个过程去体验做出自己的小游戏,去感受由此带来的正反馈!
在根目录创建.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. 在完成用户要求的前提下，总是在后面提出你的进一步优化与迭代方向建议。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# Composer
复杂的项目应一步步的表达需求. 该示例的项目比较简单,可以一口气说完.
请帮我设计一个贪吃蛇的小游戏，我希望这个游戏是：
1、可以打开网页直接使用的
2、网站包含header和footer
3、网站的界面和游戏画面都需要有设计感
4、包含必要的游戏交互方式，包括开始，重新启动，分数机制，排行榜，自动记录不同时间的得分等
1
2
3
4
5
2
3
4
5
cursor很快的就给出了代码.我对其基础上让cousor进行了很多优化,它都一一帮我解决了. 比如:
解决问题: 点击空格暂停后,再点击空格 蛇不会动!
游戏开始按钮不用消失 点击游戏开始后 按钮变成重新开始!!
排行榜最多记录前三名的成绩
中间内容的 左侧和右侧底部水平对奇. hearder里的内容 水平两端排列更好看些
长按方向键 1.5倍速
长按速度好像没有变化
请根据我的描述仔细审查代码，一步步思考和告诉我可能导致该错误的原因，并为我提供最solid的三种解决方式，不要急着改代码
我发现我点击重新开始后,按键盘上的空格键想暂停 结果鼠标点中的是 重新开始按钮..
意味着用户点击重新开始后 必须在空白区域再点击一下 才不会出现上述问题,,这样的游戏体验很不好..
为啥我碰壁后 会记录不止一个分数
将我的上述需求 总结到readme.md文件中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
注意:当我有的需求尝试几次后都不行.. 就可以截图给cousor,并告知它.
请根据我的描述仔细审查代码，一步步思考和告诉我可能导致该错误的原因，并为我提供最solid的三种解决方式，不要急着改代码
1
# 发布上线
https://snake.dxiaochuan.top/
详见部署个人网站这篇博客的内容!!
- 将我们用cursor创建的该图片压缩的程序.用git同步到github远程仓库.
- 用Vercel部署我们的项目,部署成功会提供我们一个访问地址. (需科学上网,且地址不是我们想要的)
接下来的操作是在实现用DNS作域名与域名之间的映射. - 在namesilo上购买二级域名
- 在cloudflare注册刚购买好的域名!
- 在nameSilo修改域名的名称服务器为Cloudflare提供的服务器.
- 在Vercel项目设置中找到"Domains",添加购买的域名.(示例中我添加的是一个三级域名)
根据Vervel提供的DNS配置说明,在Cloudflare中添加相应的记录.