使用速度属性

为了给你更多的灵活性，这里有两个 速度属性 ：vx和 vy去控制精灵的运动速度。 vx被用来设置精灵在x轴（水平）的速度和方向。vy被用来设置精灵在y轴（垂直）的速度和方向。 他们可以直接更新速度变量并且给精灵设定这些速度值。这是一个用来让你更方便的更新交互式动画的额外的模块。

第一步是给你的精灵创建vx和vy属性，然后给他们初始值。

  1. cat.vx = 0;
  2. cat.vy = 0;

给vx和vy设置为0表示精灵静止。

接下来，在游戏循环中，更新vx和vy为你想让精灵移动的速度值。然后把这些值赋给精灵的x和y属性。下面的代码讲明了你如何利用该技术让cat能够每帧向右下方移动一个像素：

  1. function setup() {
  3.   //Create the `cat` sprite
  4.   cat = new Sprite(resources["images/cat.png"].texture);
  5.   cat.y = 96;
  6.   cat.vx = 0;
  7.   cat.vy = 0;
  8.   app.stage.addChild(cat);
  10.   //Start the game loop
  11.   app.ticker.add(delta => gameLoop(delta));
  12. }
  14. function gameLoop(delta){
  16.   //Update the cat's velocity
  17.   cat.vx = 1;
  18.   cat.vy = 1;
  20.   //Apply the velocity values to the cat's
  21.   //position to make it move
  22.   cat.x += cat.vx;
  23.   cat.y += cat.vy;
  24. }

当你运行这段代码，猫会每帧向右下方移动一个像素：:

Moving sprites

如果你想让猫往不同的方向移动怎么办？可以把它的 vx 赋值为 -1让猫向左移动。可以把它的 vy 赋值为 -1让猫向上移动。为了让猫移动的更快一点，把值设的更大一点，像3, 5, -2, 或者 -4。

你会在前面看到如何通过利用vx和vy的速度值来模块化精灵的速度，它对游戏的键盘和鼠标控制系统很有帮助，而且更容易实现物理模拟。