断断续续地把Demo又写了一阵,终于把角色的冲刺动作完成了。冲刺的作用是使角色能够快速移动,闪避攻击或障碍。其完成效果如下:
首先,仍需要一些变量来表示角色的冲刺状态:
//标识角色是否处于冲刺中 var dashing = false; //允许冲刺的时间限制,超过则停止冲刺 var dashLifeTime = 100; //用于防止冲刺键的连发 var keyPressCounter2 = 0;
在角色处于地面的情况下,按下U
键可以让角色进行冲刺,松开时角色停止冲刺,若持续按住则角色冲刺动作持续至dashLifeTime
耗尽。
另外冲刺中的移动速度变成普通的双倍,同时也可以改变冲刺的方向。
//U键冲刺 if (key[85]) { if (keyPressCounter2++===1 && onGround) { dashing = true; } if (dashLifeTime > 0 && dashing) { //根据冲刺时间的阶段来更新角色状态 if (dashLifeTime >= 80) playerState = 'readyToDash'; else if (dashLifeTime < 80 && dashLifeTime > 20) playerState = 'dash'; else playerState = 'endDash'; //每次消耗5个单位的冲刺时间 dashLifeTime -= 5; //两倍移动速度 vx = moveSpeed * 2 * direction; } else if (dashLifeTime <= 0) {//到达时间限制冲刺结束,更新标记与角色状态 dashing = false; dashLifeTime = 100; playerState = 'idle'; vx = 0; } }
//松开U键 else { keyPressCounter2 = 0; dashing = false; dashLifeTime = 100; }
以上便是控制角色冲刺的主要代码,不过这还不是难点。如果在操作中同时按下了多个按键,是它们都起作用还是其中一个按键起作用,这是一个要考虑的问题,也就是状态机。为方便起见,以下代码只粗略地列出了几种可能的情况(在冲刺键被按下的条件下):
if (key[85]) { //省略部分代码 //按下跳跃原地起跳 if (key[32] || key[75]) { vx = 0; } //若按下跳跃键的同时还按下了方向键 if ((key[32] || key[75]) && (key[65] || key[68])) { playerState = 'move'; if (vy <= 0 && !onGround) { playerState = 'isUp'; } else if (vy > 0 && !onGround) { playerState = 'isDown'; } vx = moveSpeed * direction; } if (key[65] || key[68]) { if (onGround && !dashing) { vx = moveSpeed * direction; playerState = 'move'; } else if (dashing) { vx = moveSpeed * 2 * direction; } } if ((key[65] || key[68]) && !onGround && jumping) { if (lastKey !== 85 && lastKey !== 65 && lastKey !== 68) { if (dashing) vx = moveSpeed * 2 * direction; else vx = moveSpeed * direction; } } }
最终效果已更新至 《Canvas制作时间与行为可控的sprite动画》。