现在剩下必须做的事情,就是实现球的动画。如下的代码看上去应该很熟悉,因为它和第14章中使用的代码很相似。它使用了在前面各章的动画代码中见到过的setInterval函数,以固定的时间间隔更新球的位置。在前面小节中的代码之后,添加如下这段代码:


  setInterval(function () {

     ctx.clearRect(0, 0, width, height);

     ball.draw();

     ball.move();

      ctx.strokeRect(0, 0, width, height);

  }, 30);


  我们使用setInterval,每30毫秒调用动画函数一次。该函数首先使用clearRect清除了整个画布,然后调用draw和move方法直接在球的当前位置绘制一个圆,然后用move方法根据球的xSpeed和ySpeed属性来更新其位置。最后它使用strokeRect绘制了一个边框,以便我们能够看到画布的边界。