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

相关推荐
jktantan8 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么8 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_962885729 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel9 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓9 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人10 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every10 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad10 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新11 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易12 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员