Как я могу сохранить и сравнить два элемента по щелчку мыши для комбинационной игры?

ProgramBox

Как я могу сохранить и сравнить два элемента по щелчку мыши для комбинационной игры?

Post author:admin
Запись опубликована:25 апреля, 2023
Post category:Вопросы по программированию

#javascript #css

Вопрос:

Здесь я пытаюсь создать игру с памятью. В этой игре я хочу построить логику для сопоставления карт. Логика примерно такая: я хочу сохранить первый щелчок и второй щелчок в двух переменных, а позже проверить, когда пользователь нажимает на первую карту, и если она совпадет со второй картой, тогда пользователь не сможет щелкнуть эти карты снова, и она не перевернется. И если пользователь не соответствует, он может снова щелкнуть по этой карте. Пытаюсь в течение часа, но не могу решить проблему. Что я должен делать? Кто-нибудь может помочь, пожалуйста?

 // Declaring variable  

 const cardClass = ["fa-diamond", "fa-paper-plane-o", "fa-anchor", "fa-bolt"];
 const firstClick, secondClick;
 const card = document.querySelectorAll('.deck li ');

//for loop

 for(let i=0;i<card.length;i  ){
     card[i].addEventListener('click', flipOver);
 }



 // flipOver function

 function flipOver(e){

    let element = e.currentTarget;
   e.target.classList.toggle("open");

}

// Card Matching logic

for(let i=0; i<cardClass.length; i  ){

    if(e.target.classList.contains(cardClass[i])){
        this.click = firstClick;
    }

}

 .deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(180deg);
    /* transform: rotateX(180deg); */
    background: #02b3e4;
    cursor: pointer;
    transition-timing-function: linear;
    transition: .2s;
    font-size: 33px;
}

 <ul class="deck">
    <li class="card">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card ">
        <i class="fa fa-paper-plane-o"></i>
    </li>
    <li class="card ">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card">
        <i class="fa fa-bolt"></i>
    </li>
</u>

1. Каков план с константами? Обычно им присваиваются значения, когда они определены. В противном случае они, вероятно, не являются константами.

2. Скрипка

3. SyntaxError: missing = in const declaration

4. @isherwood все в порядке. Но как построить логику, по которой я могу проверить, совпадают ли первый щелчок пользователя и второй щелчок! Это основная проблема!

5. Шаг первый — предоставить нам что-то, что не выдает ошибок. Затем мы можем двигаться вперед.

Ответ №1:

Во-первых, вам нужен счетчик, который отслеживает количество открытых карт -> если это две карты, время для их сравнения. Чтобы узнать, какая карта была нажата, мы сохраняем ссылку внутри firstclick и secondClick соответственно. например

 let element = e.currentTarget;
firstClick = element;

Для сравнения, если две карты одного типа, мы используем их className («fa-diamond», «fa-paper-plane-o» …), которые мы можем получить, вызвав:

 var card1Type = firstClick.getElementsByTagName("i")[0].className;
var card2Type = secondClick.getElementsByTagName("i")[0].className;

Если они совпадают, удалите прослушиватель событий щелчка:

   firstClick.removeEventListener("click", flipOver);
  secondClick.removeEventListener("click", flipOver);

Если нет, нам нужно перевернуть их снова.

Весь пример:

 // Declaring variable  

const cardClass = ["fa-diamond", "fa-paper-plane-o", "fa-anchor", "fa-bolt"];
var firstClick, secondClick;
var counter = 1;
var wrong = false;
const card = document.querySelectorAll('.deck li ');

//for loop

for (let i = 0; i < card.length; i  ) {
  card[i].addEventListener('click', flipOver);
}


function proceed() {
  firstClick.classList.toggle("open");
  secondClick.classList.toggle("open");
  wrong = false;
}

function flipOver(e) {
  if (!wrong) {
    let element = e.currentTarget;
    e.target.classList.toggle("open");
    if (counter == 1) {
      firstClick = element;
      counter = 2;
    } else if (counter == 2) {
      secondClick = element;
      var card1Type = firstClick.getElementsByTagName("i")[0].className;
      var card2Type = secondClick.getElementsByTagName("i")[0].className;
      if (card1Type == card2Type) {
        firstClick.removeEventListener("click", flipOver);
        secondClick.removeEventListener("click", flipOver);
      } else {
        wrong = true;
        setTimeout(proceed, 1000);
      }
      counter = 1;
    }
  }
}

 .deck .card {
  height: 125px;
  width: 125px;
  background: #2e3d49;
  font-size: 0;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
  transform: rotateY(180deg);
  background: #02b3e4;
  cursor: pointer;
  transition-timing-function: linear;
  transition: 0.2s;
  font-size: 33px;
}

 <ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card ">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card ">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
</ul>

1. Спасибо, брат! Брат, могу ли я сделать это с помощью инструкции if else, а не с помощью switch?

2. Рад, что смог помочь! Я отредактировал свой ответ выше, чтобы вместо него использовать блок if-else.

3. Большое спасибо, брат! 🙂

Ответ №2:

выполните поиск в Google, но вы можете использовать localStorage : https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Потому что вы можете установить и получить то, что вы хотите?

1. Я хочу сравнить первую выбранную карту со второй. Вы можете проверить это — fiddle

2. вы можете добавить скрытый класс, например, и если вы нажмете дважды, будет добавлен скрытый класс, и каждый раз, когда вы нажимаете в первый раз, скрытый класс удаляется, вы понимаете, что я имею в виду?