Cursor实战:做了一个2048小游戏

文摘   科技   2024-12-26 20:03   山东  


点击上方🔺公众号🔺关注我✅

你好啊,我是雨飞,见字如面感谢阅读,期待我们下一次的相遇。


做一个稍微复杂的应用要多久呢,以下面我们给社群朋友直播分享的2048小游戏为例,大概需要1-1.5小时就可以做出一个简单的前后端分离的网站。昨天给群里的朋友分享过了,效果很不错,期待大家的作品。今天,给各位粉丝们简单展示下制作过程。


展示界面如下:


代码结构:前后端分离,目录清晰。


整体过程也非常简单,可以和我们之前创建小游戏的步骤类似,分为三步。

第一步,和Cursor沟通自己想实现的功能,让他生成一个项目文档。
第二步,不断的和Cursor对话,去完善或者修改这个项目文档。
第三步,让Cursor根据这个项目文档,去实现功能。

其中,要达到不错的效果,2、3步都需要持续多次。

输入提示词:


生成文档之后,直接让Cursor根据当前的项目文档去实现代码。


剩下的就是反复和Cursor进行对话了,内容太多就不贴图了,我把生成的项目文档放在下面,大家可以直接拿去使用

# 2048 小游戏## 简介这是一个使用 Node.js (Express.js) 后端和 React 前端开发的 2048 小游戏网站。前后端代码分开存储。## 功能列表### 核心功能-   **游戏面板:**    -   4x4 的网格布局。    -   随机生成 2 或 4 的数字方块。    -   方块的合并规则:相同数字的方块在移动时合并,数值翻倍。-   **移动操作:**    -   支持上下左右四个方向的移动。    -   移动时,所有方块向指定方向移动到边缘或遇到其他方块。-   **得分计算:**    -   每次合并方块时,得分增加合并后的数值。    -   显示当前得分。-   **游戏结束:**    -   当所有方块都无法移动或合并时,游戏结束。    -   显示游戏结束信息和最终得分。### 可选功能-   **动画效果:**    -   方块移动和合并时的动画效果。-   **撤销操作:**    -   允许撤销上一步操作。-   **最高得分记录:**    -   记录并显示最高得分(本地存储)。-   **不同难度:**    -   提供不同大小的网格或不同的初始方块生成规则。-   **美观的界面:**    -   使用 HTML, CSS 和 React 组件来美化界面。## 技术选型-   **编程语言:** JavaScript (Node.js)-   **后端框架:** Express.js-   **前端框架:** React-   **UI 框架/库:** Material UI (@mui/material)-   **数据存储:** 本地存储 (localStorage)## 项目结构-   `server/`: 存放后端代码    -   `server.js`: Express.js 服务器入口文件    -   `routes/`: 存放 API 路由    -   `...`: 其他后端相关文件-   `client/`: 存放前端代码    -   `src/`: 存放 React 组件和相关代码    -   `public/`: 存放静态资源    -   `...`: 其他前端相关文件## 如何运行1.  确保你已经安装了 Node.js 和 npm。2.  克隆或下载项目代码。3.  在项目根目录下运行 `npm install` 安装依赖。4.  进入 `server` 目录,运行 `npm install` 安装后端依赖。5.  进入 `client` 目录,运行 `npm install` 安装前端依赖。6.  在 `server` 目录运行 `npm start` 启动服务器 (后端)。7.  在 `client` 目录运行 `npm run start` 或 `npm run dev` 启动前端开发服务器。8.  在浏览器中访问 `http://localhost:3000` (或其他你配置的端口)。## 贡献欢迎贡献代码,提出建议或报告错误。## 许可证MIT

如果有帮助,欢迎点赞收藏一键三连,有问题欢迎评论区交流。


和朋友一起创建了一个AI编程的交流群,适合零基础的新人,产品经理以及Cursor的爱好者。目前已经120余位朋友加入,现在早鸟价99元,满50人直接涨价50,截止到25年12月31日,感兴趣可以扫描下方二维码找我


❤️常驻小尾巴❤️

加微 1060687688,备注「公众号」,送你一份「AI工具大全与变现指南

推荐阅读

「雨飞同行」这是雨飞的介绍(第8版,交个朋友,限时送福利)

雨飞AI笔记
个人V:1060687688,添加后,发送暗号“777”送你一份副业与AI相关的见面礼。 雨飞个人号,AI算法从业者,在职场搞副业,探索一人企业。在AI时代,持续分享自己在学习、副业路上的所见、所思,记录雨飞个人IP打造中的心路历程。
 最新文章