3

Есть задание:

  1. На странице располагаются восемь карт "рубашками" вверх.
  2. Каждая карта имеет свою пару (такую же масть и номинал).
  3. При щелчке указателем мыши по карте, отображается ее лицевая сторона.
  4. При открытии двух карт они сравниваются. Если открыта одинаковая пара, карты исчезают через пару секунд, если карты разные – снова переворачиваются рубашками вниз через пару секунд.

Сложности возникли с четвёртым пунктом. На данный момент при нажатии на любые две карты проходит 2 секунды, и затем они переворачиваются обратной стороной, однако непонятно, как сравнить их. Надеюсь на вашу помощь.

<html>
<head>
    <p>Задание<br></p>
</head>
<body>
    <img id="img1" src="card_back.jpg" width="150" height="200"
    onclick="this.src='hearts.jpg'; counter()"/>
    <img id="img2" src="card_back.jpg" width="150" height="200"
    onclick="this.src='piki.jpg'; counter()"/>
    <img id="img3" src="card_back.jpg" width="150" height="200"
    onclick="this.src='queen.jpg'; counter()"/>
    <img id="img4" src="card_back.jpg" width="150" height="200"
    onclick="this.src='romb.jpg'; counter()"/>
    <br>
    <img id="img5" src="card_back.jpg" width="150" height="200"
    onclick="this.src='romb.jpg'; counter()"/>
    <img id="img6" src="card_back.jpg" width="150" height="200"
    onclick="this.src='queen.jpg'; counter()"/>
    <img id="img7" src="card_back.jpg" width="150" height="200"
    onclick="this.src='piki.jpg'; counter()"/>
    <img id="img8" src="card_back.jpg" width="150" height="200" 
    onclick="this.src='hearts.jpg'; counter()"/>

    <script type = "text/javascript">

    // как только открывают вторую карту, начинается отсчёт
    let c = 0;
    function counter() {
        c++;
        if (c == 2)
        {
            c = 0;
            setTimeout(newGame, 2000);
        }

    }

    function hideImage(elem) {
        elem.style.display = "none";
    }

    // переворачивает все карты обратной стороной
    function newGame () {
        for (let j = 0; j < 8; j++) {
            var images = document.getElementsByTagName("img");
            images[j].src = "card_back.jpg";
        }
    }
</script>
</body>

6
  • Вы же заранее знаете какая карта где, сравнивайте их индексы или url 22 ноя 2019 в 15:49
  • @Stranger in the Q Но не знаю, какие карты будут нажаты, а без этого не получить url.
    – GreenTea
    22 ноя 2019 в 16:50
  • Вы знаете где какая и Вы знаете куда нажал пользователь... 22 ноя 2019 в 16:51
  • @Stranger in the Q Вот именно, что не знаю, куда нажал пользователь, поэтому и спрашиваю.
    – GreenTea
    22 ноя 2019 в 16:55
  • Изначально подход неверный... задолбаетесь возиться с id и onclick, особенно когда захочется добавить дополнительные слои карт) Нужно где-нибудь почитать про объекты, массивы, querySelectorAll() и циклы. А при клике - внутри функции клика как минимум можно узнать id кликнутого элемента через this.id (а если выдать всем картам один общий класс и клик прописать через какой-нибудь цикл — то и номер кликнутого элемента) 22 ноя 2019 в 17:01

2 ответа 2

3

Вот о чем я писал в комментарии - достаточно передать индекс или идентификатор в функцию, а потом сравнивать с предыдущим выбором, как-то так:

  let chosenCards = [];  // массив выбранных карт

  newGame();     // уменьшаем кол-во копи пасты, уже есть функция 
                 // устанавливающая рубашки карт, зачем их прописывать 8 раз? :)

  function openCard(elem, id) {
    if (chosenCards.length > 2) // если выбрано больше 2х карт -  
      return;                   // выходим
      
    chosenCards.push(id); // добавлем выбранную карту в массив  
    elem.src = 'https://picsum.photos/id/' + id + '/150/200'; // переоврачиваем
    
    if (chosenCards.length === 2) { // выбрано 2 карты
      if (chosenCards[0] === chosenCards[1]) { // сравниваем
        console.log("card equal");
      }
      setTimeout(newGame, 2000);
    } 
  }

  // переворачивает все карты обратной стороной
  function newGame() {
    chosenCards = [];
    for (let j = 0; j < 8; j++) {
      var images = document.getElementsByTagName("img");
      images[j].src = "https://picsum.photos/id/25/150/200";
    }
  }
