企业官网建设流程全解析

相信大部分常上网的朋友，都有过这样的经历：Wi-Fi 突然抽风，浏览器刷新半天出不来页面，Chrome 标签页里冷不丁冒出一只灰扑扑的小恐龙，背景是满屏的像素沙漠，旁边一行小字写着“没有网络连接”。多数人看到这个界面的第一反应是烦躁，但我自己，包括身边不少做开发的朋友，第一反应反而是赶紧按一下空格键——接下来，这只小恐龙就真的跑起来了，跳跃、下蹲、躲仙人掌、躲翼龙，一不小心撞上障碍物，Game Over，再按空格，重新来过。这只“谷歌小恐龙”，学名 Chrome Dino，又叫 T-Rex Runner，大概是这个时代最不正经的“官方彩蛋游戏”，也是很多人断网时光里唯一的快乐源泉。

这篇文章就来好好聊聊这只小恐龙：它是怎么被设计出来的，玩法里藏着哪些细节，背后到底是怎么实现的，以及怎样在日常浏览器里随时把它唤醒、玩得更远。如果你只是个路人玩家，看完能解锁几个隐藏玩法；如果你是前端或者游戏爱好者，里面关于 Canvas、碰撞检测和 Chromium 内置页的实现思路，应该也会给你一些启发。

1. 断网后的意外产物：小恐龙是怎么来的

1.1 从“报错页”到“彩蛋游戏”

Chrome 的离线页面最早就是一串冰冷的错误提示：一个忧郁的图标，一行“无法访问此网站”，再加一堆刷新按钮和网络诊断链接。Google 的前端团队觉得这种体验实在太丧了，用户断网本来就烦，再看到一张扑克脸，体验直接掉到谷底。于是他们产生了一个很“Google”的念头：能不能把错误页变成一个隐藏的小游戏，让用户沮丧之余还能玩一下，顺便缓解等待网络恢复的焦虑。

这个念头大概在 2014 年变成了现实。据目前能查到的资料，Chrome 的设计团队把这个项目作为“20% 时间”的产物做了出来，游戏本体被塞进浏览器内置页面里。正常情况下你根本不知道它存在，只有当你处于离线状态、尝试访问一个无效页面时，这只小恐龙才会出现。它本质上是一个“错误页彩蛋”，但正是因为这种不期而遇的触发方式，它比任何精心推广的游戏都更有传播力。我印象很深的是那几年，身边只要有人断网，就会听到周围传来“哒哒哒”的键盘空格声，不用问，肯定是在玩小恐龙。

更有意思的是，这个页面连按钮都是假的——页面上那个“重新加载”是正经功能，但小恐龙本身才是真正的隐藏入口。设计团队故意不让它显眼，也不加任何说明文字，玩家必须自己发现“这恐龙能动”。这种刻意降低引导、鼓励探索的设计思路，放到今天依然值得做产品的人反复琢磨。

1.2 为什么偏偏是一只霸王龙

为什么不是小猫、小狗、植物或者别的什么？当时网上有很多讨论，比较可信的说法是：设计团队最开始参考了像素游戏黄金时代的造型风格，而霸王龙这个形象，带着一种“史前生物误入现代数字世界”的反差萌。想想看，一只看起来笨笨的霸王龙，在荒漠里狂奔躲避障碍，本身就自带喜感，不需要任何剧情铺垫，看一眼就能理解这个画面在讲什么。

还有一个细节我后来查资料才注意到：这只恐龙的原始造型其实是参考了上世纪 80 年代街机游戏的“点阵图”风格，黑白配色、极简轮廓。Google 做这个游戏时故意放弃了高精度的 3D 建模，也用不着复杂的帧动画，而是用一套最简单的黑白像素元素来呈现整个世界。像素风的好处是加载极快，即便在完全离线的状态下，浏览器也能瞬间把这个小游戏渲染出来；而且它天然自带怀旧滤镜，让经历过红白机时代的人一看就懂，让没经历过那个时代的小朋友也觉得挺可爱。一只黑白小恐龙，在技术限制和艺术表达之间找到了一个非常巧妙的平衡点，这是我特别喜欢这个作品的地方。

