Игра, которая состоит в касании двух скрытых писем, и если это те же самые, они раскрываются. Игра заканчивается, когда все открытые.
Ну хорошо у меня есть эта функция, которая подтверждает, что, если все раскрыты, тогда он выражает простую бдительность "Иоу Вина"
function checkWin()
{
var testing = Array.from(cards)
// checkIfAll comprueba si estás destapadas:
const checkIfAll = testing.every(card => card.classList.contains('flip'));
// Si están destapadas emite la alerta:
if (checkIfAll){
alert("You win!")
}
}
Проблема состоит в том, что, если я размещаю функцию checkWin () прямо после, что последнее письмо было раскрыто, бдительность появляется до того, как последнее письмо раскрылось, так как он опаздывает немного, потому что у него есть переход css, из-за которого я помещаю ее в setTimeOut 2 секунд:
function blockCard() {
firstCard.removeEventListener('click', doFlip);
secondCard.removeEventListener('click', doFlip);
firstCard.classList.add('no-border')
audio.play();
secondCard.classList.add('no-border')
// Comprueba que el jugador ha ganado, pero con un retraso de 2 segundos:
setTimeout(checkWin, 2000)
resetBoard();
}
Проблема сейчас состоит, в том, что поместив ему задержку 2 секунд, он кажется, что тогда функция blockCard () работает снова? И тогда бдительность появляется снова? Я не уверен.
Это код с меньшим количеством писем, полный код может быть виден здесь (без изображений): https://jsfiddle.net / c8yp35jg /
let hasFlippedCard = false;
let lockBoard = false;
let firstCard;
let secondCard;
const cards = document.querySelectorAll('.card');
// Win celebration:
function checkWin() {
var testing = Array.from(cards)
const checkIfAll = testing.every(card => card.classList.contains('flip'));
if (checkIfAll) {
debugger;
alert("You win!")
}
}
// Effect function:
function doFlip() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flip');
if (!hasFlippedCard) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function blockCard() {
firstCard.removeEventListener('click', doFlip);
secondCard.removeEventListener('click', doFlip);
firstCard.classList.add('no-border')
audio.play();
secondCard.classList.add('no-border')
// Comprueba que el jugador ha ganado, pero con un retraso de 2 segundos:
setTimeout(checkWin, 2000)
resetBoard();
}
function checkForMatch() {
let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;
isMatch ? blockCard() : resetCard();
}
function resetCard() {
lockBoard = true;
setTimeout(() => {
firstCard.classList.remove('flip');
secondCard.classList.remove('flip');
resetBoard();
}, 550);
}
function resetBoard() {
[hasFlippedCard, lockBoard] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shuffle() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
cards.forEach(card => card.addEventListener('click', doFlip));
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
@import url("https://fonts.googleapis.com/css?family=Arimo&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: no-repeat url("../img/Purpink.jpg");
height: 100vh;
position: relative;
}
#game-container {
width: 500px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
perspective: 1000px;
}
.card {
width: calc(25% - 10px);
height: calc(47% - 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);
}
.no-border {
box-shadow: none;
transition: box-shadow 1.3s ease-in-out;
}
.card:active {
transform: scale(0.85);
transition: transform .1.5s;
}
.card.flip {
transform: rotateY(180deg);
}
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
backface-visibility: hidden;
}
.front {
transform: rotateY(180deg);
}
h1 {
font-family: 'Poppins', sans-serif;
color: #F8F0FB;
text-align: center;
margin-bottom: 10px;
}
/* Button Styling */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button {
display: inline-block;
position: relative;
background: none;
border: none;
color: #F8F0FB;
font-size: 19px;
cursor: pointer;
margin-top: 5px;
margin-left: 85vh;
background: rgba(0, 0, 0, 0.09);
}
span {
display: block;
padding: 25px;
}
button::before,
button::after {
content: "";
width: 0;
height: 2px;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
span::before,
span::after {
content: "";
width: 2px;
height: 0;
position: absolute;
transition: all 0.2s linear;
background: #F8F0FB;
}
button:hover::before,
button:hover::after {
width: 100%;
}
button:hover span::before,
button:hover span::after {
height: 100%;
}
.btn-2::before,
.btn-2::after {
transition-delay: 0s;
}
.btn-2 span::before,
.btn-2 span::after {
transition-delay: 0.2s;
}
.btn-2::before {
right: 0;
top: 0;
}
.btn-2::after {
left: 0;
bottom: 0;
}
.btn-2 span::before {
left: 0;
top: 0;
}
.btn-2 span::after {
right: 0;
bottom: 0;
}
.btn-2:hover::before,
.btn-2:hover::after {
transition-delay: 0.2s;
}
.btn-2:hover span::before,
.btn-2:hover span::after {
transition-delay: 0s;
}
.modal {
display: none;
padding-top: 150px;
z-index: 1;
width: 50%;
height: 50%;
background-color: #fefefe;
height: 300px;
position: absolute;
top: 50%;
left: 25%;
;
animation-name: animatetop;
animation-duration: 0.8s
}
Matching Game