现在剩下必须做的事情，就是实现球的动画。如下的代码看上去应该很熟悉，因为它和第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绘制了一个边框，以便我们能够看到画布的边界。

本站内容未经许可，禁止任何网站及个人进行转载。