2. 玩法机制与那些隐藏细节

2.1 规则极简，却很耐玩

小恐龙的规则说起来一句话就能讲完：按空格或上箭头跳跃，按向下箭头或下蹲，躲避仙人掌和翼龙，看你能跑多远。但就是这套“一句话规则”，让无数人玩了好几年。原因在于，它的“难度曲线”被调校得非常舒服——不是一成不变，也不是突然爆炸式变难。

游戏开始后，小恐龙会自己往前跑，地面上的仙人掌会从右侧随机出现。刚开始的十几步，速度很慢，障碍物也比较稀疏，足够你熟悉跳跃键；当你跑过大约 300 分之后，游戏速度开始轻微提升，仙人掌的出现频率也变高了；再过一段时间，空中会开始出现翼龙，你需要根据它的高度决定是跳跃还是下蹲通过。整场游戏的节奏就像温水煮青蛙，你感觉自己一直在进步，但每次距离上一次 Game Over 的分数也就多个一两百分。这种“滚动式难度”是很多跑酷类游戏的标配，但 Chrome Dino 把它做到了几乎没有学习成本的程度。

我最开始玩的时候，大概能跑三四百分就是极限，总觉得仙人掌来得太突然。后来才发现，问题出在“起跳时机”上——我总盯着小恐龙脚下的地面，其实要看屏幕右侧“障碍物进入视野”的时刻。形成肌肉记忆之后，跑到一两千分就变得稀松平常。很多新手以为这游戏全靠反应，其实它更靠节奏感，就像踩节拍一样。

2.2 那些藏在细节里的像素彩蛋

这只小恐龙并不像表面看起来那么简单，它藏了不少开发者留下的小心思。我能记起来的有这么几个：

• 昼夜交替：当你跑过 700 分左右，整个沙漠的背景会从白天变成黑夜，天空会出现满屏星星，地面颜色也跟着加深。再跑一段，又会切回白天。这个昼夜切换的细节非常朴素，却让游戏画面有了呼吸感，不会因为千篇一律的沙漠背景而审美疲劳。
• 分数由“速度”组成：游戏右上角显示的数字看起来是分数，实际上它更像是一段累计的“奔跑距离”，数值也在不断跳跃式增长。很多玩家吐槽“这分数跳得太快了”，其实是开发者把速度感和得分感融合在了一起——数字跳动越快，你越能感觉到自己正在加速。
• 角色动画的“偷懒”：小恐龙的奔跑动作其实只有双腿交替的两帧画面，配上地面纹理的滚动来制造“前进感”。这种动画精度放在今天非常粗糙，但配合整体像素风反而显得浑然一体，你完全不会觉得它卡顿。
• 翼龙的飞行高度：翼龙出现的时候，有时候飞得很低，你需要下蹲；有时候飞得很高，你需要跳跃。区分方式就是观察它翅膀扇动的频率和身体的水平位置。这个设计让游戏从“单一跳跳乐”进化成了“双层次障碍处理”，难度和策略性一下就上来了。

这些细节单看都很小，但它们组合在一起，让整个游戏在简单的外壳下有了足够的深度，这也是它“耐玩”的真正秘密。

2.3 双人模式与“隐藏的第二只恐龙”

如果你用的 Chrome 版本比较新，小恐龙已经从单机游戏悄悄升级成了“可以双人玩”的派对游戏。这个隐藏玩法知道的人不多，但打开方式并不复杂：先在 chrome://dino 页面按空格进入游戏，然后按一下 P 键——屏幕上的小恐龙旁边会多出另一只蓝色的、带尾巴的小恐龙，游戏瞬间变成双人对战跑酷。

