Chrome-小恐龙游戏源码探究三-进入街机模式

前言

上一篇文章：《Chrome 小恐龙游戏源码探究二 — 让地面动起来》实现了地面的移动。这一篇文章中，将实现效果：1、浏览器失焦时游戏暂停，聚焦游戏继续。2、开场动画。3、进入街机模式。

街机模式的效果就是：游戏开始后，进入全屏模式。例如：

可以看到，进入街机模式之前，有一段开场动画。我们先来实现一下这个开场动画。

这里先只实现地面的开场动画，小恐龙的后续再去实现。

实现开场动画

首先修改 CSS 样式：

.offline .runner-container {
  position: absolute;
  top: 35px;
- width: 100%;
+ width: 44px;
  max-width: 600px;
  height: 150px;
  overflow: hidden;
}

让 canvas 初始只显示 44px 的宽度。

然后在 Runner 的原型链上添加方法：

Runner.prototype = {
  /**
   * 游戏被激活时的开场动画
   * 将 canvas 的宽度调整到最大
   */
  playIntro: function () {if (!this.activated && !this.crashed) {
      this.playingIntro = true; // 正在执行开场动画

      // 定义 CSS 动画关键帧
      var keyframes = '@-webkit-keyframes intro {' +
          'from {width:' + Trex.config.WIDTH + 'px}' +
          'to {width:' + this.dimensions.WIDTH + 'px}' +
        '}';
      // 将动画关键帧插入页面中的第一个样式表
      document.styleSheets[0].insertRule(keyframes, 0);

      this.containerEl.style.webkitAnimation = 'intro .4s ease-out 1 both';
      this.containerEl.style.width = this.dimensions.WIDTH + 'px';

      // 监听动画。当触发结束事件时，设置游戏为开始状态
      this.containerEl.addEventListener(Runner.events.ANIMATION_END,
        this.startGame.bind(this));

      this.setPlayStatus(true); // 设置游戏为进行状态
      this.activated = true;    // 游戏彩蛋被激活
    } else if (this.crashed) {
      // 这个 restart 方法的逻辑这里先不实现
      this.restart();}
  },
  /**
   * 更新游戏为开始状态
   */
  startGame: function () {
    this.playingIntro = false; // 开场动画结束
    this.containerEl.style.webkitAnimation = '';
  },
};

需要补充一些数据：

Runner.events = {
  // ...

+ ANIMATION_END: 'webkitAnimationEnd',
};

这里用到了小恐龙类里的数据，我们先临时定义一下：

function Trex() {}

Trex.config = {WIDTH: 44,};

然后在 Runner 的 update 方法中调用上面定义的 playIntro 方法：

Runner.prototype = {
  /**
   * 更新游戏帧并进行下一次更新
   */
  update: function () {
    // ...

    if (this.playing) {this.clearCanvas();

      // 刚开始 this.playingIntro 未定义 !this.playingIntro 为真
+     if (!this.playingIntro) {+       this.playIntro(); // 执行开场动画
+     }

      // 直到开场动画结束再移动地面
+     if (this.playingIntro) {+       this.horizon.update(0, this.currentSpeed);
+     } else {
+       deltaTime = !this.activated ? 0 : deltaTime;
        this.horizon.update(deltaTime, this.currentSpeed);
+     }
    }

    // ...
  },
};

解释一下，上面代码中：

if (this.playingIntro) {this.horizon.update(0, this.currentSpeed);
} else {
  deltaTime = !this.activated ? 0 : deltaTime;
  this.horizon.update(deltaTime, this.currentSpeed);
}

当程序走 if 逻辑的时候，this.horizon.update 接收到的第一个参数为 0，这样在这个方法内部计算出来的位移也是 0。所以只要还在执行开场动画，地面就不会移动。当程序走 else 逻辑的时候，开场动画执行完毕，此时 playIntro 函数已经执行结束，this.activated 值为 true，deltaTime 值大于零，地面的位移也就有了。

到此，就实现了地面的开场动画：