img {
  width:150px;
  height:200px;
 }
<img onclick="openCard(this, 1)" />
<img onclick="openCard(this, 2)" />
<img onclick="openCard(this, 3)" />
<img onclick="openCard(this, 4)" />
<br>
<img onclick="openCard(this, 4)" />
<img onclick="openCard(this, 3)" />
<img onclick="openCard(this, 2)" />
<img onclick="openCard(this, 1)" />

3
  • Спасибо большое, вы мне очень помогли! У меня всё работает :)
    – GreenTea
    23 ноя 2019 в 17:52
  • @GreenTea Вам все понятно? :) 23 ноя 2019 в 18:17
  • 1
    Да, со всем разобралась)
    – GreenTea
    26 ноя 2019 в 14:29
2

Длинновато получилось... но старался сильно не выходить за рамки классических циклов) Возможно придется пару недель почитать всякое, чтобы переварить пример. Ссылаюсь на https://learn.javascript.ru/

let images = [
  "https://gyazo.com/5a2497174ed63d97792ba07a2a182202.png",
  "https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png",
  "https://gyazo.com/fe48322c44d1c214ee8d9ba49876a0da.png",
  "https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png",
];

let defaultImage = "https://gyazo.com/78aceb720f5b1c56d5f719683b8bf2a1.png";

runTheGame(); // Можно привязать к клику по какой-нибудь кнопке.

/*******************************/

