谁懂啊!家人们,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 则源源不断地给出回应,还生成可视化的网页,让我能直观地看到开发进度。这让我真切地感受到,未来的开发模式或许会像与一位心有灵犀的开发者聊天一样轻松自然。不得不说,这种全新的开发体验既令人惊叹,又带着一丝让人敬畏的科技感。有点恐怖了老铁。

相关推荐
Nan_Shu_61414 分钟前
学习: Threejs (2)
前端·javascript·学习
G_G#22 分钟前
纯前端js插件实现同一浏览器控制只允许打开一个标签,处理session变更问题
前端·javascript·浏览器标签页通信·只允许一个标签页
@大迁世界38 分钟前
TypeScript 的本质并非类型,而是信任
开发语言·前端·javascript·typescript·ecmascript
GIS之路1 小时前
GDAL 实现矢量裁剪
前端·python·信息可视化
是一个Bug1 小时前
后端开发者视角的前端开发面试题清单(50道)
前端
Amumu121381 小时前
React面向组件编程
开发语言·前端·javascript
持续升级打怪中1 小时前
Vue3 中虚拟滚动与分页加载的实现原理与实践
前端·性能优化
GIS之路1 小时前
GDAL 实现矢量合并
前端
hxjhnct1 小时前
React useContext的缺陷
前端·react.js·前端框架
冰暮流星1 小时前
javascript逻辑运算符
开发语言·javascript·ecmascript