很多用 Chrome 的人都有过这样的时刻页面迟迟加载不出来屏幕中央站着一只像素小恐龙头顶还有一行小字提醒你按空格开始。我第一次见到它时还以为是浏览器出错了后来才知道这是 Chrome 官方埋的一个小彩蛋。更有意思的是这个小游戏背后藏着一套可以被任意摆布的 JavaScript 逻辑通过一组“作弊代码”就能实现无敌、快跑、高跳、一键满分这些神奇效果。这篇文章就来聊聊我折腾 chrome 谷歌小恐龙作弊代码的完整过程包括每段代码为什么能生效、改的到底是游戏里的哪个对象以及如何把这些零散指令封装成真正一键运行的脚本。适合所有想在浏览器里找回点小乐趣、又对前端调试技术有好奇心的朋友。1. 从彩蛋到 Web 小游戏先把小恐龙的运行机制拆开1.1 为什么 Chrome 要藏一只像素恐龙Chrome 团队在几年前做了一个很经典的决策与其让用户面对一个枯燥的加载失败页面不如在页面中央放一个可以玩的小游戏。这个游戏就是 T-Rex Runner也就是大家口中的“Chrome 小恐龙”。它的美术风格刻意向 80 年代像素游戏致敬恐龙的造型、仙人掌和翼龙的设计都带着强烈的复古味道。有意思的是这个游戏并不是一个被封装到浏览器底层的“黑盒”它本质上就是一个普通的 HTML 页面内部全部逻辑都写在 JavaScript 里用 Canvas 2D 绘制画面。整个游戏麻雀虽小五脏俱全恐龙跑动、障碍物生成、碰撞检测、速度递增、分数累计、昼夜切换统统在几十毫秒一帧的主循环里完成。如果你以前从没打开过这个游戏可能会以为它的代码很复杂但实际上它的核心逻辑比想象中精简得多这也正是它适合拿来研究和“动手脚”的原因。我第一次看它的源码时最惊讶的是游戏状态竟然没有做任何隔离保护。很多网页游戏为了防止玩家用控制台改参数会把核心变量封装在闭包里但这个游戏没有。它的顶层对象 Runner 直接被挂到了全局作用域上只要你打开游戏控制台里就能访问到 Runner 类还能拿到正在运行的游戏实例 Runner.instance_。这就像是把引擎盖敞开了钥匙还插在车上作弊代码能生效的基础就在这里。1.2 Runner 对象控制整个游戏状态的“总指挥”游戏启动后Chrome 会创建一个 Runner 实例这个实例就是整局游戏的总指挥。它负责驱动渲染循环监听键盘输入维护所有游戏元素并更新分数面板。你可以把它理解成游戏世界里的操作系统恐龙、障碍物、云、地面都是它的“子组件”。在控制台里输入下面两行代码就能看到 Runner 类和当前实例的大致面貌console.dir(Runner); console.dir(Runner.instance_);如果你的游戏还没有开始Runner.instance_ 很可能是 undefined。先把恐龙跑起来再回到控制台查看实例就会存在。一旦拿到 Runner.instance_你几乎可以对游戏做任何事让速度瞬间提升、让恐龙跳到屏幕外、把 gameOver 逻辑替换成空操作甚至把分数直接改到你想要的数字。这背后涉及一个概念在浏览器里页面上的全局变量默认都挂在 window 对象上。Chrome 小恐龙页面没有把 Runner 用模块化方式隐藏起来所以从控制台访问没有任何阻碍。这也是几乎所有 Web 游戏作弊教程的起点——先找到一个全局对象再顺着对象树的属性往下摸。理解这一点比背住某一段作弊代码重要得多。2. 作弊前的侦查在 Console 里摸清游戏的老底2.1 让游戏实例现身的几种入口玩小恐龙最常见的方式是在 Chrome 地址栏输入 chrome://dino/ 回车直接打开游戏页面。如果你遇到了连接错误页那个页面里也会自动出现小恐龙功能完全一样。进入页面后按下空格键恐龙就会开始奔跑。这时按 F12 打开开发者工具切到 Console 面板输入Runner你能看到整个 Runner 构造函数包括它原型上的所有方法。接着输入Runner.instance_如果返回一个对象恭喜你游戏实例已经到手。如果返回 undefined一般是游戏还没正式开始先回页面按一下空格再切回控制台重新执行。这个“先让实例创建出来”的步骤是很多新手第一次折腾时最容易卡住的地方因为他们在游戏还没跑起来的时候就急着敲代码了。2.2 值得记住的关键属性和方法拿到 Runner.instance_ 之后先别急着改花一分钟熟悉一下几个关键入口。我平时最常用的有下面这些表达式类型作用Runner.instance_.setSpeed(n)方法修改游戏当前速度n 越大跑得越快Runner.instance_.distanceRan属性已经奔跑的距离直接影响分数Runner.instance_.updateScore()方法手动刷新分数面板Runner.instance_.gameOver方法游戏结束回调覆写它可以阻止结束流程Runner.instance_.tRex.jump()方法让恐龙立刻起跳Runner.instance_.tRex.setJumpVelocity(n)方法修改跳跃初速度调大能跳得更高Runner.instance_.tRex.collisionBoxes属性恐龙的碰撞盒数组清空后可以穿模这些字段和方法的实际名称会随着 Chrome 版本更新发生细微变化。我记得早期版本里 setSpeed 很稳定但 updateScore 并不是一直都在有的版本里它藏在内部闭包里从外部调用会直接报错。遇到这种情况不要慌改不了分数刷新函数就只改 distanceRan游戏在下一帧更新时通常会自己把分数面板刷新出来。2.3 一次典型的“侦查”过程假设我想修改跳跃高度但不确定当前版本里方法叫什么名字。我不会瞎猜而是直接用对象自省的方式把恐龙对象翻个底朝天const t Runner.instance_.tRex; console.dir(t); console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(t)));第二行代码会列出 Trex 原型上的所有方法名。看到 setJumpVelocity 就调它没看到就用 jump 加定时器模拟连续跳跃。这种“先侦查、后动手”的思路比死记硬背某段代码更能应对版本变化。毕竟作弊代码这种东西网上搜出来的可能是一年前的写法到了新版本就不一定好用了。3. 四类核心作弊代码的实现与原理3.1 快跑setSpeed 到底改了什么东西先上最简单的一段const r Runner.instance_; if (r) { r.setSpeed(20); }这段代码的意思是把游戏内部的速度系数改成 20。正常情况下小恐龙的速度会随着奔跑距离逐渐从 6 提升到 13 左右。你手动设成 20等于直接把游戏体验推到远后期的强度仙人掌生成频率变高、地面滚动的速度肉眼可见地变快翼龙也更容易出现。我实测下来的感受是速度设在 15 到 20 之间最有意思画面明显加速但手速快的人还能勉强反应玩起来像真正的“困难模式”。如果直接调成 30 以上基本就是飞行模式恐龙奔跑速度快到像瞬移玩家根本来不及操作很快就会被障碍物追上。这里提醒一句setSpeed 并没有做输入范围校验你把速度设成 100 甚至负数游戏都不会报错。负数会让画面倒着滚看起来非常魔性不过我不建议当作常规玩法因为容易导致游戏状态异常。3.2 高跳跳跃物理参数藏在恐龙对象里小恐龙的跳跃由 Trex 对象的物理参数控制。简单理解跳跃高度取决于两个数值向上起跳的初速度和游戏中模拟的重力加速度。初速度越大恐龙能冲到的最高点越高重力越大上升到最高点的时间越短。Chrome 团队为了让游戏节奏紧凑把默认跳跃高度限制在一个偏保守的范围内所以正常情况下你只能刚刚跳过仙人掌。作弊思路就是直接修改初速度const t Runner.instance_.tRex; t.setJumpVelocity(20); t.jump();修改完成后恐龙能从屏幕中下部一直蹿到接近顶部的位置空中停留时间明显变长操作容错率一下子高了很多。更有意思的是这个游戏没有限制连续跳跃次数。你可以用定时器不停触发 jump让恐龙连续悬浮在高空甚至完全跳离地面。想体验这种效果可以在控制台里跑setInterval(() { const t Runner.instance_.tRex; if (t) { t.jump(); } }, 80);这样每隔 80 毫秒强制跳一次恐龙会一直保持着向上扑腾的状态看起来像踩着弹簧在跑。不过要小心这种高频率操作会让跳跃动画和碰撞检测之间出现短暂的视觉卡顿属于预期内的“参数被玩坏”现象不是浏览器崩溃。3.3 无敌把 gameOver 变成空操作小恐龙撞到障碍物后游戏会触发 Runner 实例的 gameOver 方法然后弹出游戏结束的动画和分数面板。如果你把 gameOver 方法整体替换成一个空函数游戏就永远无法成功进入结束流程。用法如下const r Runner.instance_; r.gameOver function() { console.log(撞上了但我选择无视); };替换之后恐龙撞到仙人掌时画面上的碰撞表现可能还在但游戏状态不会切到 Game Over分数照涨障碍物照常刷新背景音乐和节奏完全不停。这套做法是网上流传最广的无敌代码因为兼容性极好几乎所有版本的 Chrome 小恐龙都吃这一套。如果你想要更干净的视觉效果还可以把恐龙的碰撞盒清空const t Runner.instance_.tRex; t.collisionBoxes [];清空之后恐龙会直接从仙人掌和翼龙身体里穿过去和正常奔跑几乎没有区别。两个方案的取舍点在于覆盖 gameOver 代码最简、跨版本最稳定但碰撞瞬间可能出现短暂视觉卡顿清空碰撞盒画面干净但部分新版本可能已经不再从 collisionBoxes 读取碰撞数据改了半天没效果。我的建议是优先用覆盖 gameOver 的方案如果发现画面实在别扭再把碰撞盒也清掉。3.4 一键满分直接操作计分变量游戏里的分数和 distanceRan 直接挂钩。这个属性记录的是恐龙已经奔跑的像素距离游戏每一帧都会读取它并换算成分数。所以最直接的改分方式就是给 distanceRan 加一个很大的值const r Runner.instance_; r.distanceRan 99999; if (r.updateScore) { r.updateScore(); }执行完这段代码分数面板会立刻跳到一个夸张的数值。如果你不想一次性加完而是想让它自动持续上涨可以写一个定时器每 100 毫秒加一次分setInterval(() { const r Runner.instance_; if (r !r.gameOver) { r.distanceRan 500; if (r.updateScore) { r.updateScore(); } } }, 100);这个方案的原理并不复杂游戏本来就会在奔跑过程中不断累加 distanceRan你只是额外加速了这个过程。按照这个频率一分钟就能涨出一个天文数字效果足够“一键满分”。关于分数上限我目前没有遇到硬限制不过不同版本对超大数字的显示方式可能不一样稳妥起见建议写一个自己看着顺眼的数值比如 99999。4. 把零散代码变成“一键”Snippets 与 bookmarklet 的封装方法4.1 为什么每次刷新后作弊代码会失效在 Console 里敲的代码只在当前页面会话中有效。刷新页面后游戏状态会被重新初始化旧的 Runner 实例被销毁新页面会生成一个全新的实例。你之前覆盖的 gameOver、修改过的速度、注入的分数全部失效。这其实是一件好事作弊只是暂时的本地操作不会对浏览器产生永久影响也不影响后续正常游戏。但如果你和我一样每次打开小恐龙都希望直接进入“无敌满分配置”手动重敲代码就太蠢了。这时候需要把脚本保存起来做成可以一键运行的入口。4.2 用 DevTools 的 Snippets 保存整套脚本Chrome 开发者工具自带一个 Snippets 功能专门用来保存零散的调试脚本。操作方法是按 F12 打开 DevTools切到 Sources 面板在左侧导航栏找到 Snippets 标签。右键点击它选择 New snippet给脚本起个名字然后在右侧代码区粘贴全部代码。按 CtrlS 保存以后每次想运行只需要回到 Sources 面板右键这个 Snippet选择 Run。Snippets 的好处是代码可以在不同页面中复用不局限于 chrome://dino。你甚至可以把前面几段代码整合成一个整体以后每次跑游戏前直接运行一次省去手动输入的麻烦。我之前就把这套恐龙作弊脚本存成了 Snippets偶尔拿出来复习一下也算一种前端调试手感的日常训练。4.3 用 bookmarklet 实现“点击一次就生效”除了 Snippets还有一个更轻量的一键方案bookmarklet。原理是把整段 JavaScript 压缩成一行前面加上 javascript: 前缀存成一个书签。之后打开 chrome://dino点击这个书签代码就会在当前页面执行。写成书签的格式大致是这样javascript:(function(){var rRunner.instance_;if(!r){console.log(请先开始游戏);return;}r.gameOverfunction(){};r.setSpeed(18);r.tRex.setJumpVelocity(20);r.distanceRan99999;if(r.updateScore){r.updateScore();}console.log(作弊已生效);})();把这一整行保存到浏览器的书签栏使用的时候点一下就行。这个方案的优点是方便不需要打开 DevTools也不需要在 Console 里输入任何东西。但也要记住一条安全底线bookmarklet 本质上是“在任意页面执行任意代码”的入口只应该保存你自己看得懂、信得过的脚本。网上来路不明的 bookmarklet 千万不要乱存这一点大家都应该有点安全意识。4.4 一个完整的“一键满分”脚本示例最后给出一个我常用的完整脚本它把无敌、快跑、高跳、一键满分整合在一起还加了一些防御性判断避免在某些 Chrome 版本里因为方法不存在而直接报错(function() { const r Runner.instance_; if (!r) { console.log(请先打开 chrome://dino/ 并开始游戏); return; } // 1. 无敌覆盖游戏结束回调 r.gameOver function() { console.log(无敌模式忽略所有碰撞); }; // 2. 快跑速度调到 18保证有挑战性又不是完全失控 r.setSpeed(18); // 3. 高跳修改跳跃初速度并让恐龙立刻跳起来 if (r.tRex r.tRex.setJumpVelocity) { r.tRex.setJumpVelocity(20); r.tRex.jump(); } // 4. 一键满分直接把分数写到目标值并刷新显示 r.distanceRan 99999; if (r.updateScore) { r.updateScore(); } console.log(作弊已生效无敌 快跑 高跳 满分); })();注意脚本里的第 17 行我对 setJumpVelocity 做了存在性判断。之所以要加这个判断是因为我遇到过某个 Chrome 新版本里这个方法突然改名的情况。如果直接用控制台会抛出一条 TypeError打断后面代码的执行。前端调试中最常遇到的问题就是“对象里根本没有你想调的那个方法”防御性判断在这种场景下非常实用。5. 从 Dino 作弊代码到通用调试思路全局对象、页面刷新与脚本注入5.1 同一个套路为什么能用到其他网页游戏研究完小恐龙你会发现这套方法论完全可以迁移到其他网页小游戏上F12 打开控制台找到游戏核心实例顺着对象的属性修改状态最后触发一次页面刷新来验证效果。很多用 Canvas 实现的贪吃蛇、飞机大战、跑酷游戏为了让开发调试方便都会把核心游戏对象直接挂到 window 上。如果你面对的游戏没有暴露 Runner.instance_ 这么明显的入口可以先在控制台输入Object.keys(window)找到看起来像游戏实例的全局变量再用 console.dir 一层层往下摸。这个过程本身就是很好的前端调试练习和改恐龙参数的本质完全一样。说白了作弊代码只是把“操作全局对象”这件事玩到了极致而它背后依赖的是你对浏览器执行环境的基本认知。5.2 如果这个游戏是你开发的如何防止玩家这样改反过来想想如果你自己是游戏开发者看到这篇文章后可能会担心我的网页游戏会不会也这么容易被人改会大概率会。所以这里有三个防作弊思路供参考。第一别把核心实例直接挂到 window 上。用模块化写法或者闭包让实例只存在于内部函数作用域里玩家从控制台根本拿不到引用。第二对关键数值做增量校验。单机小游戏做不到服务端校验但可以在每帧更新时检查分数增幅是否超过合理阈值一旦发现异常增量直接重置或标记为作弊状态。第三在发布前用控制台自己尝试改一轮看看哪些变量暴露了提前封堵。这个思路和我前面说的“先侦查后动手”完全一致只不过角色换成了开发者。5.3 边界提醒与我的实际体会聊到这儿必须说句正经话作弊代码只适合在自己本地的单机小游戏里玩玩别拿改出来的分数去社区排行榜里炫耀那会破坏其他玩家的公平体验。Chrome 小恐龙本身没有官方排行榜但很多类似的小游戏都有。尊重别人的游戏体验是每个玩家都应该有的自觉。从我的实际经验来说折腾恐龙作弊代码最大的收获并不是让分数变成天文数字而是那些原本抽象的前端概念变得异常具体。你会意识到原来一个游戏实例真的就是一个普通对象原来函数可以被整体替换原来定时器可以修改游戏节奏原来浏览器控制台比想象中强大这么多。这些感受比单纯把恐龙跳到云朵上面有趣多了。我还记得把速度调到 100 后重开一局的那个下午沙漠地面像瀑布一样往下流星星和云全变成了拖影那只像素小恐龙在屏幕中央疯狂蹬腿怎么看都像 J 型跑劈了叉。那一刻我突然觉得游戏真正的乐趣有时候就藏在这些代码被玩坏之后的荒诞画面里。
随机访问：LeetCode 380核心设计解析)
