官方文档

关键词

向量按键脚本游戏变量程序设计水平方向运动方向状态控制

状态控制

好，下边我们讲游戏的状态控制
image.png
我们将使用上下左右键来实现这个节点的移动。只不过这个小猪佩奇的移动过程是自动的，当我们按向下方向键，可以看到这个小猪佩奇就自动向下移动，这是个自动的过程，按下向右键，它就自动向右移动，再按向上键，它就改变了方向，向上开始移动，按下左键就是向左开始移动，按一下空格键它就停止移动。

那这个是怎么来实现的呢？实现这样的一个效果的话，就必须在我们的脚本里边加上一些状态控制

direction:cc.Vec2=null;

image.png
这个就是所谓的程序设计了，修改一下佩奇下边下挂的这个 pigscript 这个脚本。

image.png
首先我们加入了一个属性，表示它的方向，用** cc.v2** 也就是一个二维向量来表示，如果它的方向值为 1，0 的话，直接表示 X 方向是1，然后 Y 方向是0，表示水平向右移动。那如果是 0 ，-1 的话，那就是水平方向不动， Y 方向向下移动。这个值是 null 的话就表示不移动了。通过这样的一个向量就能够表示当前节点的运动方向。

image.png

  1. onLoad(){
  2.   cc.systemEvent.on('keydown',this.onkeyPress,this);
  3. }

下边那么就要来改变它的状态了。我们可以在这个按键里边添加一个按键响应，在这里边我们调用 **cc.systemEvent.on **响应一下 keydown 方法。

  1. onkeyPress(){e:cc.Event.EventKeyboard
  2.   if(e.keyCode == cc.macro.KEY.left)
  3.     this.direction == cc.v2(-1,0);
  4.   else if(e.keyCode == cc.macro.KEY.right)
  5.     this.direcion == cc.v2(1,0);
  6.   else if(e.keyCode == cc.macro.KEY.up)
  7.     this.direction == cc.v2(0,1);
  8.   else if(e.keyCode == cc.macro.KEY.down)
  9.     this.direction == cc.v2(0,-1);
  10.   else if(e.keyCode == cc.marco.KEY.space)
  11.     this.direction = null;
  12. }

在回调方法里边，我们响应了上下左右四个箭头键及空格键，当按下这些键的时候，我们把当前的行进的方向改变一下，比如按下左键的时候，把方向定义为-1,0，按上键的话表示的是0，1
image.png

update控制移动

image.png

  2. speed :number = 3;
  3. update(dt){
  4.   if(this.direction == null) return;//原地不动
  6.   let pos:cc.Vec2 = this.node.getPosition();
  7.   pos.x += this.speed * this.direction.x;
  8.   pos.y += this.speed * this.direction.y;
  10.   this.node.setPostion(pos);
  11. }

第三步我们就要在update里边来更新这个节点的位置了，我们知道update大概 11 秒钟要调用60 次左右，移动的时候我们要根据当前的方向来移动。当前的方向是用**this.direction** 来表示的，如果是 null 的话表示原地不动。如果不是 null 就需要把当前位置取出来，然后增加它的改变量，再设到一个新的位置。

你可以看到在这里改变量是怎么样算出来的。根据它的方向乘以速度就可以来得到移动的改变量。在这里speed 我们把它设定为一个恒定的值，表示每次移动多少个像素。设定为3个像素，向上移动还是向右移动这个就根据它的这个方向来决定。

我们利用这样的一个简单的乘法，就可以算出它水平方向移动的位置和竖直方向移动的位置。注意一点就是方向的表示，在以后游戏里边也是一种常见的表示法，我们用一个二维向量来表示它的方向，剩下的计算就比较好好计算一些，水平方向移动多少乘一下就可以了， Y 方向移动多少也乘一下就可以了。

总之就是根据原来的位置，加上一个改变量，然后又得到了新的位置，再来梳理一遍。第一步就是添加了一个运动方向的一个定义。然后在按键的时候，按下按键的时候就改变这个运动方向，然后在 update 里边要根据当前运动的方向来更新节点的位置。那最终就达到了我们这样的一个效果。