javascript - 每次按键时如何修复玩家越来越远的移动

Question

随着时间的推移，当我在 Air Hockey 游戏中移动两名球员时，他们在每次按键时移动得越来越远，有人知道为什么吗？

这是我的绘图函数（底部的 setInterval 调用一遍又一遍地运行该函数）。也只是整个文件的一个片段，如果上下文需要文件的其余部分，请给我发消息 :)

       //this function is run over and over again, clearing the board and re-writing what is being executed
    function draw () {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // redraw everything that was drawn earlier
        drawBoard();

        //redraw the player mallets and ball with modified coordinates
        drawFilledCircle(p1Mallet.x, p1Mallet.y, p1Mallet.radius, 1);
        drawFilledCircle(p2Mallet.x, p2Mallet.y, p2Mallet.radius, 2);
        drawFilledCircle(ball.x, ball.y, ball.radius, 0);

        //function to move player 1 mallet: pressing w, a, s, d makes mallet move 
        addEventListener("keydown", function movePlayers (event) {

            //if these keycodes are pressed, player 1 moves
            if (event.keyCode == 68) {
            p1Mallet.x += 0.1;
            }
            if (event.keyCode == 65) {
                p1Mallet.x -= 0.1;
            }
            if (event.keyCode == 83) {
                p1Mallet.y += 0.1;
            }
            if (event.keyCode == 87) {
                p1Mallet.y -= 0.1;
            }

            //if these keycodes are pressed, player 2 moves
            if (event.keyCode == 39) {
                p2Mallet.x += 0.1;
            }
            if (event.keyCode == 37) {
                p2Mallet.x -= 0.1;
            }
            if (event.keyCode == 40) {
                p2Mallet.y += 0.1;
            }
            if (event.keyCode == 38) {
                p2Mallet.y -= 0.1;
            }
        });

        //if the ball is within the goal lines (anywhere on the board)
        if (ball.y > 200 && ball.y < 400) {

            //if the x coordinate of the ball is past the black line on the right side, player 1 scores
            if (ball.x + xSpeed > canvas.width - 2*ball.radius - 30) {
                console.log("Player 1 Score");
                ball.x = canvas.width/2;
                ball.y = canvas.height/2;
                xSpeed = 0;
                ySpeed = 0;
                player_1_Score = player_1_Score + 1;
            }
            //if the x coordinate of the ball is past the black line on the left side, player 2 scores
            else if (ball.x + xSpeed < 2*ball.radius + 30) {
                console.log("Player 2 Score");
                ball.x = canvas.width/2;
                ball.y = canvas.height/2;
                xSpeed = 0;
                ySpeed = 0;
                player_2_Score = player_2_Score + 1;
            }
        }

        //bounce off wall logic: if the position of the ball is past these dimensions, make the speed of the ball opposite so it goes the other way
        if (ball.x + xSpeed >= canvas.width - ball.radius*2 - 30 || ball.x + xSpeed <= ball.radius*2 + 30)  {
            xSpeed *= -1;
        }
        else if (ball.y + ySpeed >= canvas.height - ball.radius*2 - 30 || ball.y + ySpeed <= ball.radius*2 + 30) {
            ySpeed *= -1;
        }

        //for player 1 to not be able to move off the screen
        if (p1Mallet.x > canvas.width - p1Mallet.radius*2 - 30) {
            p1Mallet.x = 1160;
        }
        else if (p1Mallet.x <= p1Mallet.radius*2 + 30) {
            p1Mallet.x = 90;
        }
        if (p1Mallet.y > canvas.height - p1Mallet.radius*2 - 30) {
            p1Mallet.y = 510;
        }
        else if (p1Mallet.y <= p1Mallet.radius*2 + 30) {
            p1Mallet.y = 90;
        }

        //for player 2 to not be able to move off the screen
        if (p2Mallet.x > canvas.width - p2Mallet.radius*2 - 30) {
            p2Mallet.x = 1160;
        }
        else if (p2Mallet.x <= p2Mallet.radius*2 + 30) {
            p2Mallet.x = 90;
        }
        if (p2Mallet.y > canvas.height - p2Mallet.radius*2 - 30) {
            p2Mallet.y = 510;
        }
        else if (p2Mallet.y <= p2Mallet.radius*2 + 30) {
            p2Mallet.y = 90;
        }

        //determines whether or not mallet & ball make contact. Uses distance function from earlier to calculate values based on current ball & mallet positioning. 
        var p1Dist = distance(p1Mallet.x, p1Mallet.y, ball.x, ball.y);
        var p2Dist = distance(p2Mallet.x, p2Mallet.y, ball.x, ball.y);

        //for Player 1
        //if the value calculated from the distance function is less than 55 (mallet & ball make contact). 55 is the sum of the ball radius & mallet radius.
        if (p1Dist <= 55) {

            //calculate difference in ball and mallet positioning
            var d1x = ball.x - p1Mallet.x;
            var d1y = ball.y - p1Mallet.y;

            //divide the difference by 20 because multiplying by 55 in the method below would be too fast a speed for the ball
            d1x /= 20;
            d1y /= 20;

            //calculate the speed at which the ball moves away by multiplying the slowed down difference above by ballSpeed (10)
            xSpeed = d1x*ballSpeed;
            ySpeed = d1y*ballSpeed;
        }

        //for Player 2
        //if the value calculated from the distance function is less than 55 (mallet & ball make contact). 55 is the sum of the ball radius & mallet radius.
        if (p2Dist <= 55) {

            //calculate difference in ball and mallet positioning
            var d2x = ball.x - p2Mallet.x;
            var d2y = ball.y - p2Mallet.y;

            //divide the difference by 20 because multiplying by 55 would be too fast a speed for the ball
            d2x /= 20;
            d2y /= 20;

            //calculate the speed at which the ball moves away by multiplying the slowed down difference above by ballSpeed (10)
            xSpeed = d2x*ballSpeed;
            ySpeed = d2y*ballSpeed;
        }

        //ball's x position will increase/decrease speed each time draw function is ran based on what value is in the xSpeed variable
        ball.x += xSpeed;
        //ball's y position will increase/decrease speed each time draw function is ran based on what value is in the ySpeed variable
        ball.y += ySpeed;
        //xSpeed of ball will multiply itself by 0.99 each time draw function is ran to slow down after a hit
        xSpeed *= 0.99;
        //ySpeed of ball will multiply itself by 0.99 each time draw function is ran to slow down after a hit
        ySpeed *= 0.99;
    }

    //calls draw function to begin game, with value after it determining how fast the game is played
    window.setInterval(draw, 10);

我希望两个玩家每次按下一个键时移动一致的量

标签： javascripthtml5-canvas2d-games