Обучение + Практика

Как сделать инвентарь при помощи HTML и JS

Разбираем, как собирать предметы в массив и выводить их на экран

1

Массивы: Коробка для вещей

Обычная переменная хранит только одно значение (например, let score = 0). Но инвентарь — это список. Чтобы хранить много предметов в одной переменной, придумали Массивы (Arrays). Они обозначаются квадратными скобками [].

// Создаем пустой рюкзак
let backpack = [];

// А вот так выглядит рюкзак, в котором уже есть вещи
let fullBackpack = ['🍊', '🌿'];

Кликай на подсвеченные фрагменты

let backpack = []
Мы создали переменную с именем «рюкзак». Квадратные скобки [] означают пустую коробку. Сейчас в ней ничего нет, но она готова принимать предметы.
let fullBackpack = ['🍊', '🌿']
А здесь мы сразу положили в массив две вещи. Обрати внимание: текстовые элементы (строки или эмодзи) всегда пишутся в кавычках, а внутри массива они разделяются запятой.
2

Метод .push(): Кладем предмет в сумку

У массивов есть встроенные команды (методы). Чтобы закинуть новый предмет в конец нашего списка, мы используем команду .push().

<!-- HTML: Кнопка передает предмет '🍊' -->
<button onclick="takeItem('🍊')">Взять</button>

// JavaScript: Ловит предмет и кладет в массив
function takeItem(item) {
  backpack.push(item);
}

Кликай на подсвеченные фрагменты

takeItem('🍊')
При клике мы вызываем функцию и отправляем в неё текст (в нашем случае это эмодзи мандаринки).
backpack.push(item);
Команда push берет то, что прилетело в item, и запихивает это внутрь массива backpack. Если нажать 3 раза, массив будет выглядеть так: ['🍊', '🍊', '🍊'].
3

Метод .join(): Красивый вывод на экран

Как мы помним из прошлых уроков, document.getElementById('slots') находит наш элемент на странице. Но если мы просто выведем туда массив, браузер напечатает его через запятую: 🍊,🌿,🍉.

Чтобы убрать запятые и вывести предметы красиво, используют команду .join(' ').

// Берем наш рюкзак и выводим на экран без запятых
document.getElementById('slots').textContent = backpack.join(' ');

Кликай на подсвеченные фрагменты

.join(' ')
Эта команда «склеивает» все предметы в массиве в одну строчку. То, что мы пишем в кавычках ' ' (пробел) — это то, что будет стоять между предметами. В итоге мы получим красивое: 🍊 🌿 🍉.
Практика

Помоги Капибаре собрать вещи! Напиши логику добавления предметов в рюкзак.

  1. В HTML: Найди тег <div class="slots"> и добавь ему id="slots".
  2. В HTML: У кнопок допиши вызов функции onclick="takeItem('🍊')" (вместо мандаринки передавай нужный эмодзи: 🍉, 🌿 или ☕).
  3. В JS: Создай пустой массив: let backpack = [];
  4. В JS: Внутри функции добавь предмет в рюкзак: backpack.push(item);
  5. В JS: Обнови экран, склеив массив через пробел: document.getElementById('slots').textContent = backpack.join(' ');
Песочница
Твой код (Допиши атрибуты и JS)
Превью
Нажми «▶ Запустить»
чтобы проверить инвентарь
Код решения (сравни со своим)
Чеклист выполнения
0 / 5 выполнено