键盘移动

只需再做一点微小的工作，你就可以建立一个通过鼠标控制精灵移动的简单系统。为了简化你的代码，我建议你用一个名为keyboard的自定义函数来监听和捕捉键盘事件。

  1. function keyboard(keyCode) {
  2.   let key = {};
  3.   key.code = keyCode;
  4.   key.isDown = false;
  5.   key.isUp = true;
  6.   key.press = undefined;
  7.   key.release = undefined;
  8.   //The `downHandler`
  9.   key.downHandler = event => {
  10.     if (event.keyCode === key.code) {
  11.       if (key.isUp && key.press) key.press();
  12.       key.isDown = true;
  13.       key.isUp = false;
  14.     }
  15.     event.preventDefault();
  16.   };
  18.   //The `upHandler`
  19.   key.upHandler = event => {
  20.     if (event.keyCode === key.code) {
  21.       if (key.isDown && key.release) key.release();
  22.       key.isDown = false;
  23.       key.isUp = true;
  24.     }
  25.     event.preventDefault();
  26.   };
  28.   //Attach event listeners
  29.   window.addEventListener(
  30.     "keydown", key.downHandler.bind(key), false
  31.   );
  32.   window.addEventListener(
  33.     "keyup", key.upHandler.bind(key), false
  34.   );
  35.   return key;
  36. }

keyboard函数用起来很容易，可以像这样创建一个新的键盘对象：

  1. let keyObject = keyboard(asciiKeyCodeNumber);

这个函数只接受一个参数就是键盘对应的ASCII键值数，也就是你想监听的键盘按键。 这是键盘键ASSII值列表).

然后给键盘对象赋值press和release方法：

  1. keyObject.press = () => {
  2.   //key object pressed
  3. };
  4. keyObject.release = () => {
  5.   //key object released
  6. };

键盘对象也有 isDown 和 isUp 的布尔值属性，你可以用它们来检查每个按键的状态。

在examples文件夹里看一下keyboardMovement.html文件是怎么用keyboard函数的，利用键盘的方向键去控制精灵图。运行它，然后用上下左右按键去让猫在舞台上移动。

Keyboard movement

这里是代码：

  1. //Define any variables that are used in more than one function
  2. let cat, state;
  4. function setup() {
  6.   //Create the `cat` sprite
  7.   cat = new Sprite(resources["images/cat.png"].texture);
  8.   cat.y = 96;
  9.   cat.vx = 0;
  10.   cat.vy = 0;
  11.   app.stage.addChild(cat);
  13.   //Capture the keyboard arrow keys
  14.   let left = keyboard(37),
  15.       up = keyboard(38),
  16.       right = keyboard(39),
  17.       down = keyboard(40);
  19.   //Left arrow key `press` method
  20.   left.press = () => {
  21.     //Change the cat's velocity when the key is pressed
  22.     cat.vx = -5;
  23.     cat.vy = 0;
  24.   };
  26.   //Left arrow key `release` method
  27.   left.release = () => {
  28.     //If the left arrow has been released, and the right arrow isn't down,
  29.     //and the cat isn't moving vertically:
  30.     //Stop the cat
  31.     if (!right.isDown && cat.vy === 0) {
  32.       cat.vx = 0;
  33.     }
  34.   };
  36.   //Up
  37.   up.press = () => {
  38.     cat.vy = -5;
  39.     cat.vx = 0;
  40.   };
  41.   up.release = () => {
  42.     if (!down.isDown && cat.vx === 0) {
  43.       cat.vy = 0;
  44.     }
  45.   };
  47.   //Right
  48.   right.press = () => {
  49.     cat.vx = 5;
  50.     cat.vy = 0;
  51.   };
  52.   right.release = () => {
  53.     if (!left.isDown && cat.vy === 0) {
  54.       cat.vx = 0;
  55.     }
  56.   };
  58.   //Down
  59.   down.press = () => {
  60.     cat.vy = 5;
  61.     cat.vx = 0;
  62.   };
  63.   down.release = () => {
  64.     if (!up.isDown && cat.vx === 0) {
  65.       cat.vy = 0;
  66.     }
  67.   };
  69.   //Set the game state
  70.   state = play;
  72.   //Start the game loop
  73.   app.ticker.add(delta => gameLoop(delta));
  74. }
  76. function gameLoop(delta){
  78.   //Update the current game state:
  79.   state(delta);
  80. }
  82. function play(delta) {
  84.   //Use the cat's velocity to make it move
  85.   cat.x += cat.vx;
  86.   cat.y += cat.vy
  87. }