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

这部分功能的实现过程中，笔者遇到了一个问题。

原本的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)
      cRole.clearRect(0, 0, WIDTH, HEIGHT)
      drawRole(role.x, role.y)
      for (let i = 0; i < ammuniResp.length; i++) {
        ammuniResp[i].update()
      }
      requestAnimationFrame(drawShot)      
    }

这么写会出现什么问题呢？实践发现。随着我点击空格次数的增加，发现子弹的运动速度变快了？调试了半天，才找到了原因。事实上不是子弹的速度变快了。而是我对于

requestAnimationFrame这个函数的理解错了。我原本以为

requestAnimationFrame这个东西是唯一的，只要我把毁掉扔进去，每帧就能执行。事实上不是的。我们可以创建多个requestAnimationFrame。按照上面的代码所示，实际上就是每次射击都新建了一个requestAnimationFrame执行，也就是说，按照每秒60次刷新为基准，一颗子弹每秒更新60次，两颗子弹每秒钟实际上运动了120次。。。。造成了加速的错觉。。

借助这个小项目，学了一把动画相关知识。。。。