有人能帮我在我的卡片记忆游戏中匹配所有卡片的时候添加一个“赢”的提示吗?
我是编程新手。我只是对功能没有完全的理解。
我一点击一张卡就会弹出一个提示,但不是在它们都匹配之后。
const cards = document.querySelectorAll('.memory-card');
/*Create two variables using let: hasFlippedCard and lockBoard. Both should be false*/
let hasFlippedCard = false;
let lockBoard = false;
let firstCard, secondCard;
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
// first click
hasFlippedCard = true;
firstCard = this;
return;
}
// second click
secondCard = this;
checkForMatch();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? disableCards() : unflipCards();
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
}
function unflipCards() {
lockBoard = true;
setTimeout(() => {
/*Replace the # symbols with the appropriate class*/
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 1500);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
/*Replace # with the appropriate numeric value for your game*/
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
/*Replace # with the appropriate event listener*/
cards.forEach(card => card.addEventListener('click', flipCard));
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pokemon Match Game</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
background: #14A8DE;
}
.memory-game {
width: 640px;
height: 640px;
margin: auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.memory-card {
width: calc(25% - 10px);
height: calc(33.333% - 10px);
margin: 5px;
position: relative;
transform: scale(1);
transform-style: preserve-3d;
transition: transform .5s;
box-shadow: 1px 1px 1px rgba(0,0,0,.3);
background-color: #c0c0c0;
border-radius: 15px;
}
.memory-card:active {
transform: scale(0.97);
transition: transform .2s;
}
.memory-card.flip {
transform: rotateY(180deg);
}
.front-face,
.back-face {
width: 100%;
height: 100%;
padding: 20px;
position: absolute;
border-radius: 5px;
background: #1c7cc;
backface-visibility: hidden;
}
.front-face {
transform: rotateY(180deg);
}
</style>
</head>
<a class="HOME" href="index.html">HOME</a>
<style>
.clickMe {
-moz-appearance: button;
-ms-appearance: button;
-o-appearance: button;
-webkit-appearance: button;
appearance: button;
text-decoration: none;
color: #FFC68A;
padding: 0.2em 0.4em;
}
</style>
<body>
<!-- water type -->
<section class="memory-game">
<div class="memory-card" data-framework="water">
<img class="front-face" src="images/water.svg" alt="water type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="water">
<img class="front-face" src="images/water.svg" alt="water type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<!-- dark type -->
<div class="memory-card" data-framework="dark">
<img class="front-face" src="images/dark.svg" alt="dark type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="dark">
<img class="front-face" src="images/dark.svg" alt="dark type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<!-- poison type -->
<div class="memory-card" data-framework="poison">
<img class="front-face" src="images/poison.svg" alt="poison type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="poison">
<img class="front-face" src="images/poison.svg" alt="poison type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<!-- grass type -->
<div class="memory-card" data-framework="grass">
<img class="front-face" src="images/grass.svg" alt="grass type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="grass">
<img class="front-face" src="images/grass.svg" alt="grass type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<!-- fire type -->
<div class="memory-card" data-framework="fire">
<img class="front-face" src="images/fire.svg" alt="fire type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="fire">
<img class="front-face" src="images/fire.svg" alt="fire type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<!-- electric -->
<div class="memory-card" data-framework="electric">
<img class="front-face" src="images/electric.svg" alt="electric type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
<div class="memory-card" data-framework="electric">
<img class="front-face" src="images/electric.svg" alt="electric type" />
<img class="back-face" src="images/cardback.svg" alt="Pokeball" />
</div>
</section>
<script src="JS/scripts.js"></script>
</body>
</html>
1条答案
按热度按时间vmdwslir1#
没有要检查的代码:
我自己制作了一套卡片,只有4张,作为一个例子就足够了。我的代码添加了一个用于卡片总数的新变量、一个unflipAll函数和一个警报。
我已经添加了要解释的注解,以及一些控制台输出以显示正在发生的事情。
在我的例子中,卡1和卡2是相同的,所以卡3和卡4是相同的。