We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

Это - 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, таким образом, что 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();
    }
}

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

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

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

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

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

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

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

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