Мини-игра: очки и здоровье врага

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

Цель урока: Собрать основу игры: удар по врагу добавляет очки и снимает здоровье.

Нужно знать заранее: Уроки 4.3 и 5.2

Объяснение

Зачем это нужно: Сейчас вы соберёте настоящую игру. Пусть маленькую, но в ней будет то же, что и в большой: счёт очков, здоровье противника и реакция на нажатие. Это первая программа, в которой числа на экране меняются от ваших действий.

Как это работает: Игра — это переменные плюс отрисовка. Внутри живут два числа: очки игрока и здоровье врага. Игрок нажимает кнопку — числа меняются — и мы сразу переписываем их на странице. let score = 0 — очки игрока. let hp = 100 — здоровье врага. Каждое нажатие делает две вещи: меняет числа (score = score + 10 и hp = hp - 30) и показывает новые значения на странице. Числа выводятся как текст: document.getElementById('score').textContent = score. Полоска здоровья устроена так же, как в уроке 5.2: заливка внутри рамки. Только теперь длину заливки задаёт код: document.getElementById('hp').style.width = hp + '%'. Если hp равен 70, получится ширина '70%', и заливка займёт 70% длины шкалы.

Пример с разбором: let score = 0 let hp = 100

document.getElementById('hit').onclick = function () { score = score + 10 hp = hp - 30 document.getElementById('score').textContent = score document.getElementById('hpText').textContent = hp document.getElementById('hp').style.width = hp + '%' } Обработчик — это функция, которая выполняется по нажатию. Переменные объявлены снаружи, поэтому их значения сохраняются между нажатиями.

Разбор по шагам: 1. Объявите переменные снаружи обработчика: let score = 0 и let hp = 100. 2. Внутри обработчика onclick прибавьте очки и отнимите здоровье. 3. Выведите новые значения: textContent для чисел и style.width для полоски. 4. Нажмите кнопку и проверьте, что числа растут, а полоска сжимается.

Частая ошибка: Объявить score и hp внутри обработчика. Тогда при каждом нажатии они создаются заново, и игра всегда показывает одно и то же число. Переменные — это состояние игры, оно должно жить снаружи, рядом с кодом.

Важно: Сколько ударов выдержит враг, зависит от двух чисел: здоровья и урона. При 100 здоровья и уроне 30 враг падает с четвёртого удара. Это уже настоящая игровая настройка — и меняется она одной цифрой.

Итог: У вас есть работающая механика: счёт, здоровье и реакция на удар. В следующем уроке добавим финал — победу и кнопку «Играть снова».

Что дальше: Урок 6.2 — победа и перезапуск игры.

let score = 0
let hp = 100

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

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

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