我在实际测试中确认，双人模式下玩家一使用空格或上箭头跳跃，玩家二使用 W 键跳跃，双方在同一块沙漠赛道上比拼，谁先撞障碍物谁出局。很多人第一次看到这只蓝色的“带尾巴小恐龙”时会很惊讶，因为它长得实在太像世嘉经典游戏《刺猬索尼克》里的塔尔斯了——其实这也是 Chrome 团队埋下的一个谐音梗。类似这种“按一个键就解锁新角色”的隐藏交互，放在当年是很有探索乐趣的。如果你身边有朋友也喜欢玩小恐龙，强烈建议用双人模式现场 PK 一把，比各自刷分要有意思得多。

3. 从游戏到代码：小恐龙背后的技术实现

3.1 用 Canvas 与精灵图撑起整个世界

作为一个前端开发和游戏爱好者，我专门去翻过 Chromium 项目里关于这只小恐龙的一些实现资料。其实整只小恐龙（包含地面、白云、仙人掌、翼龙、得分数字）并不是用 DOM 元素拼出来的，而是通过浏览器内置的 Canvas 2D API 绘制出来的，整个游戏逻辑是 JavaScript 脚本在驱动。这样做的好处非常明显：Canvas 是一个独立的画布，绘制效率高，不需要频繁操作 DOM 节点，即使浏览器处于“离线降级状态”，也能保证游戏的流畅运行。

你看到的小恐龙形象，本质上是一张“精灵图”（Sprite Sheet）。别看它跑起来动作很自然，其实只是这张图上不同区域的图像被依次绘制出来，模拟出两帧动画的效果。整个画面里唯一持续变化的其实是“地面纹理”——恐龙身体基本在原地踏步，地面从左往右滚动，配合天空背景的移动，让大脑自动补充出“向前奔跑”的视觉印象。这种“视差滚动”的技巧，从红白机时代一路用到今天，算是横版跑酷游戏里最经典的底层手法。

游戏的主循环采用的是 requestAnimationFrame，也就是浏览器每次重绘屏幕之前都会回调一次游戏逻辑，更新恐龙位置、检测障碍物碰撞、刷新分数。为什么不用 setInterval 定时器？因为定时器的刷新频率不稳定，尤其在系统负载高的时候，容易出现明显的卡顿；而 requestAnimationFrame 会跟着显示器的刷新频率走，能保证画面切换和屏幕刷新保持同步，游戏体感就会顺滑不少。这个选择对很多前端动画项目都有参考价值。

3.2 持续增长的挑战：速度、重力和碰撞检测

小恐龙的“速度感”是怎么来的？其实核心参数就是两个：一个是恐龙自身的水平移动速度，一个是地图的滚动速度。当玩家得分越高，这两个速度值会按比例缓慢增加。我研究过一些社区里的逆向分析文章，它并不是突然跳到某个高速度，而是通过一个递增的 slope 曲线来实现平滑过渡，所以你在玩游戏时能感觉到“越跑越快”，但说不清具体从哪一刻开始变的。

重力系统的实现也很简单。每次玩家按跳跃键，脚本会给恐龙一个向上的瞬时速度，之后每一帧根据一个重力加速度值让这个向上的速度逐渐衰减，直到为负，恐龙回到地面。这个“跳起—到达最高点—下落—落地”的过程，本质上就是初中物理里的抛物线运动，但代码里只需要维护一个垂直速度变量就够了。

碰撞检测则更加粗暴但高效：每一帧把恐龙、仙人掌、翼龙分别看作一个矩形区域（也叫 hitbox），然后判断这些矩形是否相交。相交则游戏结束，不相交则继续。由于整个画面的元素本来就不多，这种矩形碰撞检测完全不会带来性能压力。值得一提的是，官方还刻意把恐龙的碰撞盒做得比它的图像小了一点点，这样玩家在跳跃时有一定的“宽容度”，不会因为擦到一根像素羽毛就判负。这种细微的容错设计，是很多独立游戏开发者容易忽略、但实际体验影响极大的细节。