查看添加的代码，戳这里

监听窗口 blur、focus 事件

接下来要实现的效果是：浏览器窗口失焦时游戏暂停，聚焦时游戏继续。

在 Runner 原型链上添加方法：

Runner.prototype = {
  /**
   * 当页面失焦时，暂停游戏
   */
  onVisibilityChange: function (e) {
    if (document.hidden || document.webkitHidden || e.type == 'blur' ||
      document.visibilityState != 'visible') {this.stop();
    } else if (!this.crashed) {this.play();
    }
  },
  play: function () {if (!this.crashed) {this.setPlayStatus(true);
      this.paused = false;
      this.time = getTimeStamp();
      this.update();}
  },
  stop: function () {this.setPlayStatus(false);
    this.paused = true;
    cancelAnimationFrame(this.raqId);
    this.raqId = 0;
  },
};

在 startGame 方法中添加对 blur、focus 事件的监听：

Runner.prototype = {startGame: function () {
    // ...

+   window.addEventListener(Runner.events.BLUR,
+     this.onVisibilityChange.bind(this));

+   window.addEventListener(Runner.events.FOCUS,
+     this.onVisibilityChange.bind(this));
  },
};

补充数据：

Runner.events = {
  // ...

+ BLUR: "blur",
+ FOCUS: "focus"
};

效果如下：

查看添加的代码，戳这里

实现街机模式

在 Runner 原型链上添加方法：

Runner.prototype = {
  /**
   * 设置进入街机模式时 canvas 容器的缩放比例
   */
  setArcadeModeContainerScale: function () {
    var windowHeight = window.innerHeight;
    var scaleHeight = windowHeight / this.dimensions.HEIGHT;
    var scaleWidth = window.innerWidth / this.dimensions.WIDTH;
    var scale = Math.max(1, Math.min(scaleHeight, scaleWidth));
    var scaledCanvasHeight = this.dimensions.HEIGHT * scale;

    // 将 canvas 横向占满屏幕，纵向距离顶部 10% 窗口高度处
    var translateY = Math.ceil(Math.max(0, (windowHeight - scaledCanvasHeight -
        Runner.config.ARCADE_MODE_INITIAL_TOP_POSITION) *
        Runner.config.ARCADE_MODE_TOP_POSITION_PERCENT)) *
        window.devicePixelRatio;
    this.containerEl.style.transform = 'scale(' + scale + ') translateY(' +
        translateY + 'px)';
  },
  /**
   * 开启街机模式（全屏）*/
  setArcadeMode: function () {document.body.classList.add(Runner.classes.ARCADE_MODE);
    this.setArcadeModeContainerScale();},
};

补充数据：

Runner.config = {
  // ...
  
+ ARCADE_MODE_INITIAL_TOP_POSITION: 35,  // 街机模式时，canvas 距顶部的初始距离
+ ARCADE_MODE_TOP_POSITION_PERCENT: 0.1, // 街机模式时，canvas 距页面顶部的距离，占屏幕高度的百分比
};

Runner.classes = {
  // ...

+ ARCADE_MODE: 'arcade-mode',
};

定义 CSS 类 arcade-mode 里的样式：

.arcade-mode,
.arcade-mode .runner-container,
.arcade-mode .runner-canvas {
  image-rendering: pixelated;
  max-width: 100%;
  overflow: hidden;
}

.arcade-mode .runner-container {
  left: 0;
  right: 0;
  margin: auto;
  transform-origin: top center;
  transition: transform 250ms cubic-bezier(0.4, 0.0, 1, 1) .4s;
  z-index: 2;
}

修改 Runner 上的 startGame 方法来调用 setArcadeMode 方法：

Runner.prototype = {startGame: function () {+   this.setArcadeMode();      // 进入街机模式

    // ...
  },
};

到这里街机模式就实现了，效果如下：

查看添加的代码，戳这里

Demo 体验地址：https://liuyib.github.io/pages/demo/games/google-dino/arcade-mode/