MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Это - 5-й шаг из 10 из Брезентового учебного руководства Gamedev. Вы можете найти исходный код, поскольку он должен заботиться о завершении этого урока в 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(y + dy < ballRadius) {
    dy = -dy;
} else if(y + dy > canvas.height-ballRadius) {
    alert("GAME OVER");
    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("GAME OVER");
        document.location.reload();
    }
}

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

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

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

Exercise: make the ball move faster when it hits the paddle.

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

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

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

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