在手机上怎么建造网站,做的最好的手机网站,做视频网站注意什么问题,免费建站网站一级大录像不卡作者#xff1a;BLACK595 “小恐龙酷跑”#xff0c;它是一款有趣的离线游戏#xff0c;是Google给Chrome浏览器加的一个有趣的彩蛋。当我们浏览器断网时一只像素小恐龙便会出来提示断网。许多人认为这只是一个可爱的小图标#xff0c; 但当我们按下空格后#xff0c;小恐… 作者BLACK595 “小恐龙酷跑”它是一款有趣的离线游戏是Google给Chrome浏览器加的一个有趣的彩蛋。当我们浏览器断网时一只像素小恐龙便会出来提示断网。许多人认为这只是一个可爱的小图标 但当我们按下空格后小恐龙前面便出现了一片沙漠小恐龙也随之奔跑起来我们要做的也就是控制小恐龙跳跃跨过沙漠中的荆棘帮助小恐龙跑出沙漠。今天我们也用豆包MarsCode AI编程助手来帮助我们用vue来实现这一经典的小游戏。 准备
豆包MarsCode 是字节跳动推出的免费AI编程助手我们使用豆包MarsCode 时需要先去官网注册账号并下载插件安装到我们的IDEA中还不知道怎么操作的小伙伴可以看我之前的文章IntelliJ IDEAMarsCode 插件初体验。
静态画面
首先构成游戏的有五个物体分别是云、小恐龙、大树、小树和路我们先把他们都放置在同一个容器div中通过css调整他们具体的位置。 画面移动
接着要考虑画面的移动在画面中一直在移动的其实只有云树路他们时刻都在发生左移小恐龙只需要在原地蹦跳。 这时我们CTRLU打开AI聊天界面问问豆包MarsCode 怎么实现左移的效果。 AI让我们加个roadMove的动画改变路translateX位置我们来试试看。 嗯️确实移动起来了但是这路越跑越少我们需要的是像轮播图一样的能一直循环跑下去的。 好的它叫我们加个road2在road的后面在添加个动画在rode2上试一下 现在这样就很ok两个road轮着跑看上去就是一直在向前了。 路没问题了再给树和云添加上动画树和云跟路有些不同的时树和云从最右侧出来向左匀速移动直到移动到最左侧来看看 AI 给的代码。 上贴上来后发现这树跑的好慢和路都不同步。 我们这里自己给它改一下把速度和路同步并且云和大树也加上这个动画。
这回速度虽然和路同步了但是又粘在一起了需要让云和大树分别先延时不同时间再执行动画再css中 加上animation-delay: 3s;。 恐龙移动
除了画面在移动外我们还需要让恐龙看起来也在移动让它跑起来也就是多张恐龙图片的切换但是多张图片切换切图数量太多我们用雪碧图实现把多个动作放在一张图片上通过改变background-position实现动作切换。原理知道后先看看AI给我们生成的代码。 第一次给我们的是使用css的动画效果。 显然这是有问题的恐龙移动不能像画面移动那么平滑它要在短时间内马上切换到下一张图。可能是我描述的不太准确给 AI 说了它还是给我们的动画切换。 看来我们要直接给它讲方法用定时器做到每0.2秒切换一帧这下就符合要求了。 恐龙跳跃 恐龙能动了后还需要它能够跳跃也就是当我们按下空格后恐龙的跳跃动画让恐龙升高之后再下降还需要考虑加速度不然动作显得太硬了。功能很简单但如果自己想代码肯定很打脑壳我们还是交给 AI 先来生成看看吧。 看这代码还真有板有眼的先不管把代码粘贴进来试试效果。 呦还真行就是跳的高度还不够再手动给它调高点translateY(-80px)就可以了。 碰撞检测 在完成小游戏基本的动画和事件监听后我们要来加上游戏结束的条件了也就是当小恐龙碰到树就game over了专业一点的名字叫“碰撞检测”。还是直接老样子AI直接上代码。 可以看到给我们的代码主体判断部分还是可以的但是触发条件是animationiteration也就是当小恐龙重新播放动画的时候才触发但是我们小恐龙用的定时器都没用动画这个监听器便永远触发不了我把他改为用定时器每0.1秒判断一次是否发生了碰撞再来试一下。
嗯不错不错虽然功能被阉割了但小恐龙终归是跑起来了后面有时间再给他完善下加上计分和下蹲功能。 完整代码(writing_front: 小恐龙酷跑 (gitee.com))了。 结语
豆包MarCode 着实能够为我们节省大量的开发时间。有 bug 时可以先让它进行检查面对功能点需求时也能让它先生成代码给我们试试看看它的思路。不过它生成的代码或许并不完全符合我们的预期此时我们需要添加更为详细的描述或者换种思路的代码让它再试试。AI 在算法和逻辑方面表现得极为强大但在具体功能实现方面当我们参考它生成的代码时仍需进行一定的调整。最后希望咱们的豆包MarCode 在未来的发展道路上能够稳中求进不断完善为用户带来更多的惊喜与便利。
