不用写代码!教你如何用Cursor AI轻松开发2048游戏

文摘   2024-09-11 07:31   新加坡  

AI 正在改变产品开发的游戏规则

随着 AI 技术的飞速发展,产品开发的门槛正在大幅降低。在不久的将来,几乎人人都有可能成为产品经理。过去,开发产品往往需要深厚的编程知识和技术背景,但现在,这一切都在悄然改变。

Cursor 这样的 AI 工具正在打破传统的技术壁垒,让更多富有创意的人能够快速做出自己的产品原型而无需依赖技术团队的早期介入。

Cursor 的最大特点在于它能够通过自然语言生成代码。你只需描述你的需求,AI 就会为你自动生成相应的代码框架。这意味着,即使你不懂代码,只要你清楚自己想要什么,Cursor 就能帮你实现。

这一革命性的变化让那些对技术陌生,但拥有创意和产品思维的人,能够轻松地将自己的想法变为现实。未来的产品经理们将不再像过去那样严重依赖技术团队,可以更专注于业务,去发现市场潜在的机会。

用 Cursor AI 开发 2048 游戏的详细步骤

2048 游戏是一个很经典的游戏,算法也不复杂,GitHub 上有很多开源的实现方式,这里我尝试不用编程,用 Cursor AI 开发来出一个完整的 2048 游戏,以下是详细步骤:

  1. 准备参考图片:打开搜索引擎,找到并保存一张 2048 游戏的截图作为参考。
  1. 启动 Cursor 并上传图片:打开 Cursor 编辑器,进入 Composer 界面。在对话框里上传你刚刚保存的 2048 游戏截图。
  2. 描述你的需求:在输入框中用自然语言描述你的需求,例如:"基于上传的图片,创建一个浏览器版的 2048 游戏"。Cursor 会理解你的要求,并开始自动生成代码。
  3. 生成代码文件:稍等片刻,Cursor 会自动生成三个核心文件:index.html(游戏界面)、styles.css(样式)和 script.js(游戏逻辑)。点击"Apply"按钮将这些文件保存到你的项目中。
  4. 运行游戏Cursor 内置了 Live Server 插件,类似 VS Code 的功能。

右键点击 index.html 文件,选择"Open with Live Server"

打开浏览器的方式,一般是http://127.0.0.1:5500,具体端口号看Cursor右下角的数字。

  1. 调试与优化:如果游戏中出现问题,比如方块无法移动或分数显示错误,不用担心。利用 Cursor 的调试工具,通过自然语言描述问题,如"修复方块无法移动的问题",Cursor 会帮你调整代码直到问题解决。

这是开发出的游戏初始画面:

整个开发过程几乎不需要任何编程知识。只要按照这些步骤操作,你就能完成一个功能完整的 2048 游戏。

这是一次游玩测试的截图:

AI 辅助调试:让开发更加高效

在游戏开发过程中,难免会遇到一些小问题。但是,使用 Cursor 的 AI 调试功能,这些问题都可以轻松解决。你只需用自然语言描述问题,AI 就会自动帮你优化代码,真正做到无需编程经验也能解决技术难题。例如:

  • 当发现按下方向键后,游戏中的方块没有正确移动,只需输入:"修复方块无法移动的问题"。
  • 如果计分板没有正确显示分数,可以输入:"调整计分板显示当前分数和最高分数"。

AI 会立即分析代码并进行修复,自动调整相关逻辑,让游戏恢复正常运行。这种智能调试功能不仅大大减少了手动编写和修复代码的时间,还让整个开发过程变得更加高效和直观。

从 GPT4 切换到 Deepseek:权衡与应对

这次用 Cursor 开发 2048 游戏也发现了 DeepSeek 的一个短板,就是对话框暂时还不支持图像处理,以至于我不得不先切回 GPT4o 来完成第一次开发流程。

对于游戏或网站开发来说,使用图像进行需求描述往往更加直观。比如上传一张 2048 游戏的截图,AI 可以直接参考图像的界面布局进行开发。然而,Deepseek 暂时无法处理图像,这意味着所有需求必须通过文字描述来表达。这增加了沟通的复杂性,尤其是在涉及界面样式调整或功能细节时。

为了应对这个限制,我们需要提供更详细的游戏规则和需求说明,比如明确规定 2048 游戏的网格大小、方块生成规则、分数显示等细节。这种方式虽然可行,但相比直接用图像描述需求,效率稍低。因此,图像处理能力的缺失是目前 Deepseek 在 AI 开发中的一个明显限制。为了让对接 Deepseek Cursor 理解我的需求,我整理了一个 2048 游戏规则和开发需求:

2048 游戏规则
游戏网格:

1. 4x4 网格:游戏在一个 4x4 的网格上进行 (R01)。
2. 每个格子只能放一个数字方块:每个格子最多只能容纳一个数字方块,因此每个方块都有一个唯一的网格位置 (R02)。
3. 数字方块的值:每个数字方块的值是零或 2 的幂次方 (R03)。
4. 方块移动范围:方块只能在 4x4 的网格内移动,不能移出网格 (R04)。
5. 初始方块:游戏开始时,网格中会随机出现两个数字方块,方块的值是 2 或 4 (R05)。
6. 新方块生成规则:每次移动后,将随机生成一个新方块,90%的概率为 2,10%的概率为 4 (R06)。

方块移动:

