I recently completed a project on creating a matching game. After all the cards are successfully matched and the game finishes, a congratulatory modal pops up. However, I encountered an issue where the modal would not close after clicking the "Play Again" button.
Below is the index.html code snippet for the modal window:
<!--Add Bootstrap Modal Alert Window-->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal-label" aria-hidden="true">
<div class="modal-dialog">
<!--Modal Content-->
<div class="modal-content">
<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-title" id="myModal-label">Congratulations!!!</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--Modal Body-->
<div class="modal-body">
<p id="myText"></p>
</div>
<!--Modal Footer-->
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-success btn-default" onclick="gameStart(), $rating.removeClass('fa-star-o').addClass('fa-star');">Play Again!</button>
</div> <!--modal footer-->
</div> <!--modal-content-->
</div> <!--modal-dialog-->
</div> <!--modal-->
Additionally, here is the relevant javascript function for the modal:
function gameOver(moves, score) {
$('#myText').text(`Time: ${second} Seconds, Your Move: ${moves} Moves, Total
Score: ${score}, Well done!!!`);
$('#myModal').toggle();
}
if (totalCard === match) {
rating(moves);
let score = rating(moves).score;
setTimeout(function () {
gameOver(moves, score);
},800);
}
If you're interested in checking out my matching game project, feel free to visit the link below: