Experience a simple browser memory game where you must flip all matching cards to emerge victorious.
The glitch :
In the game, if you click quickly enough, you can uncover more than two cards at a time.
I've spent ample time attempting to rectify this issue on my own, but it has proven to be quite challenging. Any assistance in resolving this bug would be greatly appreciated since I am still relatively new to JavaScript and struggle with fixing these fundamental errors.
Game files:
HTML:
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>My App</title>
<link rel="stylesheet" href="css/game.css" />
</head>
<body>
<button class="Change User" onclick="change(this)">Change User</button>
<div class="header">
<img src="img/layout/logo.png">
<h1>Memory Monsters</h1>
<p id="Play Again"></p>
</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="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>
<script src="js/game.js"></script>
</body>
</html>
Javascript:
var getElementsByClassName = prompt('What is your name?');
window.localStorage.setItem('name', 'dan');
function change(username) {
prompt('What is your name?');
}
// Global variables keeping track of the game state
var elPreviousCard = null;
var flippedCouplesCount = 0;
// Constant value for total number of card pairs
var TOTAL_COUPLES_COUNT = 3;
// Load audio file
var audioWin = new Audio('sound/win.mp3');
// Function called when a card is clicked
function cardClicked(elCard) {
// Exit function if user clicks on an already flipped card
if (elCard.classList.contains('flipped')) {
return;
}
// Flip the card
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() {
elCard.classList.remove('flipped');
elPreviousCard.classList.remove('flipped');
elPreviousCard = null;
}, 1000)
} else {
flippedCouplesCount++;
elPreviousCard = null;
if (TOTAL_COUPLES_COUNT === flippedCouplesCount) {
audioWin.play();
document.getElementById("Play Again").innerHTML =
'<button onclick="resetCard();">Play Again</button>';
}
}
}
}
function resetCard() {// to erase the flipped classes
var cardclass = document.getElementsByClassName("card");
for (i = 0; i < cardclass.length; i++) {
cardclass[i].classList.remove("flipped");
document.getElementById("Play Again").innerHTML = "";
}
}
CSS:
.header {
background-color: lightblue;
padding: 20px;
border-bottom: 10px solid darkcyan;
color:darkcyan;
font-size: 1.5em;
text-align: center;
}
.header img {
float:right;
}
.card {
background-color: pink;
height: 165px;
width: 165px;
float: left;
margin: 5px;
}
.card img {
position: absolute;
}
.flipped .back {
display: none;
}