使用 Vue 配合豆包MarsCode 实现“小恐龙酷跑“小游戏

作者：BLACK595

“小恐龙酷跑”，它是一款有趣的离线游戏，是Google给Chrome浏览器加的一个有趣的彩蛋。当我们浏览器断网时一只像素小恐龙便会出来提示断网。许多人认为这只是一个可爱的小图标， 但当我们按下空格后，小恐龙前面便出现了一片沙漠，小恐龙也随之奔跑起来，我们要做的也就是控制小恐龙跳跃，跨过沙漠中的荆棘，帮助小恐龙跑出沙漠。今天，我们也用豆包MarsCode AI编程助手来帮助我们用vue来实现这一经典的小游戏。

准备

豆包MarsCode 是字节跳动推出的免费AI编程助手，我们使用豆包MarsCode 时需要先去官网注册账号，并下载插件安装到我们的IDEA中，还不知道怎么操作的小伙伴可以看我之前的文章IntelliJ IDEA：MarsCode 插件初体验。

静态画面

首先，构成游戏的有五个物体，分别是云、小恐龙、大树、小树和路，我们先把他们都放置在同一个容器div中，通过css调整他们具体的位置。

画面移动

接着，要考虑画面的移动，在画面中，一直在移动的其实只有云，树，路，他们时刻都在发生左移，小恐龙只需要在原地蹦跳。 这时我们CTRL+U打开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 在未来的发展道路上能够稳中求进，不断完善，为用户带来更多的惊喜与便利。