当前位置: 首页 > news >正文

Trae开发贪食蛇小游戏

今天我们用Trae来做一款贪食蛇的H5小游戏,来体验一下对话能力和代码生成效果,话不多说直接开始。

体验地址: 贪食蛇小游戏

在这里插入图片描述

在这里插入图片描述

直奔主题,开始对话

我要做一个贪食蛇的小游戏,请在index.html中写出代码,在styles.css中写出样式,在game.js中写js方法,写出代码

在这里插入图片描述

我们看到Trae按照要求生成了3个文件,分别是html,css,js3个文件,直接点应用。然后打开index.html,发现点击游戏开始就结束了,有BUG,然后页面样式不好看,让他优化一下样式,我们继续让Trae修改。

在这里插入图片描述

优化完成之后直接应用,刷新一下看下效果,样式比之前的好看些,点击开始游戏,游戏可以正常开始和结束。但是有个问题,不能控制,需要加入键盘控制方向。这里感觉Trae有点弱智了。

在这里插入图片描述

在这里插入图片描述

然后蛇头身体和食物感觉很丑,我找了3个png的图片,让Trae修改一下

在这里插入图片描述

在这里插入图片描述

我们刷新一下看下看看效果,效果还可以,开始游戏,键盘控制,游戏结束都没有问题

在这里插入图片描述

功能完善

现在基本的游戏操作就完成了,但是我想再优化一下

加入游戏音效

加入得分系统

加入分数排行榜

加入难度
在这里插入图片描述

应用修改之后,看到页面已经完成修改,分为左中右3部分,加入了难度和分数,排行榜,但是图片好像有点问题,身体和蛇头没有居中,这个问题直接让trae处理过,它又忘记了
在这里插入图片描述

最后我让他修改了一下游戏难度得计算分值,不同得难度得分也不一样

在这里插入图片描述

优化一版最终的样式

在这里插入图片描述

提交到Github

初次提交到GitHub上需要一次性代码验证
在这里插入图片描述

点击跳转到github的验证「链接」,输入代码验证成功

在这里插入图片描述

设置Github Pages

贪食蛇小游戏
在这里插入图片描述

Trae体验

  • 上下文效果不理想,好几次我对话里面都说过要保持现有结构不变,可是却又胡乱的修改,导致之前的修改部分被改乱;例如我告诉他要加入音频文件,然后加好了,过了几个对话后,生成的音频内容就没有了,又要重新告诉他;
  • 改过的内容过几轮对话后就又被改回去了。好几次修改完善样式,只加了html里面的标签,css样式表里面的样式没加进去。
  • 好几次我告诉他不要修改原有代码,在原有代码基础上做修改,可是他却偏偏不听,非要改的乱七八糟;导致花了大量时间来人工调整代码。

总体来说,Trae中文版生成一些简单代码或者应用还凑合使用,要是一些负责的项目建议大家不要使用了,他会把你的项目改得乱七八糟。直接用cursor效果比Trae好很多。

相关文章:

  • 低代码理解
  • Socket编程UDP
  • C++实用函数:find与find_if
  • 智能汽车图像及视频处理方案,支持视频星轨拍摄能力
  • 【机器学习基础 4】 Pandas库
  • 移植原包ROM通用处理方案
  • 作业12 (2023-05-15 指针概念)
  • Hostapd2.11解析笔记_nl80211接口交互流程_消息收发细节解析
  • vue js给元素动态添加动画样式, 改变背景色
  • 仓库管理4大核心系统(OMS、WMS、WCS、WES)是什么,有何用处?
  • 【系统架构设计师】DNS查询过程
  • Linux基础 -- SoC从uboot到linux kernel的全过程
  • 从感知器准则到最小平方误差准则——与神经网络的发展类比
  • 使用Python可视化图结构:从GraphML文件生成节点关系图(lightrag 生成)
  • FPGA中串行执行方式之流水线(Pipeline)
  • 大数据学习(84)-Hive数仓
  • IIS漏洞攻略
  • C# 属性(Property)‌详解
  • 了解TikTok直播不推流的原因及流量异常的解决方案
  • 基于SpringBoot的电影售票系统
  • 西部航空回应飞机上卖彩票:与重庆福彩合作,仅部分航班售卖
  • 神舟十九号载人飞行任务取得圆满成功
  • 中老铁路跨境国际旅客突破50万人次
  • 力箭二号火箭成功进行满载起竖试验,计划今年首飞发射轻舟飞船
  • 建行一季度净利833.51亿同比下降3.99%,营收降5.4%
  • 当初没有珍惜巴特勒的热火,被横扫出局后才追悔莫及