使用键盘事件同时移动2张图像？

Question

我正在制作原始的打字游戏以获得乐趣。到目前为止一切正常。玩家一人随着ASWD和第二名玩家与HUJK一起移动。

这是两个事件，它们在构造函数中声明为this.move（）;和this.moveBug（）;

private move() {
    window.addEventListener('keypress', (e: KeyboardEvent) => {

        switch (e.keyCode) {
            case 97:
                this._player.move(-10, 0);
                break;

            case 119:
                this._player.move(0, -10);
                break;

            case 100:
                this._player.move(+10, 0);
                break;

            case 115:
                this._player.move(0, +10);
                break;
        }
        this.update();
    });
}

private moveBug() {
    window.addEventListener('keypress', (e: KeyboardEvent) => {
        switch (e.keyCode) {
            case 104:
                this._bugPlayer.moveBug(-10, 0);
                break;

            case 117:
                this._bugPlayer.moveBug(0, -10);
                break;

            case 107:
                this._bugPlayer.moveBug(+10, 0);
                break;

            case 106:
                this._bugPlayer.moveBug(0, +10);
                break;
        }
        this.update();
    });
}

然而，两个图像都是基于转动的，我不能同时移动它们。我希望这个游戏可以在1个键盘上播放。有没有办法实现这一目标？

Answer 1

我会定义一次move函数并根据按下的键调用它。这是该方法的粗略骨架。

class Movement {
  move(target, x, y) {
    // handle move code...
  }
  constructor() { 
    const move = this.move;

    window.addEventListener('keypress', (e: KeyboardEvent) => {     
      let charCode = e.which || e.keyCode;

      switch (charCode) {
        case 97:
          move('player', -10, 0);
          break;
        case 119:
          move('player', 0, -10);
          break;
        case 100:
          move('player', +10, 0);
          break;
        case 115:
          move('player', 0, +10);
          break;  
        case 104:
          move('bug', -10, 0);
          break;
        case 117:
          move('bug', 0, -10);
          break;
        case 107:
          move('bug', +10, 0);
          break;
        case 106:
          move('bug', 0, +10);
          break;      
      }
    });
  }
}

const m = new Movement();

https://jsfiddle.net/zp3vj7ma/