Add score in memory game in Javascript

Asked

Viewed 86 times

-3

Good evening I need help adding to my points system code. When I hit two cards make even 2 in 2 points and need to appear on the game screen? Follow code below

<!DOCTYPE html>
<html lang="PT-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo da Memória</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="cardboard"></div>
    <script src="main.js"></script>
    
</body>
</html>

const cardBoard = document.querySelector("#cardboard");
const images = [
    "baleia.svg",
    "cachorro.svg",
    "cavalo.svg",
    "pinguim.svg",
    "porco.svg",
    "urso.svg",
];

let cardHTML = '';

images.forEach(img => {
    cardHTML += `
    <div class="memory-card" data-card="${img}">
        <img class="front-face" src="img/${img}">
        <img class="back-face" src="img/arvore.svg">
    </div>
    `;
});

cardBoard.innerHTML = cardHTML + cardHTML;

const cards = document.querySelectorAll(".memory-card");
let firstCard, secondCard;
let lockCard = false;

function flipCard(){

    if(lockCard) return false;
    this.classList.add("flip");

    if(!firstCard){
       firstCard = this; 

       return false;
    }
    
    secondCard = this;

    checkForMatch();
}

function checkForMatch(){

    let isMatch = firstCard.dataset.card === secondCard.dataset.card;

    !isMatch ? disableCards() : resetCards(isMatch);
}

function disableCards() {
    lockCard = true;

    setTimeout(() => {
    firstCard.classList.remove("flip");
    secondCard.classList.remove("flip");
    
    [firstCard, secondCard, lockCard ]  = [null, null, false];
   }, 1000);
    
}

(function shuffle(){
    cards.forEach(card => {
        let rand = Math.floor(Math.random() * 12);
        card.style.order = rand;
    })
})

function resetCards(isMatch = false) {
    if(isMatch){
        firstCard.removeEventListener('click', flipCard);
        secondCard.removeEventListener('click', flipCard);
    }
    [firstCard, secondCard, lockCard ] = [null, null, false];
}

cards.forEach(card => card.addEventListener("click", flipCard));

* {
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
}

body {
    height: 100vh;
    display: flex;
    background: #e4c515;
}

#cardboard{
    width: 500px;
    height: 500px;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
}

.memory-card {
    width: calc(25% - 10px);
    height: 33%;
    margin: 5px;
    transform-style: preserve-3d;
    transition: 0.3s;
    position: relative;
}

.memory-card:active {
    transform: scale(0.97);
}

.memory-card.flip {
    transform: rotateY(180deg);
}

.front-face, 
.back-face {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: #675a10;
    position: absolute;

}

.front-face{
    transform: rotateY(180deg);
}
javascript css html5

1 answer

1

The problem you’re having is with logic or with implementation? If the problem is the implementation: what have you tried to do and how far have you got? Try to specify the problem better.

If the problem is logic: you can simply create a variable pontos , initialize it at 0, and keep adding +2 whenever the user finds a pair, there in function checkForMatch, for example.

  • 1

    It is a design mistake, one does not make a game, even simple, only then after ready to add the gamification system. It is there in taking requirements that the correction should be made. But I doubt that author has done any planning.

Browser other questions tagged javascript css html5

You are not signed in. Login or sign up in order to post.