1. 移动方向:方块可以向上、下、左、右四个方向移动 (R07)。
2. 有效移动:移动只有在相邻的格子中存在相同的值或者为空时才有效 (R08)。
3. 方块全局移动:每次移动时,所有方块都会向按下的方向滑动 (R09)。
4. 方块最大移动距离:按下方向键时,方块会沿着移动方向尽可能远地滑动 (R10)。
5. 方块碰撞:每个格子只能容纳一个方块,因此移动时会发生方块碰撞 (R11)。
6. 控制方式:玩家通过键盘上的四个箭头键来控制方块移动 (R12)。
7. 每次有效移动后生成新方块:每次有效移动后,网格中会出现一个新的方块 (R13)。

方块碰撞:

1. 合并规则:当两个相同数字的方块碰撞时,它们会合并成一个新的方块,值为原来两个方块的和 (R14)。
2. 不合并情况:当方块与不同值的方块相撞时,它们不会合并 (R15)。
3. 一次合并限制:每个方块在一次移动中只能合并一次 (R16)。
4. 得分增加:每次合并方块时,合并后的值会增加到总得分中 (R17)。
5. 最高值更新:每次合并时,如果生成的方块值超过当前最高值,则更新最高值 (R18)。

胜负规则:

1. 胜利条件:当两个 1024 的方块合并成一个 2048 的方块时,游戏获胜 (R19)。
2. 失败条件:如果在游戏结束前没有可移动的合法操作,玩家输掉游戏 (R20)。
3. 获胜后继续:获胜后,玩家可以选择继续游戏或重启 (R21)。
4. 继续游戏的网格状态:玩家选择继续后,游戏会保持当前的网格状态 (R22)。
5. 2048 以上的方块:在继续游戏中,玩家可以合成值大于 2048 的方块 (R23)。
6. 无限得分增加:玩家可以“无限”增加得分,直到没有合法的移动操作为止 (R24)。
7. 继续后的失败条件:在继续游戏状态下,如果没有合法移动,游戏结束,玩家失败 (R25)。

用户界面需求

1. 显示网格:界面应展示一个 4x4 的网格 (I01)。
2. 显示网格中的方块:网格中的每个方块都应该展示其当前的值 (I02)。
3. 当前得分:界面上应有当前得分的显示 (I03)。
4. 最高得分:界面上应显示玩家的最高得分 (I04)。
5. 最高方块:界面上应显示玩家当前到达的最高方块 (I05)。
6. 重玩按钮:界面应有一个按钮,允许玩家重新开始游戏 (I06)。
7. 方块显示数值:方块应显示其当前的数值 (I07)。
8. 方块颜色:不同数值的方块应有不同的颜色 (I08)。
9. 胜利对话框:当玩家胜利时,弹出对话框提示玩家获胜,并询问是否继续 (I09)。
10. 失败对话框:当玩家失败时,弹出对话框提示玩家失败,并询问是否重玩 (I10)。
11. 方块生成动画:新生成的方块应伴有“jojo”动画 (I11)。
12. 合并动画:当两个方块合并时,应伴有跳跃动画 (I12)。
13. 方块移动动画:当方块移动时,伴随滑动动画 (I13)。

在对话框输入需求,要求创建一个基于浏览器的 2048 游戏,Cursor 这次在生成了三个文件后没有自动保存,最后我是通过 copy&paste 大法生成的三个文件,其他的都是通过对话框去调试,和上面的步骤没什么区别,只是画面因为没法描述清楚,和找到的截图就不太一样了。

结语

通过使用 Cursor AI 编辑器,即使是没有编程经验的新手,也能够轻松开发出自己的 2048 游戏。这不仅是一种充满乐趣的学习体验,更是展示你创造力的绝佳机会。如果你对开发游戏有兴趣,强烈推荐尝试 Cursor,它将为你打开通向编程世界的大门,让你在短时间内实现自己的创意。

值得一提的是,Cursor 背后的团队也非常令人钦佩。这个仅有 12 人的小团队,竟然在众多大厂的激烈竞争中脱颖而出,成为 AI 工具领域的佼佼者,展现了小团队大能量的魅力。

技术更新提示:

由于 Deepseek 模型最近升级到了 V2.5 版本,接口参数有所调整。在使用时需要注意关闭其他模型接口,以确保 Deepseek 的接口正常运行。此外,由于暂时借用了 OpenAI 的接口,需要覆盖 OpenAI 的 base URL。请确保在使用过程中注意这些细节,以获得最佳的开发体验。

方案 1:Cursor + DeepSeek 官方 API

  1. 注册 Deepseek 并生成 API Key:https://platform.deepseek.com/usage
  2. 进入 Cursor 设置,将 OpenAI API Key 的 Base URL 替换为 Deepseek 的 URL - https://api.deepseek.com,粘贴API Key。
  3. 点击 Add model,输入模型完整名字:deepseek-coder 或者 deepseek-chat

方案 2:Cursor + SiliconFlow API

  1. 点击下面的链接注册 SiliconFlow,可以获得 2000 万的 token - https://cloud.siliconflow.cn/i/pPMOBPbj
  2. 生成 API 密钥。
  3. 进入 Cursor 设置,将 OpenAI API Key 的 Base URL 替换为 SiliconFlow 的 URL - https://api.siliconflow.cn/v1,粘贴API Key。
  4. 点击 Add model,输入模型完整名字:deepseek-ai/DeepSeek-V2.5。SiliconFlow 提供多种模型选择,可替换 Add Model 添加模型名字进行测试和选择。


蔡荔谈AI
AI科普 AI培训 超级个体 创业
 最新文章