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

наверх

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

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

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

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

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

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

<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>

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

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

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 количество очков, которое заработал игрок во время игры.

На этом-то и все 🙂

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

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

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

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

Демонстрация

Исходники