function runTheGame() {
  let cards = insertAndGetCards(images.length);
  /* Чтобы редактировать нужно было только массив `images`,
  вместо querySelectorAll(...) сразу создаю-вставляю и возвращаю массив элементов */
  
  let shuffled = null; // Сюда будет сохраняться какой-нибудь [0,1,3,2,2,0,3,1] (случайный)
  /* Карточек тоже 8 штук. Кликая на любую - можно узнать её номер и сверить с числом,
     которое будет сохранено под тем же номером в этом массиве.
     Заодно можно будет по сохраненному числу - показать картинку из [images] */

  resetImages();
  setImageFlipper();

  function setImageFlipper() {
    let wrongCardsFlipTimeout = 1200;

    let counter = 0;
    let lastClickedIndex = null;
    /* Бум сохранять номер предыдущей кликнутой карты, чтобы сверить его с текущей кликнутой */

    for (let i = 0; i < cards.length; i++) {
      cards[i].addEventListener('click', function () {
        if (counter == 2 || this.classList.contains('flipped')) return;
        /* `return` прерывает функцию, если карточка уже перевернута или 
        если перевернуто 2 шт неправильных - ожидается обратный переворот */

        let index = shuffled[i];
        /* По задумке, размер массива `suffled` всегда будет совпадать с количеством карточек.
        `i` — номер текущей кликнутой карточки. По этому номеру достаем сохраненное число 
        из `shuffled`. А там - всегда будет один из индексов `images`, 
        откуда по этому индексу можно достать адрес картинки */

        this.src = images[index];

        this.classList.add('flipped');
        counter++;

        if (counter == 2) {
          if (shuffled[i] == shuffled[lastClickedIndex]) {
            /* Проверяем не сами картинки, а их номера из `shuffled` */
            handleFound(i);
          } else {
            handleNotFound(i);
          }
        } else {
          lastClickedIndex = i;
        }
      });
    }

    function handleFound(i) {
      cards[i].classList.add('found');
      cards[lastClickedIndex].classList.add('found');
      counter = 0;
    }

    function handleNotFound(i) {
      setTimeout(function () {
        cards[i].classList.remove('flipped');
        cards[lastClickedIndex].classList.remove('flipped');

        cards[i].src = cards[lastClickedIndex].src = defaultImage;
        /* Если вызвали эту функцию, значит counter == 2 и перевернули неправильную пару.
        Нельзя будет кликнуть снова, пока через таймаут они не перевернутся обратно 
        и не сбросят считалку (для этого стоял return в самом начале) */
        counter = 0;
      }, wrongCardsFlipTimeout);
    }
  }

  function resetImages() {
    for (let i = 0; i < cards.length; i++) {
      cards[i].src = defaultImage;
    }

    shuffled = getShuffledIndexes();

    function getShuffledIndexes() {
      let len = images.length;
      let arr = new Array(len * 2).fill(0).map((e, i) => i % len); // (*1)

      for (let i = arr.length - 1; i >= 0; i--) {
        let rand = Math.floor(Math.random() * (i + 1)); // (*2)      
        [arr[i], arr[rand]] = [arr[rand], arr[i]]; // (*3)
      }

      console.log("Shuffled (случайные индексы из `images` для карточек) → " + JSON.stringify(arr));
      return arr;
    }
  }

  function insertAndGetCards(imagesLength) {
    let imgTags = new Array(imagesLength * 2).fill(0).map(function () {
      let img = document.createElement('img');
      img.className = "card";
      return img;
    });
    /* Создаем массив в два раза больше, чем кол-во картинок, заполняем нулями,
    А их, через map заменяем элементами <img> */

    let box = document.getElementById('game-cards');
    box.innerHTML = ""; // Это чтобы картинки из предыдущей игры не мешались.

    for (let i = 0; i < imgTags.length; i++) {
      box.appendChild(imgTags[i]);
    }
    // или box.innerHTML = imgTags.map( img => img.outerHTML ).join("");

    return imgTags;
  }
}
.card {
  width: 120px;
  height: 120px;
  background-color: grey;  
  border: 4px solid grey;
  margin: 4px;
}

.card.flipped {
  border: 4px solid red;
}

.card.found {
  border: 4px solid #045acf;
}
<div id="game-cards"></div>

Массив Shuffled сразу выводится в консоль. Обращаю внимание, что совпадающие числа в нем показывают - под какой картой по счету будут совпадать картинки (изначально всё на нем и строилось).

(*1) let arr = new Array(len * 2).fill(0).map((e, i) => i % len); — понятно, создается массив вдвое больше от кол-ва картинок, заполняется нулями. А что делает map: В данном случае создается массив из 8 элементов, а значит на каждом круге map, переменная i будет по очереди принимать значения 0, 1, 2, 3, 4, 5, 6, 7. Если для каждого из чисел вернуть остаток от деления на 4, получится массив [0, 1, 2, 3, 0, 1, 2, 3]

Получили - теперь хорошо бы его перемешать, чтобы по этим номерам доставать адреса картинок из images и показывать при клике.

(*2) Math.random() выдает случайное число от 0 (включительно) до 1 (не включительно). Умножив его на любое положительное число i — получаем случайное число от 0 до i (не включительно). Math.floor() округляет полученное до нижнего целого числа.

for (let i = arr.length - 1; i >= 0; i--) {
    let rand = Math.floor(Math.random() * (i + 1));

Цикл от 7 до 0 включительно: На каждом круге берем случайный индекс из оставшихся

(*3) и меняем местами тот элемент с текущим:

[arr[i], arr[rand]] = [arr[rand], arr[i]];

Вместо него можно было написать длинный вариант:

let temp = arr[i]

arr[i] = arr[rand];
arr[rand] = temp;
2
  • вот Вам не спится :) у меня 03:30 ...
    – Leks
    23 ноя 2019 в 0:37
  • Спасибо большое, у вас очень интересный и подробный ответ! Вы мне очень помогли с решением :)
    – GreenTea
    23 ноя 2019 в 17:52

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.