JavaScript Pong遊戲。我不能同時移動2名球員

Question

我在一個地方呆了幾個小時，所以我決定在這裏尋求幫助。我是初學者，我想嘗試寫一個簡單的乒乓球比賽。

在這個鏈接在可汗學院你會看到結果。 KHAN ACADEMY my pong game

我的問題是： 我不能一次移動兩個球員。只有玩家可以移動 - 誰最後擊中了鍵盤。最後擊中關鍵勝利。 我知道很少有準備好的pong遊戲，但很多都是Java或者所有不同的邏輯。你能幫助我很好的人嗎？ :)

//THIS IS GAME FOR 2 PEOPLE 
//PLAYER 1 CONTROLS: UP ARROW (MOVE UP), DOWN ARROW (MOVE DOWN) 
//PLAYER 2 CONTROLS: W KEY (MOVE UP), S KEY (MOVE DOWN) 

var player1Y = height/2; 
var player2Y = height/2; 
var player1Score = 0; 
var player2Score = 0; 
var ball; 
var gameStarted = false; 
var t = 0; 

//Constants 
var PAUSE_TIME = 60; 
var PLAYER_MOVE_SPEED = 2; 
var BALL_SPEED = 3; 
var PADDLE_HEIGHT = 80; 
var PADDLE_WIDTH = 8; 

angleMode = "degrees"; 

var Ball = function(position, speed) { 
    this.position = position; 
    this.speed = speed || BALL_SPEED; 

    this.radius = 6; 

    this.resetVelocity = function() { 
     this.theta = random(0, 75); 
     this.velocity = new PVector(
     this.speed*cos(this.theta), -this.speed*sin(this.theta)); 

    }; 
    this.resetVelocity(); 

    this.draw = function() { 
     fill(0, 0, 0); 
     noStroke(); 
     ellipse(this.position.x, this.position.y, 
     this.radius*2, this.radius*2); 
    }; 

    this.collideWithPaddle = function(x, y) { 
     if (this.position.x - this.radius < x + PADDLE_WIDTH/2 && 
     this.position.x + this.radius > x - PADDLE_WIDTH/2) { 
      if (dist(0, this.position.y, 0, y) < 
      PADDLE_HEIGHT/2 + this.radius) { 
       if (this.position.x > x) { 
        this.position.x = x + 
        this.radius + PADDLE_WIDTH/2; 
       } 
       else if (this.position.x < x) { 
        this.position.x = x - 
        this.radius - PADDLE_WIDTH/2; 
       } 
       this.velocity.mult(new PVector(-1, 1)); 
      } 
     } 
    }; 

    this.update = function() { 
     //Handle wall collisions 
     if (this.position.x < 0) { 
      player2Score++; 
      this.position = new PVector(width/2, height/2); 
      gameStarted = false; 
      this.resetVelocity(); 
     } 
     else if (this.position.x > width) { 
      player1Score++; 
      this.position = new PVector(width/2, height/2); 
      gameStarted = false; 
      this.resetVelocity(); 
     } 
     if (this.position.y < 0) { 
      this.position.y = 0; 
      this.velocity.mult(new PVector(1, -1)); 
     } 
     else if (this.position.y > height) { 
      this.position.y = height; 
      this.velocity.mult(new PVector(1, -1)); 
     } 

     //Handle paddle collisions 
     this.collideWithPaddle(20, player1Y); 
     this.collideWithPaddle(width-20, player2Y); 

     this.position.add(this.velocity); 
    }; 
}; 

ball = new Ball(new PVector(width/2, height/2)); 

var drawScores = function() { 
    var s; 
    fill(0, 0, 0); 
    textSize(16); 
    s = "Player 1: " + player1Score; 
    text(s, width*0.25-textWidth(s)/2, 25); 
    s = "Player 2: " + player2Score; 
    text(s, width*0.75-textWidth(s)/2, 25); 
}; 



//Move the player1 up 
var movePlayer1Up = function() { 
    player1Y -= PLAYER_MOVE_SPEED; 
}; 
//Move the player1 down 
var movePlayer1Down = function() { 
    player1Y += PLAYER_MOVE_SPEED; 
}; 

//Move the player2 up 
var movePlayer2Up = function() { 
    player2Y -= PLAYER_MOVE_SPEED; 
}; 
//Move the player2 down 
var movePlayer2Down = function() { 
    player2Y += PLAYER_MOVE_SPEED; 
}; 


var drawPlayers = function() { 
    //Constrain the player movement 
    player1Y = constrain(player1Y, 0, 400); 
    player2Y = constrain(player2Y, 0, 400); 
    rectMode(CENTER); 
    fill(0, 0, 0); 
    rect(20, player1Y, PADDLE_WIDTH, PADDLE_HEIGHT); 
    rect(width-20, player2Y, PADDLE_WIDTH, PADDLE_HEIGHT); 
}; 

draw = function() { 
    //Control Player 1 
    if (keyIsPressed) { 
     if (keyCode===38){ 
      movePlayer1Up(); 
     } 
     else if(keyCode===40) { 
      movePlayer1Down(); 
     } 
    } 
    //Control Player 2 
    if (keyIsPressed) { 
     if (key.toString()==="w"){ 
      movePlayer2Up(); 
     } 
     else if(key.toString()==="s"){ 
      movePlayer2Down(); 
     } 
    } 


    //Draw the environment 
    background(255, 255, 255); 
    drawPlayers(); 
    drawScores(); 
    stroke(100, 100, 100); 
    line(width/2, 0, width/2, height); 

    //Draw the ball 
    ball.draw(); 

    if (!gameStarted) { 
     t++; 
     if (t >= PAUSE_TIME) { 
      t = 0; 
      gameStarted = true; 
     } 
     return; 
    } 

    ball.update(); 
}; 

Answer 1

你應該看的onkeyup，onkeydown事件事件活動的玩家，看到此相關的問題在這裏。 JavaScript multiple keys pressed at once

Answer 2

現在我明白的概念，我只是做了這樣的事情：

範圍使用多個密鑰：

var keys = []; 
var keyPressed = function(){ 
    keys[keyCode] = true; 
}; 
var keyReleased = function(){ 
    keys[keyCode] = false; 
}; 

和繪圖功能：

//Controls 

if (keys[87]) { 
movePlayer2Up(); 
} 
if (keys[83]) { 
movePlayer2Down(); 
} 
if (keys[38]) { 
movePlayer1Up(); 
} 
if (keys[40]) { 
movePlayer1Down(); 
} 

而現在它的工作！與可汗學院相同的鏈接 - 有效果。再次感謝你。