Отскок от стен

Приятно видеть наш мяч, но он быстро исчезает с экрана, небольшое удовольствие мы получили с ним! Чтобы продлить это, мы реализуем некоторое очень простое обнаруженийе столкновений (о которых будет рассказано далее более подробно), чтобы сделать отскок мяча от четырех краев холста.

Простое обнаружение столкновений

Для обнаружения столкновения мы будем проверять -  мяч касается (сталкивается) стены, и если это так, мы изменим направление своего движения соответственно.

Чтобы сделать расчеты проще, давайте определим переменную ballRadius, что задаст радиус нарисованного круга и использоваться для вычислений. Добавьте это в ваш код, где-то ниже существующих переменных:

var ballRadius = 10;

Теперь обновить строку, которая рисует шарик внутри функции drawBall() :

ctx.arc(x, y, ballRadius, 0, Math.PI*2);

Отскакивние от верхней и нижней

Есть четыре стены, чтобы отпрыгнул мяч — давайте сосредоточимся на верхний первой. Нужно проверить, на каждый кадр, коснулся мяч верхнего края холста — если да, то будет обратное движение мяча, поэтому он начнет двигаться в противоположном направлении и остановиться в пределах видимой границы. Вспомнив, что система координат начинается с левого верхнего, мы можем придумать что-то вроде этого:

if(y + dy < 0) {
    dy = -dy;
}

Если значение Y положения шара ниже нуля, изменить направление движения по оси Y, установив его с тем же значением но с другим знаком. Если мяч движется вверх со скоростью 2 пикселов на кадр, теперь он будет двигаться "вверх" со скоростью -2 пикселей, что на самом деле равно движется вниз со скоростью 2 пикселя в кадре.

Приведенный выше код будет иметь дело с мячом отражаясь от верхнего края, так что теперь давайте думать о нижнем крае:

if(y + dy > canvas.height) {
    dy = -dy;
}

Если положение мяча по оси Y больше, чем высота полотна (помните, что мы рассчитываем значения Y от верхнего левого, чтобы верхний край начинается с 0, а нижний край — 480 пикселей, полотна высота), затем с отскоком от нижней кромки обратного хода по оси Y движение, как и прежде.

Мы можем объединить эти две конструкции в одну, чтобы сэкономить на коде:

if(y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
}

Если один из двух утверждений истинно, изменить направление движения мяча.

Отскоки влево и вправо

У нас есть верхний и нижний край, давайте подумаем, о левом и правом. Задача очень похожа на самом деле, все, что вам нужно сделать, это повторить конструкцию заменив Y на X:

if(x + dx > canvas.width || x + dx < 0) {
    dx = -dx;
}

if(y + dy > canvas.height || y + dy < 0) {
    dy = -dy;
}

На этом этапе вы должны вставить выше блок кода в функцию Draw (), непосредственно перед закрывающей фигурной скобкой.

Мяч продолжает исчезать в стене!

Проверьте сейчас свой код, и вы будете впечатлены — теперь у нас есть мяч, который отскочил от всех четерёх краёв полотна!  (canvas - полотно, прим. пер. ) Однако у нас есть некоторая проблема - когда мяч попадает в любую стену, он немного утопляется в нее перед сменой направления движения:

Это происходит потому, что мы ищем точки столкновения стены и центра шара, а должны делать это относительно окружности. Мяч должен отскакивать сразу после косания стены, а не когда он уже на половину в стене, так что давайте корректировать наш код включив в него небольшое выражение. Обновите последний код добавив к нему:

if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
    dx = -dx;
}
if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) {
    dy = -dy;
}

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

Сравните ваш код

Давайте еще раз провериим готовый код для этой части, и код, что у вас есть, и играйте:

Следующий шаг

Теперь мы добрались до стадии, где наш мяч одновременно двигаться и остаётся на игровом поле. В четвертой главе мы рассмотрим реализацию управляния — см. Paddle and keyboard controls.