CODEWITHSUNDEEP
javascript
lironzaa
lironzaa

Reputation: 544

JS memory card game - how to prevent user flipping more then 2 cards at the same time

how to prevent the user flipping more then 2 cards at the same time, im using set timeout when the user make wrong match and during the set timeout if he clicks fast he can flip more then 2 cards. how can i prevent it?

i tried to make var isProcessing = true and when the user makes wrong match write the following code :

if (isProcessing ) {
    return;
}

but it doesn't work

game.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>My App</title>
  <link rel="stylesheet" href="css/game.css" />
</head>

<body>
  <div class="header">
    <img src="img/layout/logo.png">
    <h1>Memory Monsters</h1>
  </div>
  <div class="board">
    <div class="card" data-card="1" onclick="cardClicked(this)">
      <img src="img/cards/1.png">
      <img class="back" src="img/cards/back.png">
    </div>
    <div class="card" data-card="7" onclick="cardClicked(this)">
      <img src="img/cards/7.png">
      <img class="back" src="img/cards/back.png">
    </div>
    <div class="card" data-card="1" onclick="cardClicked(this)">
      <img src="img/cards/1.png">
      <img class="back" src="img/cards/back.png">
    </div>
    <div class="card" data-card="7" onclick="cardClicked(this)">
      <img src="img/cards/7.png">
      <img class="back" src="img/cards/back.png">
    </div>
    <div class="card" data-card="5" onclick="cardClicked(this)">
      <img src="img/cards/5.png">
      <img class="back" src="img/cards/back.png">
    </div>
    <div class="card" data-card="5" onclick="cardClicked(this)">
      <img src="img/cards/5.png">
      <img class="back" src="img/cards/back.png">
    </div>
  </div>

  <div class="homepage">
    <h2>Go back to homepage</h2>
    <a href="index.html">Homepage</a>
    <br>
    <br>
    <button onclick="playAgain()" id="playAgainBtn">Play Again</button>
    <br>
    <p id="bestScore">Best score is :</p>
  </div>

  <script src="js/game.js"></script>
</body>

</html>

game.js

var elPreviousCard = null;
var flippedCouplesCount = 0;

var TOTAL_COUPLES_COUNT = 3;

var audioWin = new Audio('sound/win.mp3');
var rightMatch = new Audio('sound/right.mp3');
var wrongMatch = new Audio('sound/wrong.mp3');
var playAgainBtn = document.getElementById('playAgainBtn');
var timerStart = 0;
var startTime = null;
var bestScoreParagraph = document.getElementById('bestScore');

if (localStorage.getItem('bestScore') !== null) {
    bestScoreParagraph.innerHTML = `Best score is : ${localStorage.getItem('bestScore')}`;
}

function shuffleBoard() {
    var board = document.querySelector('.board');
    for (var i = board.children.length; i >= 0; i--) {
        board.appendChild(board.children[Math.random() * i | 0]);
    }
}

function playAgain() {
    var cards = document.getElementsByClassName('card');
    for (var i = 0; i < cards.length; i++) {
        cards[i].classList.remove('flipped');
    }
    playAgainBtn.style.display = 'none';
    timerStart = 0;
    startTime = null;
    shuffleBoard();
}

function cardClicked(elCard) {
    timerStart += 1;
    if (timerStart === 1) {
        startTime = new Date();
    }
    if (elCard.classList.contains('flipped')) {
        return;
    }
    // Flip it
    elCard.classList.add('flipped');

    if (elPreviousCard === null) {
        elPreviousCard = elCard;

    } else {
        var card1 = elPreviousCard.getAttribute('data-card');
        var card2 = elCard.getAttribute('data-card');

        if (card1 !== card2) {
            setTimeout(function () {
                wrongMatch.play();
                elCard.classList.remove('flipped');
                elPreviousCard.classList.remove('flipped');
                elPreviousCard = null;
            }, 1000)

        } else {
            rightMatch.play();
            flippedCouplesCount++;
            elPreviousCard = null;

            if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
                var endTime = new Date();
                var diff = endTime.getTime() - startTime.getTime();
                var seconds = Math.floor(diff / (1000));
                audioWin.play();
                playAgainBtn.style.display = 'block';
                if (localStorage.getItem('bestScore') === null) {
                    localStorage.setItem('bestScore', seconds);
                    bestScoreParagraph.innerHTML = `Best score is : ${seconds}`;
                }
                if (localStorage.getItem('bestScore') > seconds) {
                    localStorage.setItem('bestScore', seconds);
                    bestScoreParagraph.innerHTML = `Best score is : ${seconds}`;
                }
                flippedCouplesCount = 0;
            }

        }

    }

}

how to solve this issue?

Upvotes: 2

Views: 1267

Answers (1)

Bruno Monteiro
Bruno Monteiro

Reputation: 4519

I think your isProcessing idea is a good solution. You need to put it here:

 // No match, schedule to flip them back in 1 second
 if (card1 !== card2) {
     isProcessing = true; // SET IS PROCESSING BEFORE TIMER
     setTimeout(function () {
         wrongMatch.play();
         elCard.classList.remove('flipped');
         elPreviousCard.classList.remove('flipped');
         elPreviousCard = null;
         isProcessing = false; // SET IS NOT PROCESSING AFTER TIME
     }, 1000)

And in your click function:

function cardClicked(elCard) {
    if (isProcessing) { return; }

Upvotes: 1

Related Questions