javascript canvas eventlistener 2 одновременно одновременно

Question

Я пытаюсь создать игру с javacript. Мой объект может перемещаться в любом направлении в холсте. Я пытаюсь заставить его двигаться по диагонали. Есть идеи, как это сделать.

this.move = function() { 
     counter++; 
     // Determine if the action is move action 
     if (KEY_STATUS.left || KEY_STATUS.right || KEY_STATUS.down || KEY_STATUS.up || KEY_STATUS.shift || KEY_STATUS.ctrl) { 
      // The ship moved, so erase it's current image so it can 
      // be redrawn in it's new location 
      this.context.clearRect(this.x, this.y, this.width, this.height); 
      // Update x and y according to the direction to move and 
      // redraw the ship. Change the else if's to if statements 
      // to have diagonal movement. 
      if (KEY_STATUS.left) { 
       this.x -= this.speed; 
       if (this.x <= 0) // Keep player within the screen 
        this.x = 0; 
      } 
      else if (KEY_STATUS.right) { 
       this.x += this.speed; 
       if (this.x >= this.canvasWidth - this.width) this.x = this.canvasWidth - this.width; 
      } 
      else if (KEY_STATUS.up) { 
       console.log(this.y); 
       this.y -= this.speed; 
       if (this.y < 0) this.y = 0; 
       //    if (this.y <= this.canvasHeight/4 * 3) this.y = this.canvasHeight/4 * 3; 
      } 
      else if (KEY_STATUS.down) { 
       this.y += this.speed; 
       if (this.y >= this.canvasHeight - this.height) this.y = this.canvasHeight - this.height; 
       console.log(this.canvasHeight); 
       console.log(this.height); 
      } 
      else if (KEY_STATUS.shift) { 
       this.speed += 2; 
      } 
      else if (KEY_STATUS.ctrl) { 
       if (this.speed > 2) { 
        this.speed -= 2; 
       } 
       else { 
        this.speed = 2; 
       } 
      } 
      // Finish by redrawing the ship 
      this.draw(); 
     } 
     if (KEY_STATUS.space && counter >= fireRate) { 
      this.fire(); 
      counter = 0; 
     } 
    }; 

Так что, в основном, для перемещения по диагонали это необходимо для примера;

this.x += this.speed; 

, но в то же время сделать:

this.y += this.speed; 

Answer 1

Вы просто должны настроить ваш еще, если условия, если, в случае он может идти в нескольких направлениях.

Например, вы, вероятно, не хотите перемещать вверх и вниз или влево и вправо с той же стороны. Таким образом, в этих случаях вы сохраняете условия else if. В противном случае просто измените else, если условие на условие if.

Я предполагаю, что вы также не можете одновременно нажать оба shift и control.

Вот как выглядит ваш код.

if (KEY_STATUS.left) { this.x -= this.speed; if (this.x <= 0) // Keep player within the screen this.x = 0; } else if (KEY_STATUS.right) { this.x += this.speed; if (this.x >= this.canvasWidth - this.width) this.x = this.canvasWidth - this.width; }
if (KEY_STATUS.up) { console.log(this.y); this.y -= this.speed; if (this.y < 0) this.y = 0; // if (this.y <= this.canvasHeight/4 * 3) this.y = this.canvasHeight/4 * 3; } else if (KEY_STATUS.down) { this.y += this.speed; if (this.y >= this.canvasHeight - this.height) this.y = this.canvasHeight - this.height; console.log(this.canvasHeight); console.log(this.height); } if (KEY_STATUS.shift) { this.speed += 2; } else if (KEY_STATUS.ctrl) { if (this.speed > 2) { this.speed -= 2; } else { this.speed = 2; } }