运行游戏

我们在第十四章中看到的requestAnimationFrames函数是一种产生游戏动画的好方法。但该函数的接口有点过于原始。该函数要求我们跟踪上次调用函数的时间，并在每一帧后再次调用requestAnimationFrame方法。

我们这里定义一个辅助函数来将这部分烦人的代码包装到一个名为runAnimation的简单接口中，我们只需向其传递一个函数即可，该函数的参数是一个时间间隔，并用于绘制一帧图像。当帧函数返回false时，整个动画停止。

  1. function runAnimation(frameFunc) {
  2.   let lastTime = null;
  3.   function frame(time) {
  4.     let stop = false;
  5.     if (lastTime != null) {
  6.       let timeStep = Math.min(time - lastTime, 100) / 1000;
  7.       if (frameFunc(timeStep) === false) return;
  8.     }
  9.     lastTime = time;
  10.     requestAnimationFrame(frame);
  11.   }
  12.   requestAnimationFrame(frame);
  13. }

我们将每帧之间的最大时间间隔设置为 100 毫秒（十分之一秒）。当浏览器标签页或窗口隐藏时，requestAnimationFrame调用会自动暂停，并在标签页或窗口再次显示时重新开始绘制动画。在本例中，lastTime和time之差是隐藏页面的整个时间。一步一步地推进游戏看起来很傻，可能会造成奇怪的副作用，比如玩家从地板上掉下去。

该函数也会将时间单位转换成秒，相比于毫秒大家会更熟悉秒。

runLevel函数的接受Level对象和显示对象的构造器，并返回一个Promise。runLevel函数（在document.body中）显示关卡，并使得用户通过该节点操作游戏。当关卡结束时（或胜或负），runLevel会多等一秒（让用户看看发生了什么），清除关卡，并停止动画，如果我们指定了andThen函数，则runLevel会以关卡状态为参数调用该函数。

  1. function runLevel(level, Display) {
  2.   let display = new Display(document.body, level);
  3.   let state = State.start(level);
  4.   let ending = 1;
  5.   return new Promise(resolve => {
  6.     runAnimation(time => {
  7.       state = state.update(time, arrowKeys);
  8.       display.setState(state);
  9.       if (state.status == "playing") {
  10.         return true;
  11.       } else if (ending > 0) {
  12.         ending -= time;
  13.         return true;
  14.       } else {
  15.         display.clear();
  16.         resolve(state.status);
  17.         return false;
  18.       }
  19.     });
  20.   });
  21. }

一个游戏是一个关卡序列。每当玩家死亡时就重新开始当前关卡。当完成关卡后，我们切换到下一关。我们可以使用下面的函数来完成该任务，该函数的参数为一个关卡平面图（字符串）数组和显示对象的构造器。

  1. async function runGame(plans, Display) {
  2.   for (let level = 0; level < plans.length;) {
  3.     let status = await runLevel(new Level(plans[level]),
  4.                                 Display);
  5.     if (status == "won") level++;
  6.   }
  7.   console.log("You've won!");
  8. }

因为我们使runLevel返回Promise，runGame可以使用async函数编写，如第十一章中所见。它返回另一个Promise，当玩家完成游戏时得到解析。

在本章的沙盒的GAME_LEVELS绑定中，有一组可用的关卡平面图。这个页面将它们提供给runGame，启动实际的游戏：

  1. <link rel="stylesheet" href="css/game.css">
  3. <body>
  4.   <script>
  5.     runGame(GAME_LEVELS, DOMDisplay);
  6.   </script>
  7. </body>