Как собрать инвентарь

Учимся хранить много предметов в одной переменной, добавлять их и выводить на экран — на примере рюкзака капибары.

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

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

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

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

Нажимай на подсвеченные фрагменты

let backpack = []

Создали переменную с именем «рюкзак». Квадратные скобки [] означают пустую коробку. Сейчас в ней ничего нет, но она готова принимать предметы.

let fullBackpack = ['🍊', '🌿']

Здесь сразу положили в массив две вещи. Текстовые элементы (строки или эмодзи) пишутся в кавычках, а внутри массива разделяются запятой.

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

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

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

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

Нажимай на подсвеченные фрагменты

takeItem('🍊')

При клике вызываем функцию и отправляем в неё текст (в нашем случае — эмодзи мандаринки).

backpack.push(item);

Команда push берёт то, что прилетело в item, и добавляет внутрь массива backpack. Если нажать 3 раза, массив станет таким: ['🍊', '🍊', '🍊'].

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

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

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

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

Нажимай на подсвеченные фрагменты

.join(' ')

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

Практика

Кнопки и место для предметов уже готовы. Тебе — написать JS: завести список, добавлять в него на клик и выводить на экран. Три строки, все в теге <script>.

Заведи пустой массив: let backpack = [];
Внутри функции добавь предмет: backpack.push(item);
Выведи массив в id="slots" через пробел: document.getElementById('slots').textContent = backpack.join(' ');

Твой код (допиши атрибуты и JS)

Превью

Нажми «▶ Запустить»
чтобы проверить инвентарь

Код решения (сравни со своим)

0 / 3 выполнено

Создан массив let backpack = [];
Использован метод backpack.push(item)
Экран обновляется через .join(' ')

Готово — к неделе 4

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style>
    body { background: #F9F8F4; color: #181818; font-family: 'Inter', sans-serif; text-align: center; padding: 20px 10px; margin: 0; }
    .card { background: #FCFBF8; border: 2px solid #CE7C9F; padding: 20px; max-width: 280px; margin: 0 auto; }
    .capybara { font-size: 60px; margin-bottom: 10px; line-height: 1; }

.inventory { background: #F3EEE7; border: 1px dashed #CE7C9F; padding: 12px; margin-bottom: 20px; text-align: left; }
    .inv-title { font-size: 12px; color: #6B625B; text-transform: uppercase; margin-bottom: 4px; }
    .slots { font-size: 24px; min-height: 36px; letter-spacing: 4px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    button { padding: 10px; background: #FFFFFF; color: #181818; border: 1px solid #BDAFA1; cursor: pointer; font-size: 20px; }
    button:hover { background: #CE7C9F; color: #FFFFFF; border-color: #CE7C9F; }
  </style> </head> <body> <div class="card"> <div class="capybara">🦫</div> <div class="inventory"> <div class="inv-title">Рюкзак</div> <div class="slots" id="slots"></div> </div> <div class="grid"> <button onclick="takeItem('🍉')">🍉</button> <button onclick="takeItem('🌿')">🌿</button> <button onclick="takeItem('☕')">☕</button> <button onclick="takeItem('🍊')">🍊</button> </div> </div> <script>

// ШАГ 1: заведи пустой массив  (let backpack = [])

function takeItem(item) {

// ШАГ 2: добавь item в массив через .push()

// ШАГ 3: выведи массив в id="slots", склеив через .join(' ')

}

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

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    button { padding: 10px; background: #FFFFFF; color: #181818; border: 1px solid #BDAFA1; cursor: pointer; font-size: 20px; }
    button:hover { background: #CE7C9F; color: #FFFFFF; border-color: #CE7C9F; }
  </style> </head> <body> <div class="card"> <div class="capybara">🦫</div> <div class="inventory"> <div class="inv-title">Рюкзак</div>  <div class="slots" id="slots"></div> </div> <div class="grid">  <button onclick="takeItem('🍉')">🍉</button> <button onclick="takeItem('🌿')">🌿</button> <button onclick="takeItem('☕')">☕</button> <button onclick="takeItem('🍊')">🍊</button> </div> </div> <script>
    // Создаём пустой массив (коробку для вещей)
    let backpack = [];

// Функция принимает эмодзи в переменную item
    function takeItem(item) {

// Закидываем предмет в конец массива
      backpack.push(item);

// Находим рюкзак в HTML и вставляем содержимое массива,
      // склеенное пробелами, чтобы убрать запятые.
      document.getElementById('slots').textContent = backpack.join(' ');

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