JavaScript Pong game. I can't move 2 players at once

Question

I stuck in one place for few hours, so I decided to go for help here. I'm beginner and i wish to try write a simple pong game.

At this link in Khan Academy you'll see result. KHAN ACADEMY my pong game

My issue is: I can't move two players at once. Only player can move - who hit last the keyboard. Last hit key win. I know there are few ready pong games, but a lot of it is in Java, or all different logic. Can you help me good people? :)

//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();
};

this might a better fit for code review? – SaggingRufus Feb 10 '17 at 19:21 — SaggingRufus, Feb 10 '17 at 19:21

score 0 · Answer 1 · edited May 23 '17 at 12:24

0

You should be watching the onkeyup, onkeydown events for moving players, see this related question here. JavaScript multiple keys pressed at once

edited May 23 '17 at 12:24

Community

1
1

answered Feb 10 '17 at 19:31

anonrose

1,271
3
12
19

score 0 · Answer 2 · edited Feb 11 '17 at 08:56

Now I understand concept, and I just did something like that:

Scope for multiple keys:

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

and drawing function:

 //Controls  

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

And now it's working! The same link to the Khan Academy - there's the effect. Thank you one more time.

JavaScript Pong game. I can't move 2 players at once

2 Answers2