3.3 最高分记录与本地存储

你有没有发现，每次打开小恐龙，右上角会显示一个“最高纪录”数字？这个最高分不是保存在 Google 服务器上的，而是存在浏览器本地的 localStorage 里。每次游戏结束时，脚本会把本次得分与本地存储中的历史最高值做比较，如果更高，就更新存储。这种做法意味着，换一台电脑、清理浏览器缓存，你的历史最高分可能就没了。

我个人觉得这个设计很符合“离线小游戏”的定位：不依赖网络、不强制登录、也不做任何云端同步，它就是一个纯粹的单机小玩具。把最高分存在本地，既省掉了服务器成本，也让玩家感觉到这个游戏非常“独立”。如果你喜欢折腾，甚至可以打开浏览器的开发者工具，手动修改 localStorage 里的分数记录，给自己创造一份“虚假的辉煌”——不过说实话，自己玩的分数有没有水分，心里最清楚。这种纯粹、不联网的特质，也让它成为很多人评价“最让人怀念的浏览器功能”的理由之一。

4. 实操篇：随时唤醒小恐龙的几种办法与进阶技巧

4.1 断网之外，在线打开小恐龙的三种方法

很多人以为只有断网才能玩到小恐龙，其实只要知道入口，在线状态下随时都能玩。我整理了三个亲自验证过的方法：

方法一：地址栏直接输入 chrome://dino。这是最推荐的方式。在 Chrome 浏览器的地址栏输入 chrome://dino，按回车，一个干净的小恐龙游戏页面马上就出来了，不需要断网，也不需要关闭 Wi-Fi。这个方法也是目前最稳定、最不容易受系统版本影响的入口。

方法二：在断网页面“找彩蛋”。当你真的遇到断网页面时，直接点击页面空白区域，小恐龙就会立刻出现在报错页的固定位置，然后按空格就可以开始。有些版本需要你先刷新一下页面，小恐龙才会出现，但整体逻辑万变不离其宗。

方法三：访问一些历史遗留的 chrome://network-error/ 系列地址。这个方法的可用性在不同 Chrome 版本中不太一样，但在某些旧版本中，比如 chrome://network-error/-106，也能直接唤起小恐龙。如果你是新版 Chrome，大概率会被系统识别为无效地址，不建议作为首选。稳妥起见，记住 chrome://dino 就够了。

4.2 解锁双人模式的钥匙

前面提到双人模式，这里再说具体一点：在 chrome://dino 页面开始游戏后，键盘上按一下 P 键，第二只蓝色小恐龙就会出现。需要注意的是，双人模式对电脑键盘的要求比较高，如果你用的是笔记本的紧凑键盘，也可能出现按键冲突，导致第二只恐龙不响应，这时外接一个普通键盘就能解决。

在双人模式下，两位玩家的目标都是尽量跑远，但彼此是独立操作的——不存在合作，纯粹是比拼。我自己的经验是，人一多就会产生“不服输”的情绪，这种派对感比单人刷分爽得多。如果你只是想展示一下小恐龙还能“双人玩”的冷知识，这是一个满分话题。

4.3 跑得更远的三个技巧

这些技巧不保证你能破世界纪录，但至少能让你从“两位数分数”进化到“四位数分数”。

第一个技巧是别急着跳，先看障碍物的类型。仙人掌有高有低，有的单根，有的连排，翼龙有高飞和低飞。正确做法是先判断障碍物的“层”，再决定是跳还是蹲。无脑跳的玩家通常撞上的都是翼龙的翅膀，因为翼龙飞得低的时候你跳起来反而正中靶心。

