Урон и усиление: числа, которые меняют игру

Урок 6.3 · Интерфейсы и сайты с нуля · Модуль 6. Проект: своя мини-игра · По подписке

Цель урока: Вынести урон в переменную и дать игроку усиливать удар.

Нужно знать заранее: Урок 6.1

Объяснение

Зачем это нужно: Пока урон вписан числом, игра всегда одинаковая: четыре удара — и всё. Настоящая игра даёт игроку выбор: усилить удар, потратить очки, стать сильнее. Для этого урон выносят в переменную.

Как это работает: let damage = 10 — сколько здоровья снимает один удар. В обработчике удара пишем hp = hp - damage, а не hp = hp - 30. Теперь урон можно менять в одном месте. Кнопка «Усилить удар» #upgrade увеличивает damage на 10 и показывает новое значение в #damage: damage = damage + 10; document.getElementById('damage').textContent = damage. Когда урон станет 20, каждый удар будет снимать 20 здоровья. Игра меняется, а код остаётся коротким.

Пример с разбором: let damage = 10

document.getElementById('hit').onclick = function () { hp = hp - damage document.getElementById('hpText').textContent = hp document.getElementById('hp').style.width = hp + '%' }

document.getElementById('upgrade').onclick = function () { damage = damage + 10 document.getElementById('damage').textContent = damage } Первый обработчик использует damage, второй — увеличивает его. Одна переменная связывает две кнопки.

Уроки модуля 6

• 6.1 Мини-игра: очки и здоровье врага (бесплатно)
• 6.2 Победа и кнопка «Играть снова» (по подписке)
• 6.3 Урон и усиление: числа, которые меняют игру — вы здесь (по подписке)
• 6.4 Счёт и рекорд: сохраняем лучшее (по подписке)
• 6.5 Полоска здоровья меняет цвет (по подписке)
• 6.6 Журнал боя: что произошло (по подписке)
• 6.7 Мини-проект: игра целиком (по подписке)
• 6.8 Разбор игры: что не так (по подписке)