半个小时利用 cursor+Zion 全程无代码开发了一个线上小游戏

niuzicheng203

于 2024-10-08 18:15:11 发布

阅读量949

点赞数 10

文章标签： python 编辑器前端人工智能自然语言处理

本文链接：https://blog.csdn.net/niuzicheng/article/details/142765916

版权

把Cursor做出来的应用通过 Zion快速部署到线上-AI智能体代码编辑神器最佳实践

大纲
引言
介绍2048小游戏的规则和操作方式
概述开发工具：CursorAI和Zion
开发环境搭建
下载和安装Cursor代码编辑器
配置和使用Cursor编辑器
创建和配置开发目录
开发过程
使用CursorAI开发定制组件
导入组件到Zion编辑器
通过拖拽方式搭建2048小游戏
实时预览和调整组件
后端配置
可视化后端数据库的创建和管理
第三方API对接和自定义行为流
AI工具的使用
介绍Cursor代码编辑器的功能
使用AI开发定制组件的步骤
项目管理和发布
项目脚本指令的使用
代码检查和打包测试
发布和预览最终产品
总结
完成项目的回顾
项目成果的展示和分享
内容总结
当然可以帮助您重新排版文档。请您将文档发送给我，然后我会将其重新排版，并将结果发送给您。当然可以帮助您重新排版文档。请您将文档发送给我，然后我会将其重新排版，并将结果发送给您。
一句话总结
本文详细介绍了如何使用CursorAI和Zion工具开发一个2048小游戏，从环境搭建到最终发布的全过程。

观点与结论
无代码开发：通过CursorAI和Zion，用户可以无需编写代码，通过拖拽方式快速搭建应用。
AI辅助开发：Cursor代码编辑器提供了强大的AI功能，帮助开发者快速生成和调试代码。
可视化后端：Zion提供了可视化的后端数据库管理，简化了数据表的创建和关联。
项目发布：完成开发后，可以通过简单的指令将项目发布到互联网，实现可访问的链接。

自问自答
Q: 2048小游戏的操作方式是什么？ A: 在手机上通过滑动屏幕，在电脑上通过方向键操作，将相同数字的方块碰撞在一起累积积分。

Q: Cursor代码编辑器的主要功能有哪些？ A: 提供chat模式和composer模式，支持代码生成、bug修复、样式重构等功能。

Q: 如何使用Zion搭建2048小游戏？ A: 通过拖拽组件到页面中，配置组件的样式和交互功能，实时预览效果。

Q: 如何发布开发好的2048小游戏？ A: 通过npm构建和代码检查工具检测后，使用发布指令将项目发布到互联网。

Q: 开发过程中遇到的问题如何解决？ A: 通过AI工具的辅助，如Cursor代码编辑器的chat模式，可以快速定位和修复问题。

Q: 开发2048小游戏需要哪些技术背景？ A: 主要依赖于CursorAI和Zion工具，无需深入的编程知识，适合初学者。

关键词标签
2048小游戏
CursorAI
Zion
无代码开发
AI辅助开发
可视化后端
项目发布
适合阅读人群
对无代码开发感兴趣的初学者
希望了解AI辅助开发的开发者
对2048小游戏开发感兴趣的用户

术语解释
CursorAI：一个AI驱动的代码编辑器，支持代码生成和调试。
Zion：一个无代码开发平台，提供可视化的页面搭建和后端管理功能。
Vite：一个前端构建工具，用于快速打包和开发前端项目。
React：一个用于构建用户界面的JavaScript库。
TypeScript：一种强类型的JavaScript超集，提供更好的类型检查和开发体验。
npm：Node.js的包管理工具，用于安装和管理项目依赖。
npx：npm的一个工具，用于执行npm包中的命令。
npm构建：通过npm命令将项目打包，生成可发布的文件。
代码检查工具：用于检测代码中的错误和潜在问题的工具。

视频来源

https://www.bilibili.com/video/BV1RbxsenEB7?p=1

讲座回顾

00:00:00-00:00:14

大家好，我是Zack。本期我将分享如何使用Cursor和Zion制作一个2048小游戏。首先，让我们看一下这个小游戏。请点击此处。

