Почему мяч в моей игре не останавливается на границе и возвращается назад?

Я делаю простую игру в понг, и я хочу, чтобы мяч просто подпрыгнул вокруг холста HTML5, но остался в границах. Он правильно отскакивает от правой и нижней границ, но немного уходит в верхнюю и левую границы.

Код:

if(ballY<=0){
     ballSpeedY = -ballSpeedY;   
    }

    else if(ballY>=HEIGHT-10){
     ballSpeedY = -ballSpeedY;   
    }




    if(ballX >= WIDTH-10){

        ballSpeedX = -ballSpeedX;

    }


    else if(ballX <= 0){

        ballSpeedX = -ballSpeedX;

    }

Здесь я изменяю скорость шара, если он находится вблизи границ. Чтобы он работал правильно, мне нужно изменить число в операторах if на 8 вместо 0. Почему? Вот JFiddle. Я могу исправить проблему с изменением 0 до 8, но я хочу знать, почему это происходит.

javascript,html5,html5-canvas,coordinates,

2

Ответов: 2

3 принят

Это происходит на всех четырех сторонах вашего холста, однако справа и снизу у вас есть ballX >= WIDTH-10и ballY >= HEIGHT-10соответственно.

Вам нужно сделать то же самое с другими сторонами, как ballY <= 10и сверху и ballX <= 10слева.

Это происходит по одной простой причине - ваши координаты шара отсчитываются от его центра. Это 0, 0ваш шар, как 0, 0ваш прямоугольник - верхний левый угол.

И когда вы говорите, ballX <= 0это означает, что мяч должен будет коснуться границы своей центральной точкой, и для этого он должен попасть в вашу левую границу.

0

Как указано в ответе, мяч извлекается из его центра и корректирует левые и верхние тесты, чтобы учесть это, это почти остановит мяч от входа в стену. Но это просто удача, что мяч отскакивает от стены, не вдаваясь. Если вы измените ширину холста на 799 и посмотрите на отскок правого края, вы увидите проблему, мяч войдет в стену 4 пикселя.

Вы перемещаете шарик 5 пикселей в направлении x, а затем проверяете его на стене

ballX += ballSpeedX;
if(ballX >= width - 10){
    ballSpeedX = -ballSpeedX;
}

Если ширина = 100 и последняя позиция шара равна 89, вы добавляете 5, чтобы дать 94. Это приводит к тому, что ballSpeed ??будет отменено, но мяч все равно будет нарисован на 94 (4 пикселя до далекой)

Когда вы выполняете отскок, вам нужно позаботиться о времени между кадрами. Мяч редко попадает в стену в начале или конце кадра, но в какой-то момент во время кадра. За это время он, возможно, переместил много пикселей от стены.

Правильный способ сделать это - это работать, когда мяч попадает в стену, а затем удаляет ее от стены на правильную сумму. Это очень просто для линейного движения, так как расстояние до стены будет таким же, как расстояние, которое оно уйдет.

ballX += ballSpeedX;
if(ballX >= width - 10){
   var dist = ballX - (width - 10); // how far into the wall
   ballX = (width - 10) - dist; // the distance into the wall is the distance 
                                // the ball has moved away from the wall
   ballSpeedX = -ballSpeedX;
}

То же самое для левой стороны

if(ballX <= 10){
   var dist = 10 - ballX; // how far into the wall
   ballX = 10 + dist; // the distance into the wall is the distance 
                      // the ball has moved away from the wall
   ballSpeedX = -ballSpeedX;
}

И сделайте то же самое для верхней и нижней.

JavaScript, html5, html5 холст, координаты,
Похожие вопросы
Яндекс.Метрика