Reputation: 544
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
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