00:00:14-00:00:38

链接过去的规则是：我们可以通过方向键将两个数字相同的方块碰撞在一起，从而累积积分。在手机上，可以通过滑动屏幕来移动方块；在电脑上，则通过上下左右键操作。

00:00:38-00:00:58

在手机上，我们通过上下左右滑动来操作。开发方案主要依赖于CursorAI的代码编辑器和Zen的后端。

00:00:58-00:01:06

我们会生成一个2048小游戏，这是一个无代码编辑器。

00:01:06-00:01:11

它提供了通过拖拽即可实现的功能。

00:01:11-00:01:45

在搭建小程序或Web应用时，您可以在编辑器页面中进行操作。该页面提供了页面栏，允许您新增多个页面。在添加组件栏中，您可以选择多种类型的组件，包括展示类、输入类、容器以及其他组件。此外，您还可以通过代码编写自定义的代码组件。所有组件均可通过拖拽或双击的方式添加到页面中。添加完成后，您可以在页面右上方进行进一步的配置和调整。

00:01:45-00:02:24

实时预览，点击即可查看添加的组件效果。在首页拖入文本按钮后，可在实时预览界面立即看到效果。通过聚焦选中组件，可配置其样式、宽度尺寸、背景颜色，并绑定点击行为等交互功能。

00:02:24-00:03:02

它还提供了一个可视化的后端数据库，我们可以通过添加数据表，在数据表下添加数据字段，并选择字段类型。它支持多种类型，并允许在数据表之间创建关联关系。数据表交接完成后，我们可以通过可视化的图形查看表与表之间的结构。

00:03:02-00:03:05

顶部快捷工具栏也提供了此功能。

00:03:05-00:03:12

第三方API的对接，提供了可定制的自定义行为流，支持AI的运行。

00:03:12-00:03:33

主要是通过CurterAI开发一个定制组件，并将其导入到Zion工具中。然后，我们可以在Zion编辑器中通过拖拉拽的方式进行搭建。因此，我们首先需要开发一个代码组件。目前，该组件已经完成。

00:03:33-00:03:55

这个是我之前开发的一些组件，我们主要是通过点击类似图标的按钮来启用某些定制组件。启用后，这里可以列出多个组件库。实际上，每个组件库下面都只有一个组件。OK，那我们回到正题。

00:03:55-00:03:58

有一个公主文档，我们可以回到个人中心。

00:03:58-00:04:22

点击右侧的帮助文档，然后找到高级功能配置，下方有代码组件配置说明，我们便进入了官方文档，其中详细介绍了如何开发定制组件。今天，我们将结合该文档，利用AI开发定制组件。

00:04:22-00:04:36

我们再介绍一下我们用到的AI工具。Cursor代码编辑器是最近比较火的AI编辑器工具。它的功能特别强大。我们可以通过这个链接或搜索引擎进行搜索。

00:04:36-00:04:39

进入其官方网站。

00:04:39-00:04:42

这里它提供了一个下载界面。

00:04:42-00:04:45

这个是一个下载界面，我们可以将该ID下载到本地。

00:04:45-00:04:48

我们点击下载，然后逐步进行配置。

00:04:48-00:04:52

安装完成后，我这里已经在中。

00:04:52-00:06:48

桌面上已安装完成，无需重复安装。打开Cursor编辑器，需先返回桌面，新建一个名为“测试”的文件夹，随后将其拖入编辑器中。现已成功打开项目文件夹，该文件夹提供了一个大纲结构，类似于版本管理工具的界面，与VSCode极为相似，因其本质上是VSCode的一个分支。

通过指令Ctrl+L，可打开对话界面，该界面提供两种模式：chat模式和composer模式。在chat模式下，可针对特定文件进行交流，编辑器会指导如何修改该文件；而在composer模式下，可针对整个项目进行操作，如直接完成bug修复或样式重构。此外，还可添加文件，并通过输入“@”符号，引入本地知识库。

首先，查看相关文档，了解自定义组件的开发规范。下期将详细讲解小誥orean和小誥的内容。

00:06:48-00:07:00

这里告诉我们，首先需要创建一个个人目录，然后在个人目录下运行相关命令。

