使用setinterval来实现游戏动画

  在伪代码中可以看到,每100毫秒中,我们需要调用一系列的函数和方法来更新内容并将一切内容绘制到游戏面板上。正如在第14章和第15章中所做的,我们将使用setinterval,通过以常规的时间间隔来调用那些函数,从而实现游戏动画。在最终的游戏中,对setinterval的调用如下所示:

  var intervalId = setInterval(function () {

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

    drawScore();

    snake.move();

    snake.draw();

    apple.draw();

    drawBorder();

  }, 100);    

  在传递给setinterval的函数之中,第一行代码使用clearRect清除了画布,从而可以绘制动画中的下一步。接下来,调用了几个函数和方法。注意,这些都和前面的伪代码中列出的步骤基本一致。

  还要注意,我们将时间间隔ID保存到了变量intervalld中,当游戏结束的时候,并且想要停止动画的时候(第16章开发贪吃蛇游戏第1部分之游戏结束),我们需要用到它。