Счёт и выигрыш
==============

* « Предыдущая статья
* Следующая статья »

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

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

Подсчёт очков
-------------

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


```js
var score = 0;
```


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


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


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

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


```js
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()`:


```js
drawScore();
```

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

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


```js
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 (en-US).

* « Предыдущая статья (en-US)
* Следующая статья » (en-US)