diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md index dce57e5..9fc2d33 100644 --- a/CONTRIBUTORS.md +++ b/CONTRIBUTORS.md @@ -14,6 +14,17 @@
+ + + Yogesh Kumar Sai +
+ + Yogesh Kumar Sai + + +
+ + Harsh Narayan
@@ -23,6 +34,7 @@
+ Lovedeep singh kamal @@ -34,6 +46,5 @@ - diff --git a/index.html b/index.html index 60e75fa..4fc557f 100644 --- a/index.html +++ b/index.html @@ -71,7 +71,13 @@

card front face card cover - +
+
+

hurrah! you did it

+

Taken Time:

+ +
+
- \ No newline at end of file + diff --git a/index.js b/index.js index da6ae3b..97e2c77 100644 --- a/index.js +++ b/index.js @@ -1,123 +1,193 @@ -function restartGame(){ - window.location.reload() -} - -// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs -(() => { - const cards = document.querySelectorAll('.memory-card') - const restartBtn = document.querySelector('#restart-btn') - const timer = document.querySelector('#timer') - const bestTimer = document.querySelector('#best--timer'); - //retrieve best score from the local storage - let bestScore = localStorage.getItem("memory-game-best-score"); - //initialise with the best score - bestTimer.innerHTML = "" + (bestScore == null ? "-" : bestScore) + ""; - let counter = 0; - //increasing the counter - - const interval = setInterval(function(){ - counter++; - console.log() - timer.innerHTML = "" + counter + ""; - }, 1000); - - // Storing image sources for list of cards - // Storing it as a list and not a matrix to make it a bit difficult to map list to the 3x4 grid - const cardImageSrcs = [ - 'images/cards/inosuke.png', - 'images/cards/nezuko.png', - 'images/cards/rengoku.png', - 'images/cards/mask.png', - 'images/cards/tanjiro.png', - 'images/cards/zenitsu.png', - 'images/cards/inosuke.png', - 'images/cards/nezuko.png', - 'images/cards/rengoku.png', - 'images/cards/mask.png', - 'images/cards/tanjiro.png', - 'images/cards/zenitsu.png', - ]; - const flippedCards = [] - let matched=0; - - function shuffle(array) { - let currentIndex = array.length, randomIndex; - - // While there remain elements to shuffle. - while (currentIndex != 0) { - - // Pick a remaining element. - randomIndex = Math.floor(Math.random() * currentIndex); - currentIndex--; - - // And swap it with the current element. - [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; - } - - return array; - } - // Shuffling cards - shuffle(cardImageSrcs); - - function checkForMatch(){ - //if matched - if(flippedCards[0].children[0].src===flippedCards[1].children[0].src) // Checking if the flipped cards have same src i.e are matching - { - matched++; - if(matched===6) - { - alert("hurrah! you did it") - //print the updated best score on the page - if(bestScore == null) - bestScore = counter; - else{ - bestScore = Math.min(bestScore, counter); - } - //store the best score on the local storage - localStorage.setItem("memory-game-best-score", bestScore); - bestTimer.innerHTML = "" + bestScore + ""; - clearInterval(interval) - } - else - alert("woah! matched") - - } - //if not matched - else - { - flippedCards.forEach(flippedCard=>{ - flippedCard.children[0].src="#"; // Removing image src so that it isn't visible through HTML - flippedCard.children[0].alt="card front face"; // Removing image alt so that it isn't visible through HTML - flippedCard.children[1].style.display="block"; - }) - alert("haha! better luck next time"); - } - - flippedCards.length= 0; - } - - function flipCard(e, i){ - const card = e.target - - // This means that card is already flipped currently, so we exit out of function - if (card.children[0].src!==window.location.href+"#") - return; - - flippedCards.push(card) - card.children[0].src=cardImageSrcs[i]; // Setting image source for flipped front face - card.children[0].alt=cardImageSrcs[i].split('/').slice(-1)[0].split('.').slice(0, -1).join('.'); // Setting image file name as alt text for flipped front face - card.children[1].style.display="none"; - - //when we have filled two cards check for the match - if(flippedCards.length === 2) - { - setTimeout(checkForMatch,100); // Adding a small delay, so that card gets enough time to render updated src before alert pops up - } - } - - cards.forEach((card, i)=>{ - card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard - }) -})(); - - +const cards = document.querySelectorAll('.memory-card') +const restartBtn = document.querySelector('#restart-btn') +const timer = document.querySelector('#timer') +const modal = document.querySelector('.modal') +const timer_box = document.querySelector('.timer-box') +let counter = 0; + +//increasing the counter +const interval = setInterval(function(){ + counter++; + console.log() + timer.innerHTML = "" + counter + ""; + }, 1000); + +function restartGame(){ + window.location.reload() +} + +const flippedCards = [] +let matched=0; + +function checkForMatch(){ + //if matched + if(flippedCards[0].dataset.character===flippedCards[1].dataset.character) + { + //remove listener from the card to avoid clicking again + flippedCards[0].removeEventListener('click',flipCard) + flippedCards[1].removeEventListener('click',flipCard) + + matched++; + if(matched===6) + { + //show pop-up when game finished + clearInterval(interval) + modal.style.cssText = "display : block;"; + timer_box.innerHTML = "" + counter + "Secs
" + } + else + alert("woah! matched") + + } + //if not matched + else + { + flippedCards.forEach(flippedCard=>{ + flippedCard.children[1].style.display="block"; + }) + alert("haha! better luck next time"); + } + + flippedCards.length= 0; +} + +function flipCard(e){ + const card = e.target + flippedCards.push(card) + card.children[1].style.display="none"; + + //when we have filled two cards check for the match + if(flippedCards.length === 2) + { + setTimeout(checkForMatch,0); + } +} + +cards.forEach(card=>{ + card.addEventListener('click',flipCard); +}) + + +function restartGame(){ + window.location.reload() +} + +// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs +(() => { + const cards = document.querySelectorAll('.memory-card') + const restartBtn = document.querySelector('#restart-btn') + const timer = document.querySelector('#timer') + const bestTimer = document.querySelector('#best--timer'); + //retrieve best score from the local storage + let bestScore = localStorage.getItem("memory-game-best-score"); + //initialise with the best score + bestTimer.innerHTML = "" + (bestScore == null ? "-" : bestScore) + ""; + let counter = 0; + //increasing the counter + + const interval = setInterval(function(){ + counter++; + console.log() + timer.innerHTML = "" + counter + ""; + }, 1000); + + // Storing image sources for list of cards + // Storing it as a list and not a matrix to make it a bit difficult to map list to the 3x4 grid + const cardImageSrcs = [ + 'images/cards/inosuke.png', + 'images/cards/nezuko.png', + 'images/cards/rengoku.png', + 'images/cards/mask.png', + 'images/cards/tanjiro.png', + 'images/cards/zenitsu.png', + 'images/cards/inosuke.png', + 'images/cards/nezuko.png', + 'images/cards/rengoku.png', + 'images/cards/mask.png', + 'images/cards/tanjiro.png', + 'images/cards/zenitsu.png', + ]; + const flippedCards = [] + let matched=0; + + function shuffle(array) { + let currentIndex = array.length, randomIndex; + + // While there remain elements to shuffle. + while (currentIndex != 0) { + + // Pick a remaining element. + randomIndex = Math.floor(Math.random() * currentIndex); + currentIndex--; + + // And swap it with the current element. + [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]]; + } + + return array; + } + // Shuffling cards + shuffle(cardImageSrcs); + + function checkForMatch(){ + //if matched + if(flippedCards[0].children[0].src===flippedCards[1].children[0].src) // Checking if the flipped cards have same src i.e are matching + { + matched++; + if(matched===6) + { + alert("hurrah! you did it") + //print the updated best score on the page + if(bestScore == null) + bestScore = counter; + else{ + bestScore = Math.min(bestScore, counter); + } + //store the best score on the local storage + localStorage.setItem("memory-game-best-score", bestScore); + bestTimer.innerHTML = "" + bestScore + ""; + clearInterval(interval) + } + else + alert("woah! matched") + + } + //if not matched + else + { + flippedCards.forEach(flippedCard=>{ + flippedCard.children[0].src="#"; // Removing image src so that it isn't visible through HTML + flippedCard.children[0].alt="card front face"; // Removing image alt so that it isn't visible through HTML + flippedCard.children[1].style.display="block"; + }) + alert("haha! better luck next time"); + } + + flippedCards.length= 0; + } + + function flipCard(e, i){ + const card = e.target + + // This means that card is already flipped currently, so we exit out of function + if (card.children[0].src!==window.location.href+"#") + return; + + flippedCards.push(card) + card.children[0].src=cardImageSrcs[i]; // Setting image source for flipped front face + card.children[0].alt=cardImageSrcs[i].split('/').slice(-1)[0].split('.').slice(0, -1).join('.'); // Setting image file name as alt text for flipped front face + card.children[1].style.display="none"; + + //when we have filled two cards check for the match + if(flippedCards.length === 2) + { + setTimeout(checkForMatch,100); // Adding a small delay, so that card gets enough time to render updated src before alert pops up + } + } + + cards.forEach((card, i)=>{ + card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard + }) +})(); + + diff --git a/style.css b/style.css index e6bb7c1..80869d5 100644 --- a/style.css +++ b/style.css @@ -89,4 +89,51 @@ header{ } .front-face,.back-face{ pointer-events: none; -} \ No newline at end of file +} +.modal { + position: absolute; + background: #00000070; + color: #eeee; + display: none; + z-index: 9999; + width: 100%; + height: 100%; + top: 0; +} +.modal-body { + position: absolute; + background: #96b6f1; + color: #252552; + width: 30vw; + height: 25vh; + padding: 20px; + border: 1px solid #eee; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: space-evenly; + flex-direction: column; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + box-shadow: -2px -1px 17px #b6b6b6, 0px 0px 20px 0px #f6f6f6; +} +.finish-text { + text-transform: uppercase; +} +.modal-btn { + color: #eeee; + background: #144e69; + padding: 10px; + margin: 10px 0 0 0; + width: 40%; + font-size: 1.4vw; + border-radius: 20px; + border: 1px solid #000; + cursor: pointer; +} +.modal-btn:hover{ + background: #eee; + color: #033b54; + border-radius: 10px; +}