第二个技巧是把跳跃点前移一个“身位”。很多人的习惯是等障碍物到了恐龙正前方再跳，这样很容易撞上。实际上，跳跃的抛物线需要一个提前量，应该在障碍物即将进入恐龙碰撞范围之前的一瞬间起跳，这样落地时刚好越过障碍物，容错率最高。你可以把注意力集中在屏幕偏右的位置，而不是恐龙身上，这样反应会快半拍。

第三个技巧是长按跳跃键完成连续跳跃。小恐龙是可以按住空格键持续的，在遇到连续多根仙人掌时，不需要一下一下精准起跳，直接按住跳跃键配合节奏松放，会更不容易失误。这个手感需要稍微练习一下，但习惯之后你会觉得整套操作丝滑了不少。

5. 踩坑记录与答疑速查表

5.1 常见问题整理

根据我自己和身边朋友的实操经验，整理了几个最常见的“小恐龙疑难杂症”，做成速查表：

这份表格算是应急排查，如果还是解决不了，可以试试大法：关掉浏览器再重新打开，绝大多数在线小游戏的问题都能这么解决。

5.2 我实测过的几个“有意思的坑”

这里分享几个我亲身踩过、觉得值得写下来的坑。

第一个坑是关于“暂停”的。你不会以为小恐龙没有暂停功能吧？有的。在游戏过程中，按一下空格之外的任意键或者切换到其他标签页，游戏会进入暂停状态；再切回页面，需要再按一次空格才能继续。我刚开始玩的时候，总是因为切出去回复一条消息，回来就发现恐龙已经撞上了。原因在于，很多系统按键会自动触发页面焦点改变，游戏在后台时并没有真正暂停，只是你的页面被盖住了，等切回来的时候它还在跑。解决办法是，需要切走时先按一下 Esc 或者点击标签页地址栏，让页面失去焦点，这样游戏才会自动进入暂停逻辑。

第二个坑是关于“最高分”的执念。很多人包括我自己，都有过“刷到一万分”的目标。但坦白说，跑到五千分以后，游戏的速度已经很快了，反应时间被压缩到极限，想靠纯操作往上冲非常难。我后来发现，真正能冲到极高分的玩家，多数不是靠反应，而是靠“固定节奏的肌肉记忆”。他们会在固定位置固定跳跃，用同一套动作循环应对随机出现的障碍物。这就像弹钢琴，练到肌肉记忆，手指自己会动。

第三个坑可能更多是“浏览器行为”层面。某些浏览器自带“禁止运行 JavaScript”的设置，会导致小恐龙点了开始却完全没有反应。这不是游戏本身的 bug，而是浏览器安全策略把 Canvas 脚本给拦了。遇到这种情况，只要在地址栏右侧的小盾牌图标里把站点脚本权限放开，游戏立刻就能正常运行。

6. 小恐龙的文化余波与一点个人感悟

这只无意间设计出来的小恐龙，后来已经远远超越了一个“错误提示页”的边界。它出现在各种表情包里，变成过卫衣图案，甚至还被做成实体玩具摆件。在 Chromebook 遍布的学校里，在断网体验频繁的公共 Wi-Fi 环境里，它是很多人真正意义上玩的“第一款 Chrome 游戏”。Google 后来也顺势把它打造得更完善，加入了变色龙模式、双人模式等，让一个原本只是“临时解闷”的工具逐渐有了自己独立的生命力。

我个人最欣赏小恐龙的一点，是它在“功能”与“趣味”之间找到的平衡。它本质上是错误提示页，但 Google 并不满足于让用户看着报错干等，而是用最轻量的游戏，把一次糟糕的网络体验变成了一段小小的娱乐时光。这种“用技术给生活增加一点幽默”的态度，比很多讲究宏大叙事的项目都来得真诚。如今我偶尔还会打开 chrome://dino 玩上一会儿，不是为了刷分，就是想看看那只黑白霸王龙在像素沙漠里跑起来的样子——它提醒我，好的产品设计有时候不需要理由，只需要在用户最郁闷的时刻，递上一颗刚好能解闷的糖。