自从用了cursor和其他一些AI辅助编程工具以后，总想着做个游戏玩一玩，之前没有尝试过，这次就正好来练练手，真没想到，效果出乎我的意料！而且全程我没有敲一行代码！
游戏地址体验地址：https://gogoai.com/game开源地址：https://github.com/fh12/3d-niuma
AI辅助编程历史我也算是在编程开发行业混了有10年了，刚开始cursor出来的时候是2023年3月份的时候，那时候域名还是cursor.sh，初体验就感觉很不错，相比vscode就已经很丝滑了。代码补全功能也是可圈可点。编程助手其实也出来好几年了。
也就是2023年3月份那时候cursor刚起步，可以说是后起之秀，黑马无疑。因为刚开始那时候cursor还是完全免费的，那时候辅助编程能用上gpt4的可以说是相当之香啊。copilot那时候20美元/月。个人觉得cursor最厉害的地方还得是首创的多文件生成和自动重构，适合复杂项目的优化和管理。特别是yoyo模式，Cursor 的 YOLO 模式（”You Only Live Once”）是在 0.44 版本中引入的一项功能。
自动执行终端命令
在 YOLO 模式下，Cursor 的 Agent 可以无需用户确认，自动运行诸如初始化 Git 仓库、安装依赖和启动项目等命令，实现开发流程的自动化。
错误自动修复
Agent 能够读取 linter 错误，并自动修复代码中的问题，减少手动调试的时间。
多信息源集成
支持从文档、Git 历史、网页内容和文件结构中获取信息，增强上下文理解能力，提供更准确的代码建议。
并行编辑Agent 可以同时编辑多个位置，加快代码修改和重构的速度。
如何利用cursor制作游戏接下来分享一下我是如何制作这个游戏的准备工作首先没有cursor工具的，先去官网下载https://cursor.com
和vscode一样，本地安装之后，可以装一些实用插件，实在看不懂英文的，可以去这里下载个中文插件
再创建一个.cursorrules文件，不要看不起这个 .cursorrules，作用真的很大，特别是针对复杂大型项目，做完这个游戏项目我是真的深有体会：工欲善其事，必先利其器。如果你也是想用threejs做3d游戏，那你在我github的源代码里拷贝这个文件内容即可。
我们针对每个不同的项目有不同的需求、开发规范、流程管理等等，Cursor 的 .cursorrules 功能为当前项目提供了一个定制化专属Prompt。如果你写在右上角设置里的rule for AI ，那么一定是个通用的prompt，针对所有项目都那能用的，不一定能很好的针对当前项目。
配置.cursorrules的作用
指定项目技术：不同项目用到的技术很可能是不一样的，所以需要单独指定，比如我们用到的是react+ts+vite+threejs
设定开发规范：包括git提交规范，代码eslint规范，class,function等命名规范
引导AI的问题解决思路：如遇到某些私有知识库或某些特定流程才能解决的问题，可以引导AI查找特定知识库和文档
创建自定义指令：指定AI的系统自定义提示词comstom instructions
这样的预设能显著提高 Curosr 生成代码的准确性和相关性，更好地符合项目需求。推荐2个比较好的cursorrules指令网站1、https://cursor.directory/
2、https://cursorlist.com/
开始让cursor工作
我们把自己的需求，可以先写在readme.md这个文件里。如果你没有概念要怎么做一个游戏，流程是什么，那么你可以使用ctrl+L和大模型交流，让他指导你，或者去ChatGPT网站里直接问gpt该怎么设计一个游戏，他会给你方案，接着你就拿着方案放到这里。
tips: 快捷键介绍
CHAT：使用ctrl+L快捷键调用。主要是对话功能，任何问题都可以问，chat中的@codebase是一个强大的功能，允许AI扫描整个项目代码，来提供更全面的上下文，适合处理大型项目，具备跨代码文件分析。
COMPOSER：使用ctrl+I快捷键调用。功能十分强大，侧重于项目开发，拥有跨文件代码生成编辑能力。可以在短时间内完成项目的初始构建。我们整个项目95%都是用这个功能来开发。我们按ctrl + I 打开cursor的高级composer模式，选择agent模式（支持自动创建文件，自动运行命令行）
然后输入框上面有个➕号，我们选上写好的readme.md文件，然后让他开始写游戏。
很快，cursor就开始工作了，他们会先创建一个框架，然后把整体功能的大致流程跑出来。遇到需要手动输入的记得输入一下。
基本项目框架可以看到已经完成。cursor一次性创建了几十个文件。
创建完项目，cursor会自动安装依赖（必要的插件等，要在浏览器实时看到游戏运行效果，必须要有这一步）
安装完依赖，可以看到类似以下的链接，你就可以在自己的浏览器看到效果了。
我们在浏览器输入上面蓝色的地址，或者按住ctrl再点击链接也可以跳转。
接下来就开始慢慢的，一点一点的调整，我直接还是在刚刚对话框继续提需求。
继续提需求中…
方块太丑了，我们可以选择加上一些模型，推荐一个游戏贴纸网站，里面也有很多免费无版权的3D模型。https://sketchfab.com/
下载完模型，拷贝到项目目录中去，一般来说，静态资源拷贝到 /public目录下面，或者/static下面
我们在浏览器运行的时候，会遇到各种各样的错误，不要灰心，因为这很正常，你只需要把控制台的最近的日志拷贝给他，他会想办法解决
有的时候也会遇到死循环，cursor自己一刻不停地自问自答的修改了25个轮回，支持触发了cursor的agent模式的单次对话最大次数。一共写了4010行代码（全是垃圾错误代码），写了接近6分钟。
遇到这样的就只能恢复到上一次对话的代码，点击composer对应历史记录的restore按钮，就可以恢复到那一次的对话之前的代码（好好利用这一功能，后面我的经验之谈里有讲）
继续提需求，给模型加动作，给游戏加音乐…
tips: 推荐个游戏声音下载：https://pixabay.com/zh/sound-effects/
做完项目还需要打包部署项目，如果是不需要登录，没有后端，那么可以使用vercel部署，也可以使用自己购买的服务器部署。部署之后，如果有后端接口可能需要代理转发。因为篇幅原因，这里暂时省略，后续有需要可以加群关注了解。
经验之谈
新手使用composer功能修改代码的时候需要注意的点，我使用这么长时间总结的，了解和掌握后，你会比别人节省10倍的时间！
1、代码行数
cursor目前是无法找到对应行数的代码，不要跟AI说什么“请把第5行代码优化一下”这类指令，你可以直接鼠标选中第5行进行复制，然后在chat或composer里面直接粘贴。
2、上下文历史
对话字数多了以后，它忘记之前的对话。如果你的功能已经进行了很多步骤。比如已经对话了30-50次了，或者你的功能达到了一个1.0阶段性可用版本（注意请尽量细分你的功能，别想着一把出成品，这玩意也和sd抽卡一样，只不过现在出优品概率大，但是也有次品）
3、测试代码
每次生成都要去测试代码，避免多轮以后，功能混乱。现在你就是公司老板，cursor就是你的员工。你要时不时的测一下他的成果。因为他“看不到”成品（cursor是无法看到脚本运行时候的错误的），所以需要尽量引导cursor增加调试代码，需要你截图或者复制控制台打印的日志给他看。
4、代码回溯如果某一个bug一直无法修复，建议使用restore回溯到之前的某个版本。这就是文章之前提到一定要细分你项目的功能。比如你要做个射击游戏，那么第一版你先实现一个“简单射击功能，方块可以自由移动，进行发射子弹”那么这一个版本的功能测试完以后，你就可以换一个对话框进行下一版本迭代。这样即使下一个版本出现问题（比如一个bug解决了几小时都搞不定），你可以快速选择之前的对话框，避免在错误的代码上越陷越深。方法是：选择最近的那个对话，点击工具栏里的restore按钮。5、chat和composer搭配使用利用chat对话了解项目规划，需要用到的技术，技巧，产品设计，策划等等，除了代码以外你自认为薄弱的地方，都可以发挥大模型的优势，发挥他的创造性和想象力，少用命令式的交流（除非你很懂、很专业）限制AI的发挥。拿到方案以后，你再组织语言让composer去进行实现你的需求。6、解决bug全自动的composer开发模式，代码bug不可避免。如何快速帮助cursor定位错误是个技术活。如果是对于新手小白，建议在功能开发过程中，遇到自己觉得满意的节点，请上传git代码或者新起一个对话框，这样可以避免cursor在进行了无数轮代码后你发现还不如你最初的一版。对于非常复杂的项目中的某一个小功能一直有bug，为了避免cursor改动较大（他会随意重构项目，有时候的改动会让你震惊😂），你需要让cursor先简化代码，实现一个最基本的需求，一步一步定位bug所在，通过日志先将问题定位到大的组件、大的方向，然后再从小的方向输入详细的日志或截图给cursor。
暂无评论内容