以下是关于 Build On Trae 的相关内容:
在 17 号 Waytoagi 举办的“AI 编程从入门到精通 - Build on Trae”共学中,跟随大雨在 Trae 里输入“用 Matter.js 做一个有意思的画面”,屏幕上呈现出有趣的交互体验,色块如雪花般生成并降落,具备重力、碰撞、弹性效果。有人瞬间想到将此效果融入消消乐游戏,很快初步的消消乐效果诞生。为让游戏更具挑战性和趣味性,开始加关卡,但关卡逻辑未实现,随后向 Trae 反馈并提出把彩色色块换成 emoji 的新想法,Trae 修改后效果活泼生动。之后又提出在消除 emoji 时添加音效,因音效库不够用,灵机一动播放 emoji 对应的英文单词音效。体验地址:https://pipipeter.github.io/xiaoxiaole/
Trae 的使用步骤:
在17号Waytoagi举办的“AI编程从入门到精通-Build on Trae”共学中,跟随大雨在Trae里输入“用Matter.js做一个有意思的画面”,如下图:神奇的事情发生了,屏幕上立刻呈现出一种有意思的交互体验:点击空白处,色块如雪花般生成并降落,重力、碰撞、弹性效果一应俱全,交互体验新奇有趣。我瞬间被这个效果吸引,脑海中闪过一个念头:要是能把这效果融入消消乐游戏,岂不是别有一番风味?说干就干,如下图:很快,初步的消消乐效果诞生了。看着屏幕上那些色块按照物理规律移动、碰撞、消除,感觉还是很有意思的。为了能让游戏更具挑战性和趣味性,就开始加关卡:向Trae提出增加关卡功能的想法,更新代码后,我满怀期待地测试,却发现关卡逻辑并未实现。然后并向Trae反馈。同时,提出一个新想法,把彩色色块换成emoji,说不定能带来更有趣的视觉效果。Trae按照建议进行修改后,emoji的加入让游戏画面瞬间变得活泼生动,效果如下:我迫不及待地想要进一步完善游戏。于是提出在消除emoji时添加音效,让游戏体验更丰富。然而,随着游戏中的动物emoji越来越多,发现音效库不够用了。这可怎么办?灵机一动,干脆播放emoji对应的英文单词音效,这样一来,玩游戏的同时,还能顺便听听英语,一举两得。哈哈~?体验地址:https://pipipeter.github.io/xiaoxiaole/
因为AI生成的代码,需要有地方存起来,所以请你先找一个地方,新建一个文件夹,文件夹的名字可以自己取,比如叫“helloworld”[heading3]第二步:使用Trae打开这个文件夹[content]点击后,在弹出的弹层里选中前面你新建的文件夹:打开后,会是下图的状态:左上角能看到选中的文件夹是“helloworld”。下一步是点击右上角的“Builder”按钮,切换到Builder模式,切换后是这样的:
解释: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)