Здравствуйте, уважаемые читатели!
Сегодня продолжаем доделывать нашу игру на canvas.
В этот раз статья будет небольшая. Нам осталось доделать совсем немного.
Предыдущие статьи из этой серии:
- Разработка игры на Canvas, часть 1. Начало
- Разработка игры на Canvas, часть 2. Создание противника
- Разработка игры на Canvas, часть 3. Атака
- Разработка игры на Canvas, часть 4. Столкновения
- Разработка игры на Canvas, часть 5. Атака
- Разработка игры на 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>
Будет примерно следующее:
Теперь займемся написанием соответствующего кода для смерти игрока.
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 количество очков, которое заработал игрок во время игры.
На этом-то и все 🙂
Конечно, можно и дальше разрабатывать игру, украшать, изменять и т.д. Но в данном цикле статей я хотел лишь рассказать основные принципы написания игры, которые я использую.
Надеюсь, что Вам понравилось 🙂
Всем успехов в кодинге! 😉
Напоследок демонстрация и исходники: