Vue 实现 Chrome 小恐龙游戏

前言

几年前，Google 给 Chrome 浏览器加了一个有趣的彩蛋：如果你在未联网的情况下访问网页，会看到 “Unable to connect to the Internet” 或 “No internet” 的提示，旁边是一只像素恐龙。

许多人可能觉得这只恐龙只是一个可爱的小图标，在断网的时候陪伴用户。但是后来有人按下空格键，小恐龙开始奔跑！

这只可爱的小恐龙是设计师 Sebastien Gabriel 的作品。他在一次访谈中说，他觉得没有 wifi 的年代就像是史前时代，很多人都已经忘记那个只能在公司、学校或者网吧才能上网的年代，所以他就以史前时代的代表——恐龙，作为断网的图标。

本文的主要内容就是如何使用Vue实现这个小彩蛋游戏，感兴趣的同学可以直接看下效果：游戏地址

复刻画面

我们首先把这个小游戏的样式摆出来，可以看出，主要包括下面几种元素

1. 恐龙
2. 路面
3. 云彩
4. 障碍物
5. 积分

主要就是这些内容，我们通过css将其放在合适的位置即可

动画效果

路面动画

在初步将小游戏的画面复刻了之后，我们需要把画面动起来，可以看出，其实在游戏过程中，小恐龙水平方向是不动的，只是路面一直在平移，看起来小恐龙在移动了，因此我们需要给路面添加动画效果</