介绍

Chrome 中的恐龙小游戏是一个简单的无限跑步游戏,它会让用户跳过仙人掌,并闪避障碍物,游戏为用户提供基本控制,按空格键跳跃(并开始游戏),向下箭头(↓)俯身奔跑以躲避障碍物。

原本是荣来打发断网的小游戏,加入到Blog中貌似没什么用。然而当你多按几下空格,会发现你已深陷其中。

源码分析

源码分析请参见其他相关博客(解释得相当清楚)

修改细节

基于Chrome Dino 作者开发的版本做了少量修改

  • 修改Canvas创建方式
  • 增加reload方法
  • 少量调整坐标细节
  • 调整游戏中事件冒泡
  • 夜间场景调整(直接反转Document会导致页面其他内容如看板娘[腹黑])
  • 其他微小调整

下载链接参见下文

如何使用

以Hexo的sakura主题为例
创建布局文件dino.ejs

    <link rel="stylesheet" type="text/css" href="/dino/dino.css" />
    <div id="main-frame-error" class="interstitial-wrapper">
        <div id="offline-resources">
            <img id="offline-resources-1x" src="/dino/default_100_percent/100-offline-sprite.png">
            <img id="offline-resources-2x" src="/dino/default_200_percent/200-offline-sprite.png">
            <template id="audio-resources">
                 <audio id="offline-sound-press" src="data:audio/mpeg;base64,************=="></"></audio>
                 <audio id="offline-sound-hit" src="data:audio/mpeg;base64,************=="></audio>
                 <audio id="offline-sound-reached" src="data:audio/mpeg;base64,************=="></audio>
         </template>
        </div>
        <div class="runner-container" style="width: 780px;">
            <canvas class="runner-canvas" width="780" height="150" style="width: 780px; height: 150px;"></canvas>
        </div>
    </div>

将布局文件插入到框架中

  <%- partial('_partial/dino') %>

设置反转范围 将黑天需要反转颜色的标签加上class: “dino-invert”
添加js内容

 <script>
    var dino;
    if (dino) {
        dino.reload();
    } else {
        dino = new Runner('.interstitial-wrapper');
    }
    document.onkeydown = function (evt) {
        evt = evt || window.event;
        if (dino.activated) {
            evt.preventDefault();
        }
    };
</script>

⬇按空格键进行游戏⬇

下载地址:Chrome_Dino


只要有树叶飞舞的地方,火就会燃烧。