Question

我正在进行一场2人乒乓球比赛，我正在使用第二名球员的W，D，S，A键。它可以工作，但第二个玩家的桨Y方向加倍。

如果您不明白，请参阅此Demo。按下按键后我试图重新绘制桨，但没有做任何事情。

JS

/* VARIABLES */

//Canvas and context
var canvas, ctx;

//Balls x and y
var ballX, ballY;
var ballSpeedX, ballSpeedY; //Balls x and y speed

//Player1 x, y
var player1X, player1Y;

//Player2 x, y
var player2X, player2Y;

var playerSpeedY; //Players speed

//Players w and h
const PLAYER_WIDTH = 10;
const PLAYER_HEIGHT = 100;

const WIN_SCORE = 3; //Max score

/* FUNCTIONS */

//Draw stuff
function draw() {

    //Clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    //Draw player 1
    drawPlayer1(player1X, player1Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");

    //Draw player 2
    drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");

    //Draw ball
    drawBall(ballX, ballY, 10, "white");

    //Draw score board

}

//Animate stuff
function animate() {

    ballX += ballSpeedX;
    ballY += ballSpeedY;

}

//Detect collisiom
function collision() {

    //If ball hits x and y walls
    //X walls
    if (ballX >= canvas.width) { //Right wall

        ballSpeedX = -ballSpeedX;

    }
    if (ballX <= 0) { //:Left wall

        ballSpeedX = -ballSpeedX;

    }

    //Y walls
    if (ballY >= canvas.height) { //Bottom wall

        ballSpeedY = -ballSpeedY;

    }
    if (ballY <= 0) { //Top wall

        ballSpeedY = -ballSpeedY;

    }

}

//Reset ball
function resetBall() {}

//Player 1's control (W, S, D, A)
function player1Control(e) {}

//Player 2's control (Arrow keys)
function player2Control(e) {

    if (e.keyCode == "40") {

        player2Y += 0.2;
        drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

    }

    if (e.keyCode == "38") {

        player2Y -= 0.2;
        drawPlayer2(player2X, player2Y, PLAYER_WIDTH, PLAYER_HEIGHT, "white");
        ctx.clearRect(0, 0, canvas.width, canvas.height);

    }

}

//Detect if a player gets up to max score
function scoreCheck() {}

/* OBJECT FUNCTIONS */

//Draw ball
function drawBall(x, y, r, color) {

    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fill();

}

//Draw player 1's paddle
function drawPlayer1(x, y, w, h, color) {

    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);

}

//Draw player 2's paddle
function drawPlayer2(x, y, w, h, color) {

    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);

}

//Draw score board
function drawScore(x, y, text, font, color) {}

/* WHEN DOCUMENT IS READY */
$(document).ready(function () {

    //Call canvas
    canvas = $("#canvas")[0];
    //Get context
    ctx = canvas.getContext("2d");

    //Set values to object variables
    //ball x and y
    ballX = 200;
    ballY = 200;
    ballSpeedX = 2;
    ballSpeedY = 2;

    //Player 1
    player1X = 0;
    player1Y = canvas.height / 2 - PLAYER_HEIGHT / 2;

    player2X = canvas.width - PLAYER_WIDTH;
    player2Y = canvas.height / 2 - PLAYER_HEIGHT / 2;

    playerSpeedY = 2;

    var fps = 60;
    setInterval(function () {

        draw();
        animate();
        collision();

        $(window).bind("keydown", player1Control);
        $(window).bind("keydown", player2Control);

    }, fps / 1000);

});

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Pong - 2 Player</title>

    <link rel="stylesheet" href="style.css">
</head>

<body>
    <center>
        <canvas id="canvas" width="800" height="600" style="background-color: #000"></canvas>
    </center>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="main.JS"></script>
</body>

</html>

Answer 1

您正在setInterval

中添加事件监听器

setInterval(function () {

    draw();
    animate();
    collision();

    $(window).bind("keydown", player1Control);
    $(window).bind("keydown", player2Control);

}, fps / 1000);

所以每次该间隔运行时，都会再次注册该事件。这导致player1Control和player2Control多次运行。

将这两行移出区间

setInterval(function () {

    draw();
    animate();
    collision();

}, fps / 1000);
$(window).bind("keydown", player1Control);
$(window).bind("keydown", player2Control);

JS keydown无法正常工作

1 个答案: