Question

我在一个地方呆了几个小时，所以我决定在这里寻求帮助。我是初学者，我想尝试写一个简单的乒乓球游戏。

在可汗学院的这个链接中，你会看到结果。 KHAN ACADEMY my pong game

我的问题是：我不能同时移动两名球员。只有玩家可以移动 - 谁击中了最后一个键盘。最后击中关键胜利。我知道很少有准备好的乒乓球比赛，但很多是用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();
 }

现在它正在运作！与可汗学院相同的链接 - 有效果。再次感谢你。

JavaScript Pong游戏。我不能同时移动2名球员

2 个答案: