应该有不少人知道Chrome的离线小彩蛋,当你的电脑或手机无法连接网络的时候,Chrome会有下面这段提示:

而此时如果你敲一下空格键(手机用户则是按一下触摸屏),就会激活这个彩蛋啦。
小恐龙开始在广阔无垠的大地上奔跑起来~

而游戏其实很简单,类似简易版超级马里奥,不停敲击空格或者↑键跳起来避开障碍物,按↓键可以下蹲。

如果是暂时的断网,这个小游戏用来消磨下时间已经足够。
相信很多人随随便便也都能玩上两三百分,仔细玩一下便发现了这个游戏的有趣之处。
当你每获得100分,就会有个提示音出来表扬一下。
游戏速度也会越来越快。
而当你玩到400分以后,便有会飞的翼龙出现,阻挡你的前进步伐!

这时的小恐龙将会时常使用超能力:下蹲!
用来躲过飞得不太高但又无法跳过的翼龙。

当你奔跑到大概700分,天会突然暗下来,开始了黑夜中的孤独奔跑。

相信很多玩到700分以后的高手都了解以上游戏流程,在此之后随着分数变化,开始黑夜与白天的交替,我们孤独的小恐龙在仙人掌和翼龙的阻挠下,顽强奔跑在荒芜的大地上,不知疲倦地经历了无数个日日夜夜......
接着便是恢复网络开始正常上网,
或者因为体力不支游戏重新来过......
很少有人能坚持玩到3600分,
在一个没有网络的世界,
面对着黑白两色的像素块独自坐上一上午甚至一整天,
这该是多么的寂寞啊......
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
/**
所以我们需要做一些有意思的事情...
*/
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
Chrome的这个小游戏可能是为了断网的时候提供消遣的小插曲。
实际上你不需要断网,使用chrome://network-error/-106即可以使用它,因为这是一个chrome定义的网络错误,Google工程师也会使用这种方式来测试而不是断网。可以通过chrome://network-errors来查看所有的网络错误。

仔细研究一下这个彩蛋,Ctrl+Shift+i查看网络访问资源,我们可以从网页中找到这样的图像。

究其根本,其实游戏中几乎所有的图片都裁剪于这幅图。
(把游戏真正底层的东西拿出来会发现很让人失望,但是正是这些“冰冷的规则”如同我们不忍直视的内脏器官一样支持了表面的光鲜亮丽)。
我们进入调试界面来验证一下。
F12,然后选中 console

我事先做好了一张“完美”的脑补图。。。
下面我们输入命令将图片改成这个(请确保这个时候连着网以便加载图片,即使用之前不需断网的方法):

document.getElementById("offline-resources-1x").src="https://ooo.0o0.ooo/2017/05/30/592d2daed3309.png"
即

于是再次玩的时候就变成了这个样子


其实我们还可以实现很多脑补的效果,例如:
我们设置15秒后执行刚才的命令,然后立刻开始游戏:
setTimeout(()=>{document.getElementById("offline-resources-2x").src="https://ooo.0o0.ooo/2017/05/30/592d2daed3309.png"}, 15000)
这样大约15秒后会突然滑稽。。。
一切毫无违和感。
特别感谢@庄思源
网友评论