以下是使用 Trae 写小程序的完整教程:
基础操作
功能优化
后续步骤
另外,公众号回复“字幕图片”,可获取源代码。将其保存成.html 文件,在浏览器打开就能使用。您还可以参考 https://openprocessing.org/ 中的创意,复制代码到 Trae 中用 AI 对话优化。
结合课程内容,完全可以做一些课堂互动小游戏,来活跃课堂气氛,寓教于乐!制作这样的小应用也很简单,一切交给Trae!以下是我的完整操作过程:首先右下角选中“DeepSeek-R1”--这一点是本文的基础,因为这个模型的脑回路不一般。然后尝试让AI给你设计一个小游戏。“用HTML来实现”这句话很重要,意味着我们不需要额外的环境配置和安装,一个随时随地都能打开使用的网页小游戏是非常方便的。它很快完成了一个自带得分系统的小游戏,点击代码框右上角的应用就制作了这么一个网页小游戏。找到存放这个网页的文件夹,打开就能使用了。在这个小游戏上,AI很贴心的设计了,每次在回答完成后自动制作新题目。看着这个页面时我想到了,是不是给这个小游戏加个倒计时系统,增加学生的注意力专注度。很简单,告诉AI,让它改即可。一顿操作猛如虎,又是咔咔一通代码生成,又是点击“应用”即可。结果它写错了,打开网页发现压根没有倒计时--很正常,现在AI的能力还没那么强--把错误告诉它,让它自己改就行。(实测这里把模型切换到deepseek-V3成功率会高一些,也可以多换换其他模型来尝试。)这下终于完成了,一个紧张有挑战的倒计时来也:
点击右上角应用。然后在文件夹找到它,双击浏览器打开,测试。效果不太对,生成的图片如下,重叠的部分盖住了之前的图片~~把结果贴给AI,把错误现象和期望的表现描述一下。让AI再迭代。AI第一次改把程序改得更糟糕了,可能是忘了最开始的要求是啥。于是把最初的图片也贴给它做对比。这下成功了。还有个小问题,再改。三轮对话终于搞定。接下来做保存功能。再调整细节:后面这几步,对程序员来说是宁可直接撸代码的。但测功能嘛总得测全了,看技术小白是不是也能搞定。实验下来很顺畅。是的,就这么简单。公众号回复“字幕图片”,获取源代码。保存成.html文件,在浏览器打开就能用。我是在技术和教育圈来回串的贪玩的好奇星人。欢迎点赞点收藏关注加星。也期待多多评论区交流。我曾写过的与AI编程有关的文章
解释:p5.js是一个专门用来创建图形和交互式体验的代码库,分形树是一种数学上的概念,可以生成很美的图形,常见的有雪花等。这里我们尝试用代码来画出一些美丽的图形。把这个提示词,复制粘贴到对话框内,点击右下角发送按钮,就可以看到AI开始工作了:看视频:[分形树_mPPcRmTvYGH.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/TjFwb1nBoorRUfxabGbcv1U8nWb?allow_redirect=1)怎么样,是不是够简单?你还可以在这个基础上继续去强化:完成后可以看到效果变化了:大家可以沿着这个方向继续去挖掘,比如:现在就变成更加绚丽并且有色彩变化的动效了:[分形树_QCjLVDWIkJ5.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/U8iLb6ohJoS9qlxZGM5ceCgQn0d?allow_redirect=1)类似这样的玩法,我们可以打开https://openprocessing.org/在里面查看各种创意,然后复制代码放到Trae里面,就能够用AI对话去优化,我给大家录个屏:[分形树下载代码_a1lSEtehMij.mp4](https://bytedance.feishu.cn/space/api/box/stream/download/all/OKLjbFKADoxk1IxmnVUcHYynnHd?allow_redirect=1)