Chrome 浏览器的小恐龙游戏,被我破解了

一个阳光明媚的周末,透光的窗帘把我从睡梦中叫醒,大脑说今天是周六,可以慵懒个一上午,于是开心地打开我的 Mac 准备看两集 Rick and Morty 再起床洗漱。

我迫不及待打开了对应的网站,发现浏览器提示 No internet,这才发现因为我的动作太过于行云流水,电脑还没来得及连上 wifi

假如我有一个正常的 window...不对,不用假如,新开一个空窗口不就得了!

 在新打开窗口的控制台,我得到了这样的结果:

也就是说,在这个恐龙快跑的小游戏里,Google 的前端工程师向 window 注入了 最多 55 个全局变量(251-196)...

为什么说最多 55 个?因为 Chrome 的版本以及安装的 Chrome 插件都会影响全局变量的个数,比如 React 开发者工具就会向 window 中注入两个全局变量。

于是问题来到了:怎么把这 55 个被注入的全局变量拿过来呢?复制粘贴之后再一个一个比对?太 low 了,让我想想...

在原有窗口的基础上,再搞一个新窗口...这不就是 iframe 吗!iframe 虽然没有 window,但是它有 contentWindow,原则上来说,属性差别应该不大。所以现在只需要创建一个 iframe,拿它里面 contentWindow 的全局变量去过滤当前 window 的全局变量,就可以筛选出那多余的 55 个“嫌疑人”了

思路有了,写代码也就容易多了:

在控制台输入这些代码后会车,我得到了这样的结果:

这下筛选出了 45 个全局变量。

45 个总比 200 多个好找一些,打开这个数组,我发现了一个命名很可疑的家伙:

Runner,不就是那个“奔跑着的小恐龙”吗(坏笑)?

那就看看它到底是个什么货色!

emmm居然是函数,哦?函数,首字母还大写,这熟悉的味道,这不就是个构造函数吗!正所谓,构造函数的宝藏都在 prototype 里,在观察了一遍这个宝藏之后,我发现了一个名为 gameOver 的方法,

这个函数名,难不成它就是那个让小恐龙去死的方法?既然这样,呵,我反手就把它用空函数覆盖了。于是...

视频内容

真的是...

然后我又发现了另一个有趣的方法:

顾名思义,这是用来给小恐龙设置奔跑速度的方法,但是怎么调用呢?由构造函数创建的实例对象,可通过原型链访问构造函数 prototype 上的变量和方法,也就是说,如果能找到这个小恐龙对应的实例,那么就能直接调用这个 setSpeed 方法了。既然 Google 的前端工程师已经把这么多变量搞到全局了,那么...会不会也在全局存储了这个小恐龙实例?我重新审视了一遍那 43 个多出来的全局变量,并没有找到。我下意识地随手输入了一下这个 Runner 构造函数,真是山重水复疑无路柳暗花明又一村呐:

我甚至都不需要看 Runner 函数的全部代码,就知道原来实例被保存在一个名叫 instance_ 的 Runner 自身属性里,论起好变量名的重要性,行,那我就不客气了,直接调用!

于是乎...

视频内容

当我凝视着这个飞奔的无敌小恐龙时,我突然觉得...一切变得...

#技术创作101训练营

本站文章资源均来源自网络,除非特别声明,否则均不代表站方观点,并仅供查阅,不作为任何参考依据!
如有侵权请及时跟我们联系,本站将及时删除!
如遇版权问题,请查看 本站版权声明
THE END
分享
二维码
海报
Chrome 浏览器的小恐龙游戏,被我破解了
一个阳光明媚的周末,透光的窗帘把我从睡梦中叫醒,大脑说今天是周六,可以慵懒个一上午,于是开心地打开我的 Mac 准备看两集 Rick and Morty 再起床...
<<上一篇
下一篇>>