Со временем, когда я двигаю двух игроков в воздушном хоккее, они двигаются все дальше и дальше при каждом нажатии клавиши, кто-нибудь знает почему?
Это моя функция ничьей (та, которую бегают снова и сноваснова вызовом 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);
Я бы хотел, чтобы два игрока перемещали одинаковую величину при каждом нажатии клавиши