Заключение
==========

* « Предыдущая статья

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

В любой игре, которую мы пишем, всегда есть место для улучшений. Например, мы можем предложить игроку несколько жизней. Они могут сделать несколько ошибок и всё равно закончить игру. Мы также можем улучшить отрисовку кода.

Предоставление игроку нескольких жизней
---------------------------------------

Реализация довольно проста. Давайте сначала добавим переменную для хранения количества жизней в том же месте, где мы объявляли другие наши переменные:


```js
var lives = 3;
```


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


```js
function drawLives() {
  ctx.font = "16px Arial";
  ctx.fillStyle = "#0095DD";
  ctx.fillText("Lives: " + lives, canvas.width - 65, 20);
}
```


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


```js
alert("GAME OVER");
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
```


Давайте добавим немного более сложную логику к ней, как показано ниже:


```js
lives--;
if (!lives) {
  alert("GAME OVER");
  document.location.reload();
} else {
  x = canvas.width / 2;
  y = canvas.height - 30;
  dx = 2;
  dy = -2;
  paddleX = (canvas.width - paddleWidth) / 2;
}
```


Теперь, когда мяч попадает в нижний край экрана, мы вычитаем одну жизнь из переменной `lives`. Если жизней не осталось, игра проиграна, если осталось ещё несколько жизней, то положение мяча и биты сбрасываются вместе с движением мяча.

### Визуализация дисплея жизней

Теперь вам нужно добавить вызов `drawLives()` внутри функции `draw()` и добавить его под вызовом `drawScore()`.


```js
drawLives();
```

Улучшение рендеринга с requestAnimationFrame()
----------------------------------------------

Теперь давайте работать над чем-то, что не связано с игровой механикой, но с тем, как она рендерится. `requestAnimationFrame` поможет браузеру рендерить игру лучше, чем фиксированная частота кадров, которую в настоящее время мы реализовали, используя `setInterval()` (en-US). Замените следующую строку:


```js
setInterval(draw, 10);
```


на:


```js
draw();
```


и удалите каждый экземпляр:
```

clearInterval(interval); // Needed for Chrome to end game
```


Затем в самом низу функции `draw()` (непосредственно перед закрывающей фигурной скобкой) добавьте следующую строку, которая заставляет функцию `draw()` вызывать себя снова и снова:


```js
requestAnimationFrame(draw);
```


Функция `draw()` теперь выполняется снова и снова в цикле `requestAnimationFrame()`, но вместо фиксированной частоты кадров в 10 миллисекунд, мы возвращаем управление частотой кадров обратно в браузер. Соответственно он будет синхронизировать частоту кадров и отображать фигуры только при необходимости. Это обеспечивает более эффективный и плавный цикл анимации, чем более старый метод `setInterval().`

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

Вот и все-финальная версия игры готова!

**Примечание:** измените количество жизней и угол отскока мяча от биты.

Игра закончена - на данный момент!
----------------------------------

Вы закончили все уроки — поздравляем! К этому моменту вы должны знать основы манипулирования canvas и логику простых 2D-игр. Сейчас самое время изучить некоторые фреймворки и продолжить разработку игр. Вы можете проверить аналог этой серии, 2D breakout game using Phaser (en-US) или Cyber Orb built in Phaser (en-US) учебник. Вы также можете просмотреть раздел Games section on MDN для вдохновения и увеличения знаний.

Вы также можете вернуться на this tutorial series' index page (en-US) учебника. Получайте удовольствие от написания кода!

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