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

相关推荐
Mintopia几秒前
Three.js ArrowHelper:三维世界里的 “方向向导”
前端·javascript·three.js
归于尽2 分钟前
浏览器和 Node.js 的 EventLoop,原来差别这么大
前端·node.js·浏览器
雲墨款哥2 分钟前
Vue 3 路由管理实战:从基础配置到性能优化
前端·vue.js
Jacob02346 分钟前
JavaScript 模块系统二十年:混乱、分裂与出路
前端·javascript
独立开阀者_FwtCoder12 分钟前
Vite Devtools 要发布了!期待
前端·面试·github
独立开阀者_FwtCoder12 分钟前
国外最流行的 UI 组件库!适配 Vue、React、Angular!
前端·vue.js·后端
CodeSheep19 分钟前
小米汽车这薪资是认真的吗?
前端·后端·程序员
白白李媛媛25 分钟前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
晴殇i33 分钟前
前端内容保护:如何有效防止用户复制页面内容?
前端·javascript·css
程序猿阿伟38 分钟前
《声音的变形记:Web Audio API的实时特效法则》
开发语言·前端·php