我正在尝试创建一个记忆游戏。当卡的价格相等时,我希望它们回头。但是,当我尝试实现此功能时,只会将第一张卡向后翻转,而不会翻转第二张卡。

我尝试从容器div访问卡。

我希望记忆游戏中选中的两个卡如果不匹配就会翻转。但是,如果不匹配,则只有一个翻转过来。



let box_inner = document.querySelectorAll('.box-inner');
let box_back = document.querySelectorAll('.box_back');
let box_front = document.querySelectorAll('.box-front');

const images = [{
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/00EFF/FFF",
    name: 'FinnScreaming'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/BF39ED/FFF",
    name: 'JakeFace'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/A3B90F/FFF",
    name: 'LemonGrab'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/DFE9FA/FFF",
    name: 'Marceline'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/F28FCD/FFF",
    name: 'BMO'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  },
  {
    url: "https://via.placeholder.com/150/FF000/FFF",
    name: 'Rainicorn'
  }


]


let choices = [];
const container = document.querySelector('.container');

function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
    box_back[i].style.backgroundImage = `url(${images[i].url})`;
    box_front[i].dataset.name = images[i].name;
    box_front[i].dataset.id = i;
    box_back[i].dataset.name = images[i].name;




  }

}
ShuffleSquares();



function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    if (choices[0].dataset.name === choices[1].dataset.name) {
      console.log('winner');
      choices = [];
    } else {
      console.log('Loser');
      choices = [];
      Match();
    }
  }
}

function Match() {
  for (var i = 0; i < box_inner.length; i++) {
    if (box_inner[i].classList.contains('is-flipped')) {
      box_inner[i].classList.remove('is-flipped');
    }
  }
}

function shuffle(array) {
  var currentIndex = array.length;
	var temporaryValue, randomIndex;

	// While there remain elements to shuffle...
	while (0 !== currentIndex) {
		// Pick a remaining element...
		randomIndex = Math.floor(Math.random() * currentIndex);
		currentIndex -= 1;

		// And swap it with the current element.
		temporaryValue = array[currentIndex];
		array[currentIndex] = array[randomIndex];
		array[randomIndex] = temporaryValue;
	}

	return array;


}

container.addEventListener('click', FindAPair);

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

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

最佳答案

问题中的代码遍历所有卡片(包括匹配的卡片):

for (var i = 0; i < box_inner.length; i++) {
  if (box_inner[i].classList.contains('is-flipped')) {
    box_inner[i].classList.remove('is-flipped');
  }
}


要翻转不匹配的卡,您只需要在存储它们的阵列上循环,即choices

choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));


您也不会给浏览器机会将不匹配的卡片显示给用户,因为您将它们翻转回没有超时。我为您添加了它,但是在超时期间我不小心丢弃用户的click,您可能想要自己添加它:



let choices = [];
function FindAPair(e) {
  if (e.target.className !== 'container') {
    e.target.parentElement.classList.add('is-flipped');
    if (choices.length < 2) {
      choices.push(e.target);
    }
  }
  if (choices.length == 2) {
    setTimeout(checkChoices, 500);
  }
}

function checkChoices() {
  if (choices[0].dataset.name === choices[1].dataset.name) {
    console.log('winner');
    choices = [];
  } else {
    console.log('Loser');
    choices.forEach((elt) => elt.parentElement.classList.remove('is-flipped'));
    choices = [];
  }
}

(function init() {
  let box_inner = document.querySelectorAll('.box-inner');
  let box_back = document.querySelectorAll('.box_back');
  let box_front = document.querySelectorAll('.box-front');

  const images = [{
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/00EFF/FFF",
      name: 'FinnScreaming'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/BF39ED/FFF",
      name: 'JakeFace'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/A3B90F/FFF",
      name: 'LemonGrab'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/DFE9FA/FFF",
      name: 'Marceline'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/F28FCD/FFF",
      name: 'BMO'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  },
  {
      url: "https://via.placeholder.com/150/FF000/FFF",
      name: 'Rainicorn'
  }
  ];

  function ShuffleSquares() {
  shuffle(images);

  for (var i = 0; i < images.length; i++) {
      box_back[i].style.backgroundImage = `url(${images[i].url})`;
      box_front[i].dataset.name = images[i].name;
      box_front[i].dataset.id = i;
      box_back[i].dataset.name = images[i].name;




  }

  }
  ShuffleSquares();

  function shuffle(array) {
  var currentIndex = array.length;
      var temporaryValue, randomIndex;

      // While there remain elements to shuffle...
      while (0 !== currentIndex) {
          // Pick a remaining element...
          randomIndex = Math.floor(Math.random() * currentIndex);
          currentIndex -= 1;

          // And swap it with the current element.
          temporaryValue = array[currentIndex];
          array[currentIndex] = array[randomIndex];
          array[randomIndex] = temporaryValue;
      }

      return array;


  }
  const container = document.querySelector('.container');
  container.addEventListener('click', FindAPair);
})();

body {
  padding: 70px;
}

.container {
  width: 50%;
  height: 400px;
  display: grid;
  margin: 0 auto;
  margin-top: 60px;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  /* background-image:linear-gradient(#def5ff,  #f2fbff); */
  background-image: url('https://wallpapercave.com/wp/FMNuOQx.jpg');
  background-size: cover;
  box-shadow: 5px 5px 5px gainsboro;
  padding: 30px;
}

.box {
  perspective: 1000px;
  position: relative;
}

.box-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.box-inner.is-flipped {
  transform: rotateY(180deg);
}

.box-c {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.box-front {
  background-color: #2dabe3;
}

.box_back {
  transform: rotateY(180deg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

<div class="container">
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

      </div>
    </div>
  </div>
  <div class="box">
    <div class="box-inner">
      <div class=" box-c box-front"></div>
      <div class=" box-c box_back">

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

关于javascript - 尝试从存储卡问题中删除类(class),我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57528553/

10-16 22:28
查看更多