您的位置: 主页>机器人编程>Javascript编程>《javascript-少儿编程》第15章用键盘控制动画之实
加盟酷吧机器人 培养孩子核心能力

《javascript-少儿编程》第15章用键盘控制动画之实

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

欧美思机器人教育加盟 赚钱好项目
上一篇:《javascript-少儿编程》第15章用键盘控制动画之整
下一篇:《javascript-少儿编程》第15章用键盘控制动画之对
您可能喜欢
回到顶部