QuerySelectorAll не будет работать для изменения порядка в этом списке - PullRequest
Новая
       19

QuerySelectorAll не будет работать для изменения порядка в этом списке

0 голосов
/ 24 сентября 2019

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

У меня проблемы с перетасовкой карт.Карты будут хорошо перетасовываться, если я использую класс «селектор» из DOM, но я планирую использовать их в качестве значка выделения / выбора, когда пользователь переключает карты.Поэтому мне нужны сами карты для перемешивания.

Не против того, что большая часть этого кода предназначена для щелчка мышью.Я все еще нахожусь в процессе его модификации, и мне нужно сначала иметь возможность перетасовать карты и покинуть классы выбора.

Вот фрагмент моего HTML: 

    <section class='gameContainer'>
     <div class='game'>
        <div class='row'>
          <div class='selector'>
            <div class='card' data-framework='star'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='mushroom'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='flower'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='coinTen'>
              <img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
              <img class='backSide'src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='chest'>
              <img class='imageWithNum'src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
              <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
          <div class='selector'>
            <div class='card' data-framework='mushroom'>
              <img class='frontSide'src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
              <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
            </div>
          </div>
        </div>
    </div>
    </section>

Вот мой CSS: 

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #000;
}

#titleContainer {
  border: solid 0px red;
  width: 50%;
  margin: auto;
  background-color: #ffe400;
  padding: 20px;
}
#title1 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  color: #1f57b8;
  text-align: center;
  text-shadow: 1px 2px 0px #ff0000;
}
#title2 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #ff0000;
  text-shadow: 1px 2px 0px #000;
}

.gameContainer {
  border: solid 1px black;
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 10px,
    #b30000 10px,
    #b30000 20px
  );
  width: 640px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.game {
  background-color: #000;
  width: 90%;
  height: 90%;
}
.row {
  border: solid 0px red;
  width: 100%;
  height: 33.333%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  perspective: 1000px;
}
.selector, .selectorActive {
  box-sizing: content-box;
  border: solid 8px black;
  border-radius: 6px;
  position: relative;
  width: 15%;
  height: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectorActive {
  border: solid 8px orange;
}

.card {
  border: solid 0px aqua;
  position: absolute;
  display: flex;
  width: 90%;
  height: 89%;
  transform-style: preserve-3d;
  transition: transform .5s;
}

.card.flip {
  transform: rotateY(180deg);
}

.frontSide, .backSide{
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 24px 9px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
}
.frontSide {
  transform: rotateY(180deg);
}

.imageWithNum {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 29px 14px 0px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.backSide {
  background-color: #fff;
}

.cardSelector {
  border: solid 8px #ff7b00;
}

Вот мой JavaScript.Я беру классы карточек в начале скрипта, затем в конце есть функция перемешивания.Кроме того, не против того, чтобы цикл For начинался с 1, а не с 0. Это было предназначено: 

const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard(){
  // This will disable any clicks that occur before the non-matched cards reset
  if(lockBoard)
    return;
  // This will prevent a double click on the same card to obtain a match
  if(this === firstCard)
    return;

  this.classList.add('flip');

  if(!hasFlippedCard){
    // First card is clicked
    hasFlippedCard = true;
    firstCard = this;

    return;
  } 

// Second card is clicked
secondCard = this;

// Check if cards match
checkForMatch();    
}


//This function will check if the two cards chosen match
function checkForMatch(){
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
  isMatch ? disableCards() : unflipCards();
}

//This function will disable the chosen cards whenever there's a match
function disableCards(){
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

//This function will reset the cards if they don't match
function unflipCards(){
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

function resetBoard(){
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

(function shuffle(){

  for(let x = 1; x < cards.length; x++){
    let randomPos = Math.floor(Math.random() * 17);
    cards[x].style.order = randomPos;
  }

})();

cards.forEach(card => card.addEventListener('click', flipCard));

Также да, я пытаюсь воссоздать игру с переворотом карт от Super Mario Bros. 3.: D

1 Ответ

0 голосов
/ 24 сентября 2019

Когда вы указываете порядок, он применяется к дочернему элементу гибкого контейнера.Согласно спецификации :

Содержимое гибкого контейнера состоит из нуля или более гибких элементов: каждый дочерний элемент гибкого контейнера становится гибким элементом.

Ваши элементы .card не являются дочерними элементами гибкого контейнера.Они его потомки, но они дети элементов .selector.Если вы примените порядок к элементам с классом selector, я думаю, что он должен работать.

Обратите внимание, что вашей первой картой всегда будет звезда, так как вы запускаете петлю for в x = 1.Это может быть преднамеренным, но я просто хотел указать на это. 

const cards = document.querySelectorAll('.card');

let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;

function flipCard() {
  // This will disable any clicks that occur before the non-matched cards reset
  if (lockBoard)
    return;
  // This will prevent a double click on the same card to obtain a match
  if (this === firstCard)
    return;

  this.classList.add('flip');

  if (!hasFlippedCard) {
    // First card is clicked
    hasFlippedCard = true;
    firstCard = this;

    return;
  }

  // Second card is clicked
  secondCard = this;

  // Check if cards match
  checkForMatch();
}


//This function will check if the two cards chosen match
function checkForMatch() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
  isMatch ? disableCards() : unflipCards();
}

//This function will disable the chosen cards whenever there's a match
function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);

  resetBoard();
}

//This function will reset the cards if they don't match
function unflipCards() {
  lockBoard = true;

  setTimeout(() => {
    firstCard.classList.remove('flip');
    secondCard.classList.remove('flip');

    resetBoard();
  }, 1500);
}

function resetBoard() {
  [hasFlippedCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

(function shuffle() {
  let s = document.querySelectorAll(".selector");
  for (let x = 1; x < s.length; x++) {
    let randomPos = Math.floor(Math.random() * 17);
    s[x].style.order = randomPos;
  }

})();

cards.forEach(card => card.addEventListener('click', flipCard));
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  background-color: #000;
}

#titleContainer {
  border: solid 0px red;
  width: 50%;
  margin: auto;
  background-color: #ffe400;
  padding: 20px;
}

#title1 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  color: #1f57b8;
  text-align: center;
  text-shadow: 1px 2px 0px #ff0000;
}

#title2 {
  font-family: '8BITWONDERNominal';
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: #ff0000;
  text-shadow: 1px 2px 0px #000;
}

