Move 2 images simultaniously with keyboard events?

Question

I'm making a primitive typescript game for fun. So far everything works fine. Player one moves around with ASWD and second player with HUJK.

These are the two events and they are declared in the constructor as so this.move(); and 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();
    });
}

However both images move turn based, I can't move them both at the same time. I want this game to be playable on 1 keyboard. Is there a way this can be achieved?

Yes, since it is a switch case, it will go into one case and stay there if the condition is still met, so I have the same issue then. — Phill, Dec 19 '17 at 10:22
What do you mean by "stay there"? For each keypress it will move either one or the other player. — Andy G, Dec 19 '17 at 10:25
You should not be calling move() or moveBug() repeatedly. You don't need them at all, actually. Just attach the event listener once in the constructor, and call methods that do the moving. — Andy G, Dec 19 '17 at 10:28
How do you do that? Define 2 methods with addEventListener in the constructor? — Phill, Dec 19 '17 at 10:33
Have look at this answer it is in javascript.No one can give a more clear answer then this one https://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once — Krishjs, Dec 19 '17 at 11:40

Andy Hoffman · Answer 1 · 2017-12-19T11:38:13.097

I would define the move function once and call it based on the pressed key. Here is a rough skeleton of the approach.

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/

Move 2 images simultaniously with keyboard events?

1 Answers1