给你的404页面加入dino/T-Rex Runner

垂涎编程随想的每日格言，我在博客中加入了同款每日格言并且记录在 给你的博客加入每日格言 一文中。这几天在乱看博客时误点链接，发现 土豆不好吃/BennyThink 的 404 页面 里居然有 Chrome 浏览器的 dino 游戏，更神奇的是他居然能在 Firefox 浏览器内运行。

dino 游戏也叫做 T-Rex Runner，是 Chrome 浏览器在无网络连接时提供的小游戏，也可以通过 chrome://dino/ 在任何条件下进入。但是其中似乎需要用到 Chrome 的依赖，因此即使把 dino 的代码存下来，在其他浏览器也无法运行，dino 算得上是 Chrome 的独占小游戏。

不过既然 BennyThink 的 dino 游戏能在 Firefox 上运行，就来研究一下好了。复制了半天代码但都差强人意，最后发现其实可以只用其中的 embed 标签这行，用浏览器直接打开 src 也确实是 dino。

<embed src="https://dmesg.app/wp-content/themes/WordPressGit-master/extra/t-rex-runner/index.html" width="330" height="280">

我直接把标签加到我 404 页面的代码中测试了一下，不过不能运行。我猜测可能是有某种域名保护设置，导致这行代码无法在我的网页内运行，Firefox 提供了一个弹窗，通过弹窗打开 src 就能够运行。

既然如此，那我把代码直接下载下来，放置到 assets 中调用应该就不会出现这样的问题了吧？我把 src 的整个网页保存了下来，得到一个html文件和一个assets的目录。

我原本想分别复制 html 代码到 404 页面的 html 中，复制图片/js/css 到 assets 的资料，再改对应的引用路径，但是因为总有地方没改对迟迟不能正确运行。

最后突发奇想，与其把素材拿出来到处放的乱糟糟，不如直接完全不改的放到网页里。根据 BennyThink 的网址来看，此 dino 应该是个 WordPress 上的插件，那我也保留原本插件的样子好了。因此 404 页面就直接用 embed 标签，src 就填 dino 游戏的 html。为了让 dino 游戏有个简单的 src，我干脆直接放在网页的根目录下。因此也可以通过 此 src 进入游戏。「P.s. 因为 Jekyll 能在构建时自动把 html 文件构建了，其他格式的文件就不行。」

修改后的 404 页面长 这样，其实只是用嵌入网页的方式把 dino 放在 404 页面中，最后再调了调尺寸，就完成 dino 的嵌入了。

<div class="container">
  <h1>404 Page not found :(</h1>

  <p><strong>The requested page could not be found.</strong></p>

  <embed src="/chrome%20easter%20egg%20t-rex%20runner.html"  width="650" height="280"/>  
</div>

试玩一下，发现跟最新的 dino 差别不太大，也有计分和飞鸟，不过好像没有晚上。

做之前预期是挺简单的，做的过程中有点头大，不过做完后回头看感觉还是觉得简单。之前 404 页面也没有维护，出现的布局堆叠的问题，这次也一并处理掉了。这次的实践不仅能在 Firefox 上也能玩 dino，并且还把游戏放入了 404 页面，两个意想不到一次完成，构思的难度大于操作的难度。不过在 404 页面上放游戏，会不会反而分散了注意力呢？我自己测试的时候就玩的停不下来了。

参考资料：

• 土豆不好吃/BennyThink 的 404 页面
• chrome://dino/