.gameContainer {
  border: solid 1px black;
  background: repeating-linear-gradient( -45deg, #fff, #fff 10px, #b30000 10px, #b30000 20px);
  width: 640px;
  height: 500px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.game {
  background-color: #000;
  width: 90%;
  height: 90%;
}

.row {
  border: solid 0px red;
  width: 100%;
  height: 33.333%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 20px;
  perspective: 1000px;
}

.selector,
.selectorActive {
  box-sizing: content-box;
  border: solid 8px black;
  border-radius: 6px;
  position: relative;
  width: 15%;
  height: 110%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.selectorActive {
  border: solid 8px orange;
}

.card {
  border: solid 0px aqua;
  position: absolute;
  display: flex;
  width: 90%;
  height: 89%;
  transform-style: preserve-3d;
  transition: transform .5s;
}

.card.flip {
  transform: rotateY(180deg);
}

.frontSide,
.backSide {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 24px 9px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
}

.frontSide {
  transform: rotateY(180deg);
}

.imageWithNum {
  border: solid 0px deeppink;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 29px 14px 0px;
  background-color: #ffd1d1;
  backface-visibility: hidden;
  transform: rotateY(180deg);
}

.backSide {
  background-color: #fff;
}

.cardSelector {
  border: solid 8px #ff7b00;
}
<section class='gameContainer'>
  <div class='game'>
    <div class='row'>
      <div class='selector'>
        <div class='card' data-framework='star'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1A_zvQyMfZtwBqiVbYifebM07R15dUVD-'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='mushroom'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='flower'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1Vae7dDSTQmvFlW0hoODvud_Y8_m-VVJk'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='coinTen'>
          <img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1aTtc4B_GK_EbUyk6Uhl2HFh7uZrZLahr'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='chest'>
          <img class='imageWithNum' src='https://drive.google.com/uc?export=view&id=1CYWq7iEShB2YG3bQPUCbihsW9_vzgEL_'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
      <div class='selector'>
        <div class='card' data-framework='mushroom'>
          <img class='frontSide' src='https://drive.google.com/uc?export=view&id=1VgbaVqfGrAw_RefRbMpaKNW4yuQRA5Lm'>
          <img class='backSide' src='https://drive.google.com/uc?export=view&id=1YUCKsNqGAr81BMW1s8utU3zZFGzvm2uz'>
        </div>
      </div>
    </div>
  </div>
</section>
...