Мне нужна помощь в исправлении моего кода
Я новичок в программировании и пытаюсь воспроизвести игру памяти с моими собственными образами, но я не могу заставить вещи работать. кто-нибудь может помочь? вероятно, это очень неправильно, но просто заставить игру начать было бы чем-то работать.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>
recycle Memory Game
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="recycle memory game">
<div class="memory card">
<img class="face of card" src=" img/cup-9.png" dataset-framework="cup"
alt="cup" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/cup-9.png" dataset-framework="cup"
alt="cup" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/green-leaves-54.png" dataset-framework="leaves"
alt="leaves" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/green-leaves-54.png" dataset-framework="leaves"
alt="leaves" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/recycle-bin-20.png" dataset-framework="recycle"
alt="recycle" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/recycle-bin-20.png" dataset-framework="recycle"
alt="recycle" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/trash-bag.png" dataset-framework="trash"
alt="trash" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/trash-bag.png" dataset-framework="trash"
alt="trash" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/trash-can-43.png" dataset-framework="trashcan"
alt="trashcan" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/trash-can-43.png" dataset-framework="trashcan"
alt="trashcan" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/battery-icon.png" dataset-framework="battery"
alt="battery" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
<div class="memory card">
<img class="face of card" src=" img/battery-icon.png" dataset-framework="battery"
alt="battery" />
<img class="back of card" src="img/earth-29.png"
alt="earth" />
</div>
</section>
<script src="scripts.js"></script>
</body>
</html>
const card = document.querySelectorAll('card');
let hasFlippedCard = false;
let lockgame = false;
let firstCard, secondCard;
function flipCard() {
if (lockgame) return;
if (this === firstCard) return;
this.classlist.add('flip');
if (!hasFlippedCard) {
//first pick
hasFlippedCard = true;
firstCard = this;
return;
}
//second click
secondCard = this;
checkForMatch();
}
function checkForMatch() {//do cards match?
if (firstCard.dataset.framework ===
secondCard.dataset.framework) {
disableCards();
//match
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
} else {
unflipcards();
}
}
function disableCards() {
//match
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetgame;
}
function unflipcards() {
lockgame = true;
//no match
setTimeout(() => {
firstCard.classlist.remove('flip');
secondCard.classlist.remove('flip');
resetgame = false;
}, 1500);
}
function resetgame(){
[hasFlippedCard, lockgame] = [false, false];
[firstCard, secondCard] = [null, null];
}
(function shufflecards() {
cards.forEach(card => {
let randomPos = Math.floor(Math.random() * 12);
card.style.order = randomPos;
});
})();
card.forEach(card => card.addEventListener('click' ,flipCard));
/*styles.css*/
*{
padding:0;
margin:0;
box-sizing: border-box;
}
body{
height:100vh;
display: flex;
background: #ffd800;
}
recycle memory game {
height: 650px;
width: 650px;
margin: auto;
display: flex;
flex-wrap:wrap;
perspective: 1000px;
}
card {
height:calc(33.33% - 10px);
width:calc(25% - 10px);
margin:6px;
position:relative;
transform: scale(1);
transform-style:preserve-3d;
transition:transform .6s;
}
card:active{
transform: scale(.95);
transition: transform .6s;
}
card.flip{
transform: rotateY(180deg);
}
front_of_card,
back_of_card {
height:95%;
width:95%;
position:absolute;
padding:15px;
border-radius : 2px;
background: #ff0000;
backface-visibility: hidden;
}
front_of_card{
transform: rotateY('180deg');
}
Что я уже пробовал:
Я использую vs2019, и у меня нет ошибок, когда я анализирую или отлаживаю, но когда я запускаю его, игра не играет.
Sandeep Mewara
В настоящее время, имея ограниченную информацию о том, чем вы поделились, трудно комментировать, что происходит не так.
Вы пробовали отлаживать и видеть, находятся ли шаги в нужной последовательности и удерживают ли значения, как вы планируете/ожидаете?
Richard MacCutchan
-Трес, наверное, сильно ошибается"
Без дополнительной информации невозможно многое предложить. Вам нужно найти точку, в которой вы сможете объяснить то, что не происходит против того, что должно происходить.
Gerry Schmitz
Будучи "новичком в кодировании", это выглядит довольно амбициозно. По - видимому, существует полное разъединение между HTML и JavaScript. Если вы скопировали его, вы что-то упускаете.