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

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

Подсчет очков

Если вы можете увидеть свои очки на протяжении всей игры, вы можете произвести впечатление на своих друзей. Вам нужна переменная для записи очков. Добавьте следующие данные в свой JavaScript, после остальных переменных:

var score = 0;

Вам также нужна функция drawScore() для создания и обновления отображения оценки. Добавьте после функции collisionDetection() следующий код:

function drawScore() {
    ctx.font = "16px Arial";
    ctx.fillStyle = "#0095DD";
    ctx.fillText("Score: "+score, 8, 20);
}

Рисование текста на канве аналогично рисованию фигур. Определение шрифта выглядит точно так же, как и в CSS - вы можете установить размер и тип шрифта в font() методе. Затем используйте fillStyle() для установки цвета шрифта и  fillText() для установки фактического текста, который будет помещен на канву, и где он будет размещен. Первым параметром является сам текст - приведенный выше код показывает текущее количество точек, а два последних параметра - это координаты, в которых текст будет помещен на канву.

Чтобы начислять баллы каждый раз при ударе кирпича, добавьте строку в функцию collisionDetection(), чтобы увеличить значение переменной оценки каждый раз при обнаружении столкновения. Добавьте в код следующую выделенную строку:

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                }
            }
        }
    }
}

Вызов drawScore()из функции draw() позволяет обновить счет с каждым новым фреймом - добавьте следующую строку внутри draw(), чуть ниже вызова drawPaddle():

drawScore();

Отображение сообщения о победе, когда все кирпичи были уничтожены

В конце концов, это главная цель игры, поэтому вы должны отобразить сообщение о победе, если все доступные кирпичи уничтожены. Добавьте следующий код в свою функцию collisionDetection() :

function collisionDetection() {
    for(var c=0; c<brickColumnCount; c++) {
        for(var r=0; r<brickRowCount; r++) {
            var b = bricks[c][r];
            if(b.status == 1) {
                if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickRowCount*brickColumnCount) {
                        alert("YOU WIN, CONGRATULATIONS!");
                        document.location.reload();
                    }
                }
            }
        }
    }
}

Благодаря этому, игроки могут выиграть игру, когда они уничтожают все кирпичи, что очень важно, когда дело доходит до игр. Функция document.location.reload() перезагружает страницу и снова запускает игру после нажатия кнопки оповещения.

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

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

Упражнение: добавте больше очков за каждый разбитый кирпич, выведите количество набранных очков в конце игры.

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

На данный момент игра выглядит довольно хорошо. В следующем уроке Вы расширите привлекательность игры, добавив Mouse controls.

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

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