I am new to coding and I'm trying to replicate a memory game with my own images but I cant get things to run. can anyone help? thres probably a lot wrong but just getting the game to start would be something to work from.
<!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) {
hasFlippedCard = true;
firstCard = this;
return;
}
secondCard = this;
checkForMatch();
}
function checkForMatch() {
if (firstCard.dataset.framework ===
secondCard.dataset.framework) {
disableCards();
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
} else {
unflipcards();
}
}
function disableCards() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetgame;
}
function unflipcards() {
lockgame = true;
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');
}
What I have tried:
I'm using vs2019 and I have no errors when I analyse or debug but when I run it the game doesn't play.