双人打僵尸小游戏开发--canvas(三.4)

当按下空格键时，有两个步骤。首先绘创建一个子弹类的实例，塞入子弹库数组

Ammunition中，其中的getAmmunPix函数用于根据当前role的位置和方向，确认枪口的位置。。然后调用drawShot函数执行，绘制出弹药库中的所有子弹类实例。drawShot函数如下所示：

    // 空格键触发射击动作，全屏幕清除，再分别绘制人物和弹药
    const drawShot = () => {
      cancelAnimationFrame(handle)
      cRole.clearRect(0, 0, WIDTH, HEIGHT)
      drawRole(role.x, role.y)
      for (let i = 0; i < ammuniResp.length; i++) {
        ammuniResp[i].update()
      }
      handle = requestAnimationFrame(drawShot)
    }

该函数很简单，主要是requesAnimationFrame这个函数。

聊这个函数之前，我们需要知道，当下主流的显示屏，屏幕刷新率都是60左右，也就是说，我们看到的屏幕实际上以每秒钟闪烁60次的显示内容，因为对于人眼而言，每秒钟超过24张图片的速度就已经是动画了。so。。。。眼见并非为实。

知道了这个，再来看requesAnimationFrame这个函数。给该函数传入一个回调函数，然后每次屏幕刷新的时候，都会执行该回调函数。看到这个，我们很容易想到可以用这玩意做游戏或者动画之类的功能。那么在我们这个实战中，当我们按下空格后，实际上是在人物炮口的位置用canvas画了一课子弹，那么怎么才能够让他有一种运动的效果呢？

 

答案很清晰，就是在屏幕刷新每帧画面的时候，执行js代码，清除子弹原来位置，在新的位置画上子弹，如此连续，造成子弹运动的效果。