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