谷歌断网小游戏代码粗略解析

当我们使用谷歌浏览器时，碰到断网的情况，就会看到一个小恐龙加上断网提示语的界面。

一般情况下看到这个界面我们会下意识去解决网络问题，但是当你按下空格键，你就会发现一个新大陆。

小恐龙会在空格键按下后开始跳跃，并且右边的界面会像画幅一样展开。随即小恐龙开始奔跑在一片看不到尽头的沙漠中，画面中会随机出现仙人球树和翼龙，玩家需要做的是通过空格键和下键控制小恐龙避开障碍物，一直前进。

这个小游戏从2014年9月发布以来就受到了很多人得喜爱，目前为止有超过2.7亿的月活量。如此小巧精致的一个游戏，想必其实现方式也会很有意思。

为此，我在github上面找到了这个游戏的源代码。

地址如下：https://github.com/wayou/t-rex-runner

这个游戏由javascript脚本语言进行实现，通过嵌入到html页面中来运行。

可以看到，源码文件结构一目了然：

其中assets是图片中各个元素的图片资源文件，js代码会根据代码中配置的坐标获取到具体的图片内容。

index.css是网页的页面布局配置文件。

index.html是网页的源文件。

index.js是小恐龙游戏的逻辑实现源文件。

按照代码顺序，源代码中依次出现的对象列表如下：

Runner：游戏逻辑控制
GameOverPanel：游戏结束页面逻辑
Obstacle：障碍物的处理逻辑
Trex：小恐龙相关逻辑处理
DistanceMeter：游戏记录逻辑处理
Cloud：随机生成的云朵逻辑
NightMode：白天黑夜模式切换逻辑
HorizonLine：地平线相关逻辑处理

一些比较重要的函数：

checkForCollision：碰撞检测

以上是谷歌断网小游戏中的一些笔记。由于对js代码不熟悉，所以也只能整理一个框架出来。

供感兴趣的朋友参考。

后续我会基于这些工作对其进行一个硬件产品的实际制作，敬请期待~