Тема 11 Залікова робота

Залік "Герої гри"

1) Створення об’єкта з героями
Створюємо об’єкт team, який зберігає масив heroes.
Кожен герой має три характеристики:
strength — сила,
speed — швидкість,
magic — магія.

2) Метод для виведення інформації про конкретного героя
Метод getHeroInfo отримує героя за індексом (0, 1, 2, 3) і повертає його характеристики.
Якщо індекс невірний — пише "Героя не знайдено.".

3) Метод для виведення всіх героїв
Метод getAllHeroesInfo перебирає всіх героїв циклом forEach і формує рядок з усіма їх характеристиками.

4) Метод для обчислення середнього рівня здібностей
Метод getAveragePower додає всі значення strength + speed + magic для кожного героя.
Потім ділить суму на загальну кількість характеристик (кількість героїв * 3).
Результат округлюється до 2 знаків після коми (toFixed(2)).

5) Функції для виведення результатів на сторінку
showHero(index) — показує характеристики конкретного героя;
showAllHeroes() — показує всіх героїв;
showAveragePower() — показує середній рівень здібностей.
Ці функції працюють з кнопками і зображеннями.
Всі результати виводяться у <div id="output"<>/div>.

6) HTML частина
Є заголовок "Клікни на героя".
Є блок з 4 зображеннями героїв (Стів, Леон, Крімсон Кіт, Маріо). Кожна картинка має onclick="showHero(номер)".
Є дві кнопки:
"Показати всіх героїв",
"Середня сила героїв".
Є блок <div id="output"></div>, куди виводиться результат.

Матеріал

Посилання на картинки:
Стів - https://www.jimbo.cz/data/tmp/3/2/213532_3.jpg?1678699868_2
Леон - https://youtooz.com/cdn/shop/files/0000000000_4f803aa2-dced-49d6-9b4a-12ec0fd80273.png?v=1737766588
Крімсон Кіт - https://static.wikia.nocookie.net/fortnite/images/d/d7/Meowscles_-_Outfit_-_Fortnite.png/revision/latest?cb=20200509144639
Маріо - https://upload.wikimedia.org/wikipedia/ru/1/15/Mario2small.jpg

Код-Шаблон:

t2-1.htmlhtml

<!DOCTYPE html>
<html lang="uk">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Герої гри</title>
    <style>
      body {
        background: #f7f7f7;
        padding: 20px;
      }
      h1 {
        margin-bottom: 40px;
      }
      .heroes {
        display: flex;
        gap: 20px;
        margin-bottom: 20px;
      }
      .heroes img {
        width: 150px;
        height: 160px;
        border-radius: 10px;
        border: 1px solid black;
      }
      .heroes img:hover {
        transform: scale(1.05);
        border-color: #4caf50;
      }
      button {
        margin: 5px;
        padding: 10px 20px;
        background-color: #4caf50;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 16px;
      }
      button:hover {
        background-color: #45a049;
      }
      #output {
        margin-top: 20px;
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>
  <body>
    <h1>🛡️ Клікни на героя</h1>

    <div class="heroes">
      <img
        src="https://www.jimbo.cz/data/tmp/3/2/213532_3.jpg?1678699868_2"
        alt="Стів"
        onclick="showHero(0)"
      />
      <img
        src="https://youtooz.com/cdn/shop/files/0000000000_4f803aa2-dced-49d6-9b4a-12ec0fd80273.png?v=1737766588"
        alt="Леон"
        onclick="showHero(1)"
      />
      <img
        src="https://static.wikia.nocookie.net/fortnite/images/d/d7/Meowscles_-_Outfit_-_Fortnite.png/revision/latest?cb=20200509144639"
        alt="Крімсон Кіт"
        onclick="showHero(2)"
      />
      <img
        src="https://upload.wikimedia.org/wikipedia/ru/1/15/Mario2small.jpg"
        alt="Маріо"
        onclick="showHero(3)"
      />
    </div>

    <button onclick="showAllHeroes()">Показати всіх героїв</button>
    <button onclick="showAveragePower()">Середня сила героїв</button>

    <div id="output"></div>

    <script>

    </script>
  </body>
</html>

build info

compiler: 2.0.5.1 · 4054EF9BF6C4510A
built: 2026-11-08 14:31:25 UTC