CSS
<style>
.start-button-div {
text-align: center;
margin-bottom: 30px;
}
.start-button {
color: white;
background-color: black;
padding: 10px;
cursor: pointer;
border: solid white 2px;
width: max-content;
height: auto;
}
.card {
cursor: pointer;
width: 150px;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px 10px;
margin-top: 20px;
justify-content: center
}
.card-image {
width: 150px;
height: 150px !important;
border: black solid 5px;
border-radius: 10px;
padding: 10px;
box-sizing: border-box;
background-color: #444444
}
</style>
HTML
<div>
<div class=”start-button-div”>
<button class=”start-button” onclick=”location.reload();”>New Game</button>
</div>
<div class=”result-div”></div>
<div id=”instructions”>
<h4>Get 6 wrong and you lose.</h4>
<h4 id=”wrongText”>Wrong: 0</h4>
</div>
<div class=”grid grid-center card-container”></div>
</div>
JavaScript
<script>
let cardContainer = document.querySelector(‘.card-container’);
let result = document.querySelector(‘.result-div’);
let wrongText = document.querySelector(“#wrongText”);
let imgCollection = [
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
‘{img url}’,
];
function fillRandomNumArray() {
let random = 0;
let duplicate = false;
let randomNumArray = [];
for (let i = 18; i > randomNumArray.length;) {
duplicate = false;
random = Math.ceil(Math.random() * (imgCollection.length – 1));
for (let j = 0; j < 18; j++) {
if (random === randomNumArray[j]) {
duplicate = true;
}
}
if (duplicate === false) {
randomNumArray.push(random);
randomNumArray.push(random);
}
}
shuffleNum(randomNumArray);
}
function shuffleNum(randomNumArray) {
let shuffledArray = [];
while (shuffledArray.length !== 18) {
let random = Math.round(Math.random() * randomNumArray.length);
if (random === randomNumArray.length) {
random–;
}
shuffledArray.push(randomNumArray[random]);
randomNumArray.splice(random, 1);
}
setCards(shuffledArray);
}
function setCards(shuffledArray) {
for (let i = 0; i < shuffledArray.length; i++) {
cardContainer.innerHTML +=
“<div class=’card’><img decoding=’async’ class=’card-image’ src=” + imgCollection[shuffledArray[i]] + ‘></div>’;
}
setTimeout(setMysteryCards, 5000, shuffledArray);
}
function setMysteryCards(shuffledArray) {
cardContainer.innerHTML = ”;
for (let i = 0; i < shuffledArray.length; i++) {
cardContainer.innerHTML +=
“<div class=’card’><img decoding=’async’ class=’card-image’ src='{img url}’></div>”;
}
addCardEvents(cardContainer, shuffledArray);
}
let selectedCount = 0;
let cardOne = ”;
let cardTwo = ”;
function addCardEvents(cardContainer, shuffledArray) {
for (let i = 0; i < shuffledArray.length; i++) {
cardContainer.childNodes[i].addEventListener(‘click’, function () {
cardContainer.childNodes[i].innerHTML =
“<div class=’card’><img decoding=’async’ class=’card-image’ src=” + imgCollection[shuffledArray[i]] + ‘></div>’;
selectedCount++;
if (selectedCount === 1) {
cardOne = imgCollection[shuffledArray[i]];
} else if (selectedCount === 2) {
cardTwo = imgCollection[shuffledArray[i]];
}
compareCards(shuffledArray, cardOne, cardTwo);
});
}
}
let wrong = 0;
function compareCards(shuffledArray, cardOne, cardTwo) {
if (cardOne === cardTwo) {
for (let i = 0; i < shuffledArray.length; i++) {
if (cardContainer.childNodes[i].innerHTML.indexOf(cardOne) !== -1) {
cardContainer.childNodes[i].classList.add(‘matched’);
}
}
} else {
if (cardTwo !== ”) {
wrong++;
wrongText.textContent = “Wrong: ” + wrong;
}
}
if (wrong < 5) {
if (selectedCount > 1) {
setTimeout(resetUnmatchedCards, 1000, shuffledArray);
}
} else {
result.innerHTML = ‘<h2>You Lose!!!</h2>’;
wrong++;
wrongText.textContent = “Wrong: ” + wrong;
cardContainer.innerHTML = ”;
for (let i = 0; i < shuffledArray.length; i++) {
cardContainer.innerHTML +=
“<div class=’card’><img decoding=’async’ class=’card-image’ src=” + imgCollection[shuffledArray[i]] + ‘></div>’;
}
}
}
function resetUnmatchedCards(shuffledArray) {
selectedCount = 0;
cardOne = ”;
cardTwo = ”;
let matchedCards = 0;
for (let i = 0; i < shuffledArray.length; i++) {
if (!cardContainer.childNodes[i].classList.contains(‘matched’)) {
cardContainer.childNodes[i].innerHTML =
“<div class=’card’><img decoding=’async’ class=’card-image’ src='{img url}’></div>”;
}
if (cardContainer.childNodes[i].classList.contains(‘matched’)) {
matchedCards++;
}
}
if (matchedCards === 18) {
result.innerHTML = ‘<h2>You Win!!!<h2>’;
}
}
fillRandomNumArray();
</script>
