谁懂啊!家人们,AI 帮我做出了“我的大学模拟器”网页小游戏

前言

大家都知道,我是个专注于后端开发的 Java 程序员。最近逛掘金的时候,偶然接触到了 AICode,这让我萌生了一个大胆的想法:作为一个后端开发者,能不能借助 AI 的力量,独立打造一个纯前端的小游戏呢?事实证明,这不仅可行,而且相当轻松,全程只需动动键盘就能搞定。我用的工具是 Trae CN

这是一个超厉害的 AI 代码生成平台,只要你清晰地描述需求,它就能迅速输出对应的 HTML、JS 和 CSS 代码。更棒的是,它还能理解上下文,就像一位勤勤恳恳的前端开发人员,对领导的指令言听计从,简称牛马。

开发缘由

我今年大二,还在校园里过着规律的上课生活。然而,学校课程所教授的内容大多有些陈旧,在如今的技术环境下早已不再常用。但没办法,课程是学校安排的,不去上课就面临挂科风险,迫于无奈,只能乖乖前往教室。有时候我就忍不住思考,这些课程对于未来的就业、考研、考公究竟有多大的实际帮助呢?想来或许只是为老师们提供了就业机会罢了。

闲话不多说,接下来就给大家展示一下我用 Trae CN 开发的 我的大学模拟器 。 网页链接: aicoding.juejin.cn/aicoding/wo... aicoding.juejin.cn/aicoding/wo... 写了两个版本,第一个很细,时间较长,第二个就不会

开发过程

由于主包不是很懂那些前端框架,自是略懂一些js,css,html,学过一点vue,但是我对于项目的需求还是挺懂的,于是我往输入框输入:

css 复制代码
生成一个基于html,css,js,的网页端小游戏名字《我的大学模拟器》
这个游戏是一个叫张三的01大学学生
通过在大学当中的选择来进行培养自己
每个月进行一次选择,每次有4个选项
通过这四个可以对自身的属性进行调
直接生成文件

我们可以看到:

他根据我们的需求生成了三个文件,那么效果如何呢:

基本已经欧克了,我只负责开口!但是我们发现样式太难看了。 于是:

复制代码
更改一下样式,让样式更柔和,偏叶黄一点

我们还发现,没有欢迎界面于是我们说:

复制代码
添加一个欢迎弹窗,点击开始后进入到游戏界面

在调试的时候我们发现,没有结局,并且选项类型太少,于是我们说:

复制代码
添加多点事件,太单调了。
一共有四个结局,一个好,两个平常,一个坏。

最后我们的网页小游戏基本完成了

利用 JueJin MCP 部署

通过 Trae 或其他支持 MCP 的 AI IDE 配置 MCP,并将前端项目(HTML/CSS/JS)一键发布到掘金的步骤

asdad

总结

回顾整个开发过程,我几乎没有亲自编写一行代码,只是不断地提出需求,而 Trae CN 则源源不断地给出回应,还生成可视化的网页,让我能直观地看到开发进度。这让我真切地感受到,未来的开发模式或许会像与一位心有灵犀的开发者聊天一样轻松自然。不得不说,这种全新的开发体验既令人惊叹,又带着一丝让人敬畏的科技感。有点恐怖了老铁。

相关推荐
开开心心就好6 小时前
批量提取PDF中的图片,直接导出原图
前端·javascript·支持向量机·智能手机·pdf·html·启发式算法
Setsuna_F_Seiei8 小时前
前端转型 Agent 开发 05 之 Agent Hooks 与 Checkpointer(让 Agent 从全自动转变人为可掌控)
前端·agent·ai编程
百万蹄蹄向前冲10 小时前
风扇转了一晚上MVP专家团翻车事故
前端·人工智能
默_笙10 小时前
🏛 给 AI 配一间办公室:Harness Engineering 六大模块与它的实现
前端·javascript
linux_cfan12 小时前
videojs v10 源代码系列解读:14 · 谓词守卫:在运行时安全地调用能力
前端·javascript·音视频
kyriewen12 小时前
我扒了 10,221 条 JD:腾讯技术岗 75% 在要 AI
前端·人工智能·ai编程
郑州光合科技余经理13 小时前
同城外卖小程序开发:下单成功后,后台导出能不能对上用户端状态
开发语言·前端·git·后端·uni-app·php·ai编程
IT_陈寒14 小时前
Vue的响应式让我熬到凌晨三点,原来漏了这个小细节
前端·人工智能·后端
Blanche150014 小时前
利用 RAG 为答疑机器人扩展知识范围
前端
天若有情67314 小时前
【纯前端小工具】公历生日转农历,批量查询每年农历生日对应的公历日期(GitHub Pages在线直接用)
前端·javascript·github pages·农历转换·lunisolar·网页小工具