Почему не срабатывает cardElem.classList.remove('card.open'); ? Нужно написать игру в пары

Question

Что нужно сделать Вам предстоит разработать простую игру в пары. Вы могли с ней сталкиваться в настольных и видеоиграх. Игрок видит квадратное поле из карточек, расположенных рубашкой вверх, и находит пары, открывая карточки в произвольном порядке. На открытых карточках могут быть картинки, буквы, цифры, пиктограммы. Игрок открывает сначала одну карточку, затем вторую. Если открытые карточки одинаковы, они остаются открытыми до конца партии. В противном случае они переворачиваются обратно.

Начальное состояние игры при открытии в браузере. На странице с помощью HTML-элементов выводится поле 4 × 4 из квадратных карточек. Каждая карточка содержит цифру от 1 до 8. Пользователь не видит цифры — карточки расположены рубашкой вверх. На поле строго по две карточки с одинаковой цифрой, чтобы они могли образовать пару. Карточки расположены в случайном порядке.

Ход игры. Игрок может нажать на любую карточку. После нажатия карточка открывается — появляется цифра (карточка переворачивается). Далее игрок может открыть вторую карточку. Если открытые карточки содержат одинаковую цифру, они остаются открытыми до конца игры. Если вторая карточка содержит отличную от первой цифру, обе карточки закрываются, как только игрок откроет новую карточку. На поле остаются открытыми только найденные пары и 1-2 карточки, которые открывает игрок.

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

Советы и рекомендации В задании нет определённых требований к выбору HTML-элементов или стилю оформления задания, но это не значит, что этому не нужно уделять внимания, — игра должна оставаться удобной для игрока. Вы можете самостоятельно написать стили для игры или взять готовые UI-библиотеки вроде Bootstrap. Используйте отладчик, он поможет сэкономить время при поиске ошибок и недочётов в программе. Задание может показаться большим и сложным. Постарайтесь разбить его на несколько понятных этапов, и всё, скорее всего, окажется проще, чем вы думали: Этап 1. Создайте функцию, генерирующую массив парных чисел. Пример массива, который должна возвратить функция: [1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8].

Этап 2. Создайте функцию перемешивания массива. Функция принимает в аргументе исходный массив и возвращает перемешанный.

Надёжно перемешать массив можно с помощью алгоритма Фишера — Йетса (Fisher — Yates). Готовый код алгоритма на JavaScript можно найти в интернете.

Этап 3. Используйте функции из этапов 1 и 2 для создания массива с перемешанными номерами.

Этап 4. На основе массива создайте DOM-элементы карточек:

Создайте функцию, которая будет создавать карточку с номером из массива произвольных чисел. Добавьте событие клика, в котором будут условия и проверки на совпадение карточек.

<html lang="ru">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Игра в пары</title>
   <link rel="stylesheet" href="/normalize.css">
   <link rel="stylesheet" href="/style.css">
   <script defer type="module" src="main.js"></script>
</head>

<body>
   <section>
       <div class="container">
           <h1>Пары</h1>
           <div class="game" id="game">
               

           </div>
       </div>
   </section>

</body>

</html>````


(() => {

 const numbersArr = [];

 const openedCards = [];
 const lastCards = [];

 const cardElem = document.getElementsByClassName('card');

 function newCard(number) {
     let card = document.createElement('div');
     card.classList.add('card');
     card.textContent = number;
     return card;
 }
 
 function createCards() {
     for (let i = 0; i < numbersArr.length; i++) {
         let gameCard = newCard(numbersArr[i]);
         gameCard.setAttribute('id', i + 1);
         document.getElementById('game').append(gameCard);
         gameCard.addEventListener('click', () => {
             gameCard.classList.add('open');
             let gameCardAttr = gameCard.getAttribute('id');
             
             openedCards.push(gameCardAttr);
             if(openedCards.length > 2) {
               cardElem.classList.remove('card.open');
               }
         })

         
     }
 }
 
 function getShuffledArray() {
     for(let i = 1; i < 9; i++) {
             numbersArr.push(i);
             numbersArr.push(i);
         }
         numbersArr.sort(() => Math.random() - 0.5);
 }

 
 
 console.log(cardElem)
 getShuffledArray();
 createCards();
 
 
 
 console.log(numbersArr);
 console.log(numbersArr[0])
 console.log(openedCards)

 document.addEventListener('DOMContentLoaded', () => {
     
 })
})(); ````

БЛОГ НА HUSL

Почему не срабатывает cardElem.classList.remove('card.open'); ? Нужно написать игру в пары

Ответы (0 шт):