现在剩下必须做的事情，就是实现球的动画。如下的代码看上去应该很熟悉，因为它和第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绘制了一个边框，以便我们能够看到画布的边界。
本站内容未经许可，禁止任何网站及个人进行转载。
