HTML Canvas, перемещающий объект в направлении с постоянной скоростью?

Question

Я создаю понг, чтобы изучить некоторые основы API рисования для canvas.Тем не менее, я борюсь с одним из основных элементов, заставляющих мяч двигаться.Прямо сейчас я случайным образом генерирую набор координат для его движения, но я понятия не имею, как заставить его действительно перемещаться туда с постоянной скоростью по моему выбору.

Мяч начинаетсяна базовой скорости и становится быстрее со временем.

Так как же работает нечто подобное?Как рассчитать, как далеко нужно переместить мяч по осям X и Y?

Answer 1

Я недавно создал версию pong, используя canvas , просмотрите ее здесь , где вы можете просмотреть исходный код.

Чтобы сделать анимацию шара, я только что использовал переменную дляскорости x и y, некоторые для координат x и y шара и анимационная функция, которая проходит по циклу с использованием setInterval()

Вот небольшой пример (за вычетом всего рисункакод, конечно)

velX = 5;
velY = 2;
ballPosX = 100;
ballPosY = 50;
radius = 10;

// loop through 20fps
setInterval(animate,50);

function animate() {
    // draw ball at ballPosX, ballPosY coordinates
    ctx.arc(ballPosX,ballPosY, radius,0,Math.PI * 180, false)
    // fill in colours etc

    // move ball
    ballPosX += velX;
    ballPosY += velY;

    // do boundary detection for bounce
    if (ballPosX + radius > ctx.width || ballPosX - radius < 0) {
        // change velX to negative to bounce the ball the oposite X direction
        velX *= -1;
    }
    // do the same for velY
}

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

Стив

Answer 2

Вам нужно было бы где-нибудь сохранить его скорость и увеличивать ее до тех пор, пока на нее не воздействует какая-то другая сила, чтобы изменить его скорость / направление (простой способ заставить мяч отскочить - просто отрицать направления, в которых движется шар).

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

Вам следует использовать отдельный setTimeout(), который рисует все эти элементы.