JS keydown不起作用

JS keydown not working

本文关键字：不起作用 keydown JS      更新时间：2023-09-26

我正在进行一个双人乒乓球游戏，我正在为第二个玩家使用W、D、S、a键。这是有效的，但第二个玩家的划桨Y方向加倍。

如果您不理解，请参阅此演示。我试着在按下一个键后重新绘制球拍，但没有成功。

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>

您正在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);
相关文章：