Разработка игры на Canvas, часть 7. Конец

Здравствуйте, уважаемые читатели!Html5_canvas_logo

Сегодня продолжаем доделывать нашу игру на canvas.

В этот раз статья будет небольшая. Нам осталось доделать совсем немного.

Предыдущие статьи из этой серии:

  1. Разработка игры на Canvas, часть 1. Начало
  2. Разработка игры на Canvas, часть 2. Создание противника
  3. Разработка игры на Canvas, часть 3. Атака
  4. Разработка игры на Canvas, часть 4. Столкновения
  5. Разработка игры на Canvas, часть 5. Атака
  6. Разработка игры на Canvas, часть 6. Смерть врагам

 

Смерть игрока

В этой статье мы доделаем смерть игрока от атак противника. Начнем с разметки экрана, который мы будем показывать после смерти игрока. Не будем делать что-то необычное, покажем лишь принцип, а украсить всегда можно по своему вкусу :)

<body>
  <div id="container"></div>

  <div id="dead">
  	<h2>Вы погибли в бою! :(</h2>
  	<h2>Ваш счет: <span id="score"></span></h2>
  	<h3>Для повторной игры нажмите F5</h3>
  </div>

  ...

</body>
<style>
    body {
      ...
      font-family: Tahoma, sans-serif;
    }
    
    ...

	#dead {
		display: none;
		width: 100%;
		text-align: center;
		margin-top: 100px;
	}
  </style>

 

Будет примерно следующее:

1231аа

 

Теперь займемся написанием соответствующего кода для смерти игрока.

function getHealth(count) {
	
        ...

	if (health <= 0) {
		health = 0;
		gameOver();
	}
	
}

Если здоровье игрока 0, то вызываем функцию для завершения игры gameOver();

Сама функция очень проста:

function gameOver() {
	gameLoop.stop();
	document.getElementById('score').innerText = score;
	document.getElementById('dead').style.display = "block";
	document.getElementById('container').style.display = "none";
}

В данной функции мы останавливаем наш бесконечный цикл gameLoop и показываем наш экран смерти #dead.

Так же заодно мы проставляем в #score количество очков, которое заработал игрок во время игры.

 

На этом-то и все :)

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

Надеюсь, что Вам понравилось :)

Всем успехов в кодинге! 😉

 

Напоследок демонстрация и исходники:

 

 

Автор статьи: Alex. Категория: JavaScript
Дата публикации: 15.11.2015
Ищем авторов!
Интернет-магазин редких игрушек из мира Minecraft
[subscribe2]