破解Chrome小恐龙：从源码调试到自动跳跃脚本的Canvas游戏实战

那次我在地铁上刷网页隧道里信号直接归零Chrome 的断网页面蹦出一只小恐龙。我随手按了两下空格居然一局接一局停不下来。等回过神我脑子里已经不是“怎么跳过那只翼龙”而是变成了另一个问题这个只用两个按键、连网络都不需要的游戏到底是怎么写出来的后来我花了一晚上把它从头到尾拆了一遍从定位源码、看懂碰撞机制到直接在 Console 里改分数、弄出无敌恐龙再到写一个自动跳跃脚本替它跑高分。整个过程并不复杂但对前端开发和游戏逻辑的启发非常大。这篇就把我“破解”小恐龙的完整过程、代码和翻车经验整理出来适合对浏览器调试、Canvas 游戏和 JavaScript 魔法好奇的朋友。1. 先搞清楚这个“破解”的入口到底在哪儿1.1 小恐龙不是藏在“断网页”里它本来就是个独立页面很多人以为小恐龙只有断网时才玩得到其实它是一个独立的内置页面只要在 Chrome 地址栏输入chrome://dino回车就能直接开始跑。断网时候你看到的那个页面只是 Chrome 在检测到网络错误后顺手把游戏嵌了进去。这个细节很重要因为作为破解者我们第一件事就是想办法稳定地复现目标。如果每次都要拔网线才能测试那效率太低了。知道了这个入口后面所有修改都可以在一个随时打开的页面里反复验证。1.2 用 DevTools 把游戏源码从浏览器里“捞”出来打开chrome://dino后按 F12 打开开发者工具切到 Sources 面板就能看到这次加载的脚本资源。小恐龙游戏的源码并不是一堆压缩成一行、毫无可读性的代码它主要由几个脚本组成其中比较核心的模块包括runner.js游戏主循环、实例管理、碰撞检测总入口trex.js玩家控制的霸王龙obstacle.js地面障碍物和翼龙distance_meter.js计分器horizon.js地面、云和远方背景在 Sources 面板里可以点开这些文件如果代码被压缩了就点左下角的“格式化”按钮花括号图标V8 引擎会帮你把压缩后的代码重新排成容易读的格式。这一步做完你已经成功了一半从浏览器使用者变成了能看见游戏底牌的人。1.3 找到游戏的总指挥Runner.instance_小恐龙游戏有一个特别“配合”破解者的设计它把当前正在运行的游戏实例挂在了全局变量Runner.instance_上。你只需要在 Console 面板输入console.dir(Runner.instance_);回车之后就能看到一个巨大的对象这个对象包含了游戏运行时的所有状态速度、距离、恐龙对象、障碍物数组、计分器、甚至当前的帧循环状态。我刚开始看到这个对象时有点激动因为大部分网页游戏都不太会把实例暴露得这么干净。这意味着我们接下来做的一切“魔改”都不需要去改源码文件直接在控制台里就能操作运行中的对象。这也是这篇“破解”文章的核心思路不是改文件而是改内存里的实例。2. 游戏的“心脏”和“肌肉”小恐龙到底靠什么跑起来2.1 Runner实例整个游戏的总指挥Runner是游戏的核心类它负责起动循环、更新画面、生成障碍、调度碰撞检测以及触发游戏结束。游戏开始后页面里会有一个Runner实例在跑这个实例管理着恐龙、背景、障碍物和计分器。我在 Console 里最常用的几个字段是字段作用Runner.instance_.currentSpeed当前游戏速度Runner.instance_.distanceRan已经跑过的累计距离Runner.instance_.tRex玩家控制的恐龙对象Runner.instance_.horizon.obstacles当前屏幕上的障碍物数组Runner.instance_.distanceMeter.score当前得分Runner.instance_.crashed是否已经碰撞失败很多人玩的时候感觉游戏“越来越快”其实就是currentSpeed在随着距离增长不断增加。速度变快之后障碍物的移动速度和生成频率都会被放大所以越到后面越需要提前跳跃。2.2 得分、速度和障碍一个无比直白的数值模型我把源码逻辑梳理了一遍发现这个游戏的数值模型简单到有点可爱。它没有复杂的物理引擎不过就是几个数字在一起滚雪球游戏开始时有一个基础速度大约在 6 左右不同版本略有差异。恐龙每跑一段距离系统会把distanceRan累加同时按固定周期让currentSpeed增加一点。障碍物的生成位置统一在画面右侧生成间隔由当前速度和一个随机区间共同决定。得分本质上就是距离计分器会按整数把距离显示出来所以分数高并不代表你反应快只是代表你活得久、距离跑得远。代码里有一个比较关键的函数大概长这样Runner.prototype.updateSpeed function() { // 当跑过的距离达到新的区间就提高一次速度 this.currentSpeed Math.min( this.config.SPEED this.distanceRan / this.distanceMeter.config.POINTS_PER_INTERVAL, this.config.MAX_SPEED ); };这个函数说明了一件事速度会随着距离逐步逼近一个最大值而不是无限往上加。所以那些能跑到几万分的大神表面上是反应快实际上是因为游戏到了一定速度后基本不再加速操作模型就稳定了。2.3 碰撞判定一个矩形就能说清楚小恐龙的碰撞检测没有用精细的像素级判定而是经典的矩形相交检测。也就是把恐龙、仙人掌、翼龙分别想象成一个不透明的方盒子然后判断两个盒子有没有重叠。简化后的逻辑是这样的function checkCollision(dino, obstacle) { const dinoRect { x: dino.xPos, y: dino.yPos, w: dino.config.WIDTH, h: dino.config.HEIGHT }; const obsRect { x: obstacle.xPos, y: obstacle.yPos, w: obstacle.width, h: obstacle.height }; return dinoRect.x obsRect.x obsRect.w dinoRect.x dinoRect.w obsRect.x dinoRect.y obsRect.y obsRect.h dinoRect.y dinoRect.h obsRect.y; }四个条件分别检测恐龙右侧是否超过障碍物左侧、恐龙左侧是否小于障碍物右侧、恐龙底部是否超过障碍物顶部、恐龙顶部是否小于障碍物底部。只要同时满足就算撞上。理解了这个矩形碰撞模型你会明白一个有意思的事有时候你觉得“明明没碰到”却死了那不是眼睛骗了你而是因为游戏里的碰撞盒子实际上比看到的图像要大那么一圈。很多游戏都会为了手感或性能做这种“小宽容度”或“大判定”的设计小恐龙看起来萌判定却并不含糊。3. 正式动手破解的三种玩法3.1 注入全局脚本让游戏彻底无视Game Over既然Runner.instance_是一个开放的实例那最简单粗暴的修改就是直接替换掉它的gameOver方法。正常情况下恐龙撞到障碍物后Runner 会调用自己的gameOver()来做结束动画、弹分数、等待重开。我们可以在 Console 里执行Runner.instance_.gameOver function() {};这一行执行之后再让你手里的恐龙随便往仙人掌上撞它会在碰到之后毫发无伤地继续往前跑游戏永远不会显示 Game Over。原理很简单我们只是把运行中实例的结束函数换成了一个空函数撞了也白撞。如果你不想整个无敌只想恢复回正常状态可以刷新页面重启游戏实例或者调用Runner.instance_.restart();这样会重置游戏状态同时把gameOver恢复成默认实现。你可能会问为什么不直接改Runner.prototype.gameOver那是为了只影响当前实例不影响以后新开的实例。3.2 篡改分数和速度控制台就是最强的金手指想改分数也可以直接瞄着实例内部变量改。得分主要由distanceMeter维护我试过最简单的方式Runner.instance_.distanceMeter.score 999999; Runner.instance_.distanceMeter.update();第一行把分数改成一个大数第二行强制刷新计分器画面。执行完再看游戏左上角分数已经变成六位数。不过要注意这只是表面数字下面的distanceRan才是真正驱动游戏逻辑的变量。如果只改 score 不改 distanceRan速度不会快但显示很好看。想让游戏立刻变快就直接调用速度设置方法Runner.instance_.setSpeed(20);这个setSpeed是 Runner 暴露出来的方法它会更新当前速度并把相关配置同步过去。试了一下速度调到 20 之后障碍物几乎像弹射一样飞过来正常情况下很难反应。如果觉得自己手速够快可以一点一点往上加感受一下不同速度下的操作阈值。3.3 自己给他换皮肤把恐龙改成一个方块除了分数和速度我们还能改恐龙的绘制方式。小恐龙的外观并不是一张静态图而是通过 Canvas 按帧绘制的。我们不需要读懂每一帧的绘制逻辑只需要替换它的draw方法。我在 Console 里执行了这样一段代码把恐龙变成了一个红色方块const dino Runner.instance_.tRex; dino.draw function(canvas, x, y) { canvas.fillStyle #ff0000; canvas.fillRect(x, y, dino.config.WIDTH, dino.config.HEIGHT); };这里面的canvas是游戏画布的 2D 上下文x和y是恐龙当前坐标。执行之后原本像素风的霸王龙会瞬间变成一个移动的红色方块虽然少了点灵魂但至少证明我们真的把游戏内部逻辑改掉了。如果你对 Canvas 的绘制比较熟完全可以发挥想象力把恐龙画成圆形、三角形或者叠加一个动态尾巴。只是要注意draw方法每一帧都会被调用所有绘制代码不能写得太重否则会影响游戏帧率。4. 再进一步全自动小恐龙是怎么写的4.1 自动跳跃的原理障碍物坐标 假空格事件手动魔改玩够了我决定写一个自动玩小恐龙的脚本。这个不依赖 DevTools 以外的任何工具核心思路是每一帧都去读障碍物的位置当障碍物距离恐龙足够近时主动触发一次空格键事件。整个脚本的核心只有三个部分不断获取当前障碍物数组。判断最近的障碍物离恐龙多远。满足条件时模拟按下空格键。模拟按键用的是浏览器原生事件document.dispatchEvent(new KeyboardEvent(keydown, { keyCode: 32 }));小恐龙游戏监听的是keydown事件里的keyCode 32所以这样就能骗过游戏让它以为真的有人按了空格。完整的自动跳跃脚本我写成这样const autoJump () { const runner Runner.instance_; if (!runner || runner.crashed) return; const dino runner.tRex; const obstacles runner.horizon.obstacles; if (!obstacles.length) return; const nearest obstacles[0]; const gap nearest.xPos - dino.xPos; // 距离足够近且恐龙当前不处于跳跃上升状态 if (gap 0 gap 80 dino.jumpVelocity 0) { document.dispatchEvent(new KeyboardEvent(keydown, { keyCode: 32 })); } }; setInterval(autoJump, 16);这里我把检测间隔设为 16 毫秒接近每秒 60 次。每次判断时先看看恐龙是不是已经跳起来了避免在空中重复触发跳跃。如果距离小于 80 像素就认为应该起跳。实际跑起来脚本能自动躲开大部分仙人掌和低空翼龙但遇到比较高或者视角比较诡异的场景还是偶尔会翻车。原因在于只取了最近的障碍物没有综合考虑障碍物宽度、速度和跳跃滞空时间。4.2 从能蹦跶到不死关键参数调优上面那版能用但不稳。想稳定跑分需要把“起跳距离”和“当前速度”关联起来。道理很简单速度快的时候障碍物很快就会撞到恐龙所以需要在更远的距离起跳。我改成这样const speed runner.currentSpeed; const jumpDistance 60 speed * 4; if (gap 0 gap jumpDistance dino.jumpVelocity 0) { document.dispatchEvent(new KeyboardEvent(keydown, { keyCode: 32 })); }60 speed * 4是我反复试出来的经验公式。基础速度 6 左右时起跳距离在 84 像素左右速度 10 时起跳距离变成 100 像素。节奏会舒服很多。不过真正让自动脚本质变的是把检测循环从setInterval换成requestAnimationFrame。小恐龙游戏的绘制本身是跟着浏览器的帧循环走的如果你用setInterval两个循环可能错拍在你检测到障碍物很近时画面可能已经跑了一格。换成requestAnimationFrame后每次画面刷新前都会检查一次更接近人类眼睛看到画面的时机。4.3 让脚本长期跑而不崩溃的细节setInterval版本有个隐患如果游戏已经 Game Over 了Runner.instance_仍然存在但你再去读runner.horizon.obstacles可能会拿到一个空数组或者残留数据脚本不会报错但也帮不了你重开。为了让脚本更健壮可以在每次检测时判断一下runner.crashed。如果已经碰撞了就手动触发重开if (runner.crashed) { document.dispatchEvent(new KeyboardEvent(keydown, { keyCode: 32 })); document.dispatchEvent(new KeyboardEvent(keyup, { keyCode: 32 })); return; }小恐龙游戏掉线之后按空格会重开一局所以模拟一次完整按键就能达到自动重开的效果。配合无敌函数一起用会更稳但那就少了点乐趣。5. 破解过程中的真实翻车现场和排查思路5.1 刷新后一切恢复原样为什么“改完没用”我第一次改完分数兴奋地截图发朋友然后顺手按了个 F5再打开页面发现分数回到 0恐龙也恢复了原样。这个其实很好理解我们的所有修改都发生在内存里刷新页面之后浏览器会重新加载脚本、重新创建游戏实例之前对实例的任何修改自然就全部消失了。如果想做到“刷新生效”就得去改源码文件或者做一个每次进入页面自动注入脚本的工具。对于普通玩家来说刷新丢失并不是坏事至少不用担心把浏览器搞坏。5.2 Game Over 之后你的脚本为什么报错自动脚本跑了一段时间游戏崩溃被撞死之后控制台偶尔会飘红。一次排查我发现游戏结束以后horizon.obstacles里的障碍物对象被清理或冻结了我再拿nearest.xPos自然就报了 undefined 错误。后来我在脚本里加了两层保护const obstacles runner.horizon runner.horizon.obstacles; if (!obstacles || !obstacles.length) return;这行代码可以挡住大多数“实例还在但内部数据已经重置”的情况。破解这类运行中对象时别假设所有字段永远可用多一层判断能让你的脚本稳定很多。5.3 用 console.log 核实修改是否生效改完gameOver之后如果看不出效果可以在 Console 里手动打印状态Runner.instance_.crashed如果返回false说明恐龙没有进入失败状态如果返回true说明游戏内部还在正常触发碰撞逻辑那可能是你覆盖的gameOver函数名不对。稳妥一点的做法是在覆盖前打印一下原始函数console.log(Runner.instance_.gameOver);看到它确实是一个Function再覆盖也不迟。排查这类问题最笨也最有效的方法就是每个关键节点插一行console.log用真实的中间量验证自己的假设而不是闭着眼睛改代码。6. 破解之外这套思路还能帮到你什么6.1 每个网页游戏都可能是你的Debug对象破解小恐龙的过程本质上是一次浏览器调试的完整练习。你使用 DevTools 的能力会在这种“拆解玩具”的过程中飞速提升看全局变量、打断点、格式化压缩后的源码、监控 Canvas 绘制、模拟键盘事件。这套能力不只是拿来改游戏分数更是日常前端排错、性能分析和自动化测试的看家本领。我后来再用 DevTools 调试其他网页项目时都会习惯性地先去控制台找找有没有暴露全局实例或者看看模块源码有没有明显的入口。很多看似复杂的问题其实在一层一层扒开执行上下文之后会清晰很多。6.2 从改bug到读源码的能力提升很多人觉得读源码是大厂工程师才需要的硬核技能但其实像小恐龙游戏这种体量适中、逻辑直白的开源代码是非常好的入门素材。你不需要从头到尾读完每一个文件只需要带着问题去读我想让它不死该看哪个函数我想让它变快该看哪个变量我想换皮肤该看哪个绘制方法带着具体目的读源码比从头看到尾高效得多而且会真的留下印象。等你在小恐龙上把这种“找到关键点”的节奏练熟了再换成其它开源库也能很快定位到相关模块。6.3 对游戏设计的一点点重新理解拆完小恐龙之后我对那种“看起来简单但很上头”的游戏多了几分敬意。它的核心机制极其简单但数值节奏设计得很讲究速度先快后缓、障碍物随机里有规律、跳跃手感轻盈但有重量感。真正的硬核不是堆功能而是把一个点打磨到让人愿意反复尝试。下次再遇到 Chrome 断网那只小恐龙应该不会再让你觉得无聊了。你可以打开控制台把它变成红色方块或者让它无视障碍一路狂奔再不然写个自动脚本身边人惊呼“这游戏成精了”。别把浏览器只当浏览器用它其实是这个世界上最好玩的一间游戏实验室。