00:07:00-00:07:11

因为我已经将指令整理到文档中，首先需要全新安装开发者工具。

00:07:11-00:08:50

打开该目录，通过命令行方式执行命令，查看文档并粘贴安装开发工具。安装完成后，出现两个警告，但暂时忽略。随后登录 npx.com，登录成功后，创建新项目，命名为“2048”。项目模板正在拉取中，完成后执行发布命令。

在开发过程中，可进入项目查看脚本指令，包括 npm 自带的安装依赖和框架内定义的打包测试功能。期间遇到请求错误，需进一步检查。

00:08:50-00:08:52

00:08:52-00:09:01

请进入我们的文件夹查看是否已经创建成功。若出现错误请求，我们将继续实现。

00:09:01-00:09:13

这个不管它，然后我关闭先前的窗口，直接打开我们刚才安装好的目录。

00:09:13-00:09:28

并且使用Cursor将其打开。这就是我们刚才安装的目录。我们通过终端安装依赖。

00:09:28-00:09:44

OK，安装完成后，我们尝试运行一下。

00:09:44-00:11:26

OK，本地运行成功后，我们打开预览，可以看到一个按钮，点击时会出现弹窗，这是本地自定义组件的展示。目前系统提供了24个示例组件，这些项目的结构均为默认配置，使用Vite打包工具，采用React和TypeScript的编码规范。

我们主要关注src目录下的components文件夹，每个components文件夹代表一个组件。例如，查看data table组件的编写方式，可以看到其代码实现，但今天我们不会深入编写。

项目中任意位置点击Ctrl+L，通过component形式，使用at命令直接引用文档。该文档可通过提供的开发文档获取。

00:11:26-00:13:40

将链接复制后，点击“Enter”键，系统开始导入。同时，将标题一并复制过来，点击“Confirm”确认。等待导入完成后，文档中将包含代码组件的说明，指导开发者按照规范进行开发。

接下来，提示在当前项目中新增一个组件，名为“基于文档开发的2024效果”。系统正在读取项目文件，已打开多个文件。询问是否进行配置，若熟悉代码，可查看具体修改内容。此处不应修改，直接拒绝，系统将不会更改文件。

系统提示将创建一个名为“gamer024”的组件，点击接收。可以看到，文件数量从245个变为6个，这是系统创建的新组件，其规范与提供的示例相似。运行结果显示为正常。

00:13:40-00:13:45

对，网络有时会崩溃，我们重试即可。

00:13:45-00:14:05

我们这里其实已经运行起来了。因为先前我们已经运行起来了，所以这里没有什么变化。由于它没有启用主件，我们可以尝试将整个文件夹进行操作。我们找到这个代码组件。

00:14:05-00:15:03

你改错了组件，不要修改原始的组件，需要开发2024小游戏。这里他已经开始了导出导入，之前改错的组件需要恢复回来。我们先不管它，先接受。

00:15:03-00:15:27

这个时候去见面看，我觉得应该是没有什么变化的。然后我们可以直接告诉他，这里这个名字写错了，我说错了，应该是2048。

00:15:27-00:16:05

这里重新创建了2048小游戏组件，这部分是多余的，可以删除。现在，请在页面上使用该组件。经过几轮交流，组件已经生成完毕。

00:16:05-00:17:44

然后我们在这个页面上可以看到这个结构，重启游戏，但这里还有一些报错，我们需要让他改正。这是移动端和PC端，我这里已经让他先处理了，上下左右没有反应，他给我们改好了，UI样式。这个时候我们看他有没有提供美化后的样式，OK，我们告诉他移动端适配有问题，下件报错了，这个也让他们去改一下，然后看一下他移动端适配的效果，样式不好看，这个是他生成的结果。然后有个问题是这个起盘太巧了，让他全部重新设计一下，看一下他重新改出来的样式，可能有一点bug，但是这个我们通过不断的给他提示，应该是能修复的。OK，好了，我们这个就已经开发完了，而且还自动去适配了这个移动端和PC端，我们需要把

00:17:44-00:18:56

