Главная3 курс UX/UI2 занятие. Вспоминаем JS. Игра «Камень, ножницы, бумага»3. Создаем основные блоки игры через JS
2 занятие

3. Создаем основные блоки игры через JS

Создаем обработчик события загрузки DOM и функцию игры:

function createGame() {

}

document.addEventListener('DOMContentLoaded', createGame);

Нам необходим массив возможных ответов и массив для отслеживания состояния счета:

const answers = ['Камень', 'Ножницы', 'Бумага'];
const score = [0, 0];

Создаем основные блоки нашей игры через document.createElement

//Создаем основной контейнер игры
const containerElement = document.createElement('div');
containerElement.classList.add('container');
document.body.appendChild(containerElement);

//Добавляем в контейнер блок с вариантами кнопок
const containerAnswers = document.createElement('div');
containerAnswers.classList.add('answers');
containerElement.appendChild(containerAnswers);

//Добавляем в контенер блок со статусами выбора и счета игры
const containerStatus = document.createElement('div');
containerStatus.classList.add('status');
containerElement.appendChild(containerStatus);

//Добавляем в блок статуса игры заголовок
const elementTitle = document.createElement('div');
elementTitle.classList.add('title');
elementTitle.innerText = 'Счет игры:';
containerStatus.appendChild(elementTitle);

//Добавляем в блок статуса блок с со счетом игры
const containerScore = document.createElement('div');
containerScore.classList.add('container-score');
containerStatus.appendChild(containerScore);

Добавляем блоки с текущим счетом и объявлеим их в объекты через document.querySelectorAll, чтобы можно было в будущем менять их

for (i = 0; i < score.length; i++) {
    const elementScore = document.createElement('div');
    elementScore.classList.add('score');
    elementScore.innerText = score[i];
    containerScore.appendChild(elementScore);
}

const scoresElements = document.querySelectorAll('.score');

В блоке с вариантами выбора публикуем все содержание массива answers

answers.forEach((answer, i) => {
    const elementAnswer = document.createElement('div');
    elementAnswer.classList.add('answer');
    elementAnswer.innerText = answer;
    containerAnswers.appendChild(elementAnswer);
});

К каждому варианту кнопки добавляем прослушиватель события на клик:

elementAnswer.addEventListener('click', function(event) {

});

При клике получаем в переменную наш вариант шага:

const clickAnswer = this.textContent;

Через функцию случайного числа генерируем вариант ответа компьютера от 1 до длины списка вариантов answers:

const botAnswer = answers[Math.floor(Math.random() * answers.length)];

Создаем новый элемент истории игры:

const answerStep = document.createElement('div');

Далее сравниваем наш ответ и ответ компьютера.

Ответы могут быть равны — это ничья. Обоим добавляем по одному очку и фиксируем класс шага как серый (нейтральный).

Для пользователя есть три комбинации проигрыша:

  • Вариант пользователя: Камень, компьютера: Бумага
  • Вариант пользователя: Ножницы, компьютера: Камень
  • Вариант пользователя: Бумага, компьютера: Ножницы

Во всех этих случаях мы добавляем очко компьютеру и фиксируем класс шага как красный (проигрыш).

Во всех остальных случаях пользователь выиграл. Добавляем ему очко и фиксируем класс шага зеленым.

if (clickAnswer == botAnswer) {
    answerStep.classList.add('answer-grey');
    score[0]++;
    score[1]++;
}
else if (
    clickAnswer == 'Камень' && botAnswer == 'Бумага' ||
    clickAnswer == 'Ножницы' && botAnswer == 'Камень' ||
    clickAnswer == 'Бумага' && botAnswer == 'Ножницы'
) {
    answerStep.classList.add('answer-red');
    score[1]++;
}
else {
    answerStep.classList.add('answer-green');
    score[0]++;
}

В историю игры добавляем сыгранный шаг.

answerStep.innerText = clickAnswer + ' — ' + botAnswer;
containerStatus.appendChild(answerStep);

Нам осталось вывести измененное количество очков у обоих игроков:

scoresElements.forEach((scoreElement, scoreIndex) => {
        scoreElement.innerText = score[scoreIndex];
});
Далее