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

相关推荐
2501_920931709 小时前
React Native鸿蒙跨平台采用ScrollView的horizontal属性实现横向滚动实现特色游戏轮播和分类导航
javascript·react native·react.js·游戏·ecmascript·harmonyos
0思必得011 小时前
[Web自动化] Selenium处理动态网页
前端·爬虫·python·selenium·自动化
东东51611 小时前
智能社区管理系统的设计与实现ssm+vue
前端·javascript·vue.js·毕业设计·毕设
catino11 小时前
图片、文件的预览
前端·javascript
2501_9209317013 小时前
React Native鸿蒙跨平台实现推箱子游戏,完成玩家移动与箱子推动,当所有箱子都被推到目标位置时,玩家获胜
javascript·react native·react.js·游戏·ecmascript·harmonyos
layman052813 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔13 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李13 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss
_OP_CHEN13 小时前
【前端开发之CSS】(一)初识 CSS:网页化妆术的终极指南,新手也能轻松拿捏页面美化!
前端·css·html·网页开发·样式表·界面美化
啊哈一半醒13 小时前
CSS 主流布局
前端·css·css布局·标准流 浮动 定位·flex grid 响应式布局