Это - 5-й шаг из 10 из Gamedev Canvas tutorial. Вы можете найти исходный код к этому уроку в Gamedev-Canvas-workshop/lesson5.html.

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

Реализация окончания игры

Давайте попытаемся реализовать "Конец Игры" в нашей игре. Вот часть кода от третьего урока, где мы заставили шар отталкиваться от стен:

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

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

Вместо того, чтобы позволить шару отталкиваться от всех четырех стен, давайте позволим отталкиваться только от трех стен — левую, верхнюю и правую. Удар об нижнюю стенку закончит игру. Мы отредактируем второй блок if, таким образом, что if else вызовит "Конец Игры" , когда шар столкнется  с нижней стенкой холста. Сохраните документ, взгляните на выводящееся сообщение перезагрузите игру путем презагрузки страницы. Замените второй оператор if следующим:

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("Конец игры");
    document.location.reload();
}

Отбить шар

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

if(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    if(x > paddleX && x < paddleX + paddleWidth) {
        dy = -dy;
    }
    else {
        alert("Коец игры");
        document.location.reload();
    }
}

Если мяч направляется к нижнему краю Canvas, мы должны проверить, касается ли он биты. Если да, то шар возвращается прочь точно так же, как Вы ожидали бы; если не тогда игра заканчивется.

Сравните свой код

Вот рабочий код для Вас, чтобы сравнить Ваш с:

Упражнение: заставить мяч двигаться быстрее, когда он попадает в биту.

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

Все идет хорошо и наша игра начинает чувствовать себя намного более достойно. Вы уже можете проиграть! Но все еще не хватает чего-то. Перейдем к шестой главе — Build the brick field — и создадим некоторые кирпичи для шара, чтобы их уничтожить.

Метки документа и участники

Внесли вклад в эту страницу: netmag, wbamberg, kirkland, lordbekket, ccartrec
Обновлялась последний раз: netmag,