在将此组件发布前，我们首先进行npm构建，并使用代码检查工具进行检测。结果显示有0个错误和3个警告，暂时忽略警告，直接进行打包测试。

打包过程中发现文件出现问题，将问题提交至chat以解决bug，提示删除某行代码即可。我们按照建议删除该行代码，再次进行测试，问题已解决。

00:18:56-00:19:10

我们刷新界面，检查功能是否正常，未发现问题。继续进行打包操作，现已成功完成打包。

00:19:10-00:19:31

成功后，我们通过一个指令回到控制台。如果不清楚，可以输入functorz查看相关信息。这里提示我们有一个发布指令，直接使用functorz进行发布。

00:19:31-00:19:36

这个已经传进来了。GAME2048。

00:19:36-00:19:43

这里我们已经引入进来了，可以新建一个项目。

00:19:43-00:19:48

应该有一个现成的项目，我可以直接使用。

00:19:48-00:20:32

我们通过添加组件并配置代码组件，即可选用刚才的组件。此时，我们在下方可以看到代码组件。该组件为在线2048游戏，将其拖入并绑定数据，如积分设为0，最佳积分设为0，并设置Force。完成后，我们需要部署，并可先进行预览。

00:20:32-00:20:38

它已经发布，但在样式上可能存在一些问题。

00:20:38-00:21:51

那这时候我们就继续问AI了，为什么把我们的文档给到他，为什么样式全部不见了，只能看见文字。这里他给到我们解释，与CSS模块的处理有关，建议改为类名样式。

00:21:51-00:22:06

看一下这个样式没有变化，这个时候它改成了内联样式。

00:22:06-00:23:15

要先修改版本号，从0.2改为0.3。然后执行代码检查，忽略警告，直接打包。将打包后的文件交付。

00:23:15-00:23:22

OK，这里打包成功了，不过这个样式。

00:23:22-00:23:48

多多少少有点问题，但功能还行，那我们去给他，先给他发布上去看一下吧。Funkterze Publish，开始上传。0.0.3，上传完成。

00:23:48-00:23:52

这个时候我们回到项目上面，我们去看一下。

00:23:52-00:24:02

可以在这个个人中心的右上角看到，这里003已经好了，我们这个时候回答。

00:24:02-00:24:06

到页面上。

00:24:06-00:24:12

我们可以在这里添加组件，并重新选择版本。

00:24:12-00:24:56

选择后，为确保安全，我首先删除主线，重新拖入。此时，此处才会显示。将所有内容拖入后，先删除一个，然后添加一个。接着，我们为其绑定数据，积分设为0，FORCE，更新一次，再更新一次。

00:24:56-00:25:01

也可以在预览界面查看。

00:25:01-00:25:06

目前没有任何内容，我们打开查看一下。好的，这就是当前的显示。

00:25:06-00:25:15

完成了，我们的样式已经呈现，该代码组件的开发也已成功。此时，我们需要让AI进一步协助你。

00:25:15-00:25:20

我们调整完毕后，继续进行开发工作。

00:25:20-00:25:24

完美。

00:25:24-00:25:34

所以它开始为我们创建样式。直接应用，然后我们再分点。

00:25:34-00:25:49

看一下。这个也挺好看的。好了，我们就把这个改一个版本上传，这时我们使用 npx FundersPublish。

00:25:49-00:26:08

打包完成后，我们将对版面进行调整，并重新上传。

00:26:08-00:26:11

那我们回到这里。

00:26:11-00:26:33

然后我们找到该图标，选择0.5，点击切换。首先删除原有内容，然后进行切换操作。

00:26:33-00:28:03

切换，然后将新组件拖入，设置其宽度为满屏，高度亦为满屏。配置参数如下：初始分数为0，最高分数为999，但实际应为1024。是否结束FORCE，发布后，等待结果。检查发现，上下左右键均能正常监听。由于未处理滚动事件，需通过游戏结束再次测试。发现少许bug，但通过此方法可成功开发。UI设计颇为美观。此即我们的代码组件，虽存在威胁，但AI可协助编写。今日亦是如此，小伙伟转发生。Sepfhphphphphphphphphphphphphhphphphphphp arkadaşlar Good.о Same learning management.