diff --git a/index.html b/index.html
index a27604a..bbc43cd 100644
--- a/index.html
+++ b/index.html
@@ -4,16 +4,42 @@
+
+
memory game
+
+
+
+
+
Choose Level
+
+
+
+
+
+
+
+
+
+
Best time: -
diff --git a/index.js b/index.js
index f59df5d..8cc9641 100644
--- a/index.js
+++ b/index.js
@@ -1,17 +1,29 @@
-function restartGame(){
- window.location.reload()
+function restartGame() {
+ window.location.reload();
}
//Mute audio functionality
-var audioState=true;
-function toggleSound(){
- audioState= !audioState;
+var audioState = true;
+function toggleSound() {
+ audioState = !audioState;
}
// Wrapping entire code in anonymous function and calling it, so that user doesn't have access to cardImageSrcs
(() => {
- let level = window.prompt("Choose a level", "1/2/3");
- const noOfCards = level == 1 ? 12 : (level == 2 ? 20 : 24) ;
- for(let i = 0; i < noOfCards; i++) {
+
+ let noOfCards = 0;
+ let cardArray;
+ const popup_box = document.getElementById("model");
+ const timer = document.querySelector("#timer");
+
+ // game level difficulty function
+ document.querySelectorAll(".level-btn").forEach((level, idx) => {
+ level.addEventListener("click", () => {
+ let level;
+ if (idx == 0) level = 1;
+ else if (idx == 1) level = 2;
+ else level = 3;
+ noOfCards = level == 1 ? 12 : level == 2 ? 20 : 24;
+ for (let i = 0; i < noOfCards; i++) {
var newCard = document.createElement("div");
newCard.classList.add("memory-card");
var img1 = document.createElement("img");
@@ -26,155 +38,190 @@ function toggleSound(){
newCard.appendChild(img1);
newCard.appendChild(img2);
- document.querySelector('.memory-game').appendChild(newCard);
+ document.querySelector(".memory-game").appendChild(newCard);
+ }
+ //generate the card array from the image sources
+ cardArray = cardImageSrcs.slice(0, noOfCards / 2);
+ cardArray.push(...cardArray);
+ document.querySelectorAll(".memory-card").forEach((card, i) => {
+ card.addEventListener("click", (e) => flipCard(e, i)); // Passing index of card when calling flipCard
+ });
+ // popup_box.classList.remove("popupBox");
+ popup_box.style.transform = "scale(0)";
+ setTimer();
+ });
+ });
+
+ //increasing the counter
+ let counter = 0;
+ function counterIncrease() {
+ counter++;
+ console.log();
+ timer.innerHTML = "" + counter + "";
+ }
+
+ let interval;
+ function setTimer() {
+ interval = setInterval(counterIncrease, 1000);
+ }
+
+ // open popup model let you choose
+ document.getElementById("start-btn").addEventListener("click", function () {
+ removeChild();
+ counter = 0;
+ clearInterval(interval);
+ timer.innerHTML = "" + 0 + "";
+ popup_box.style.transform = "scale(1)";
+ });
+
+ // closing the popup model on clicking fontawesome fa-fa cross icon
+ document.querySelector(".fa-times").addEventListener("click", () => {
+ popup_box.style.transform = "scale(0)";
+ });
+
+ // everytime remove childs of memory-game card when user choose level again
+ function removeChild() {
+ const myNode = document.querySelector(".memory-game");
+ while (myNode.firstChild) {
+ myNode.removeChild(myNode.lastChild);
}
- const cards = document.querySelectorAll('.memory-card');
- 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");
- // audio variables
- var audioSuccess = new Audio("./audios/Success.mp3");
- var audioFail = new Audio("./audios/Fail.mp3");
- var audioWin = new Audio("./audios/Win.mp3");
- function audioPause(){
- audioSuccess.pause()
- audioSuccess.currentTime=0
- audioFail.pause()
- audioFail.currentTime=0
+ }
+
+ const cards = document.querySelectorAll(".memory-card");
+ const bestTimer = document.querySelector("#best--timer");
+ //retrieve best score from the local storage
+ let bestScore = localStorage.getItem("memory-game-best-score");
+ // audio variables
+ var audioSuccess = new Audio("./audios/Success.mp3");
+ var audioFail = new Audio("./audios/Fail.mp3");
+ var audioWin = new Audio("./audios/Win.mp3");
+ function audioPause() {
+ audioSuccess.pause();
+ audioSuccess.currentTime = 0;
+ audioFail.pause();
+ audioFail.currentTime = 0;
+ }
+ //initialise with the best score
+ bestTimer.innerHTML = "" + (bestScore == null ? "-" : bestScore) + "";
+ // let counter = 0;
+ // //increasing the counter
+ // const interval = setInterval(function(){
+ // counter++;
+ // timer.innerHTML = "" + counter + "";
+ // }, 1000);
+
+ //if the modal close button is clicked, change the display of modal to none
+ document.querySelector("#modal--close").addEventListener("click", () => {
+ document.querySelector(".modal").style.display = "none";
+ });
+
+ // Storing image sources for list of cards
+ const cardImageSrcs = [
+ //need upto 12 cards for level 1
+ "images/cards/rengoku.png",
+ "images/cards/zenitsu.png",
+ "images/cards/inosuke.png",
+ "images/cards/nezuko.png",
+ "images/cards/mask.png",
+ "images/cards/tanjiro.png",
+ //need upto 20 cards for level 2
+ "images/cards/inosuke2.png",
+ "images/cards/kanao.png",
+ "images/cards/kimetsu.png",
+ "images/cards/nezuko2.png",
+ //need upto 24 cards for level 3
+ "images/cards/tokito.png",
+ "images/cards/genya.png",
+ ];
+
+ const flippedCards = [];
+ let matched = 0;
+
+ function shuffle(array) {
+ let currentIndex = noOfCards,
+ 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],
+ ];
}
- //initialise with the best score
- bestTimer.innerHTML = "" + (bestScore == null ? "-" : bestScore) + "";
- let counter = 0;
- //increasing the counter
- const interval = setInterval(function(){
- counter++;
- timer.innerHTML = "" + counter + "";
- }, 1000);
-
- //if the modal close button is clicked, change the display of modal to none
- document.querySelector('#modal--close').addEventListener('click', () => {
- document.querySelector('.modal').style.display = "none";
- })
-
- // Storing image sources for list of cards
- const cardImageSrcs = [
- //need upto 12 cards for level 1
- 'images/cards/rengoku.png',
- 'images/cards/zenitsu.png',
- 'images/cards/inosuke.png',
- 'images/cards/nezuko.png',
- 'images/cards/mask.png',
- 'images/cards/tanjiro.png',
- //need upto 20 cards for level 2
- 'images/cards/inosuke2.png',
- 'images/cards/kanao.png',
- 'images/cards/kimetsu.png',
- 'images/cards/nezuko2.png',
- //need upto 24 cards for level 3
- 'images/cards/tokito.png',
- 'images/cards/genya.png',
- ];
-
- //generate the card array from the image sources
- const cardArray = cardImageSrcs.slice(0,noOfCards / 2);
- cardArray.push(...cardArray);
-
- const flippedCards = []
- let matched=0;
-
- function shuffle(array) {
- let currentIndex = noOfCards, 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(cardArray);
+
+ 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 === noOfCards / 2) {
+ if (audioState) {
+ audioPause();
+ audioWin.play(); // Win.mp3 plays if the game is complete
}
-
- return array;
- }
- // Shuffling cards
- shuffle(cardArray);
-
- 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 === noOfCards / 2)
- {
-
- if(audioState){
- audioPause();
- audioWin.play(); // Win.mp3 plays if the game is complete
- }
- //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 + "";
- document.querySelector('#modal--time').innerHTML = counter + " seconds";
- clearInterval(interval)
- document.querySelector('.modal').style.display = "flex";
- }
- else
- {
- if(audioState){
- audioPause();
- audioSuccess.play(); // Success.mp3 plays if correct match
- }
- }
-
+ //print the updated best score on the page
+ if (bestScore == null) bestScore = counter;
+ else {
+ bestScore = Math.min(bestScore, counter);
}
- //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";
- })
- if(audioState){
- audioPause();
- audioFail.play(); // Fail.mp3 plays if not correct match
- }
+ //store the best score on the local storage
+ localStorage.setItem("memory-game-best-score", bestScore);
+ bestTimer.innerHTML = "" + bestScore + "";
+ document.querySelector("#modal--time").innerHTML = counter + " seconds";
+ clearInterval(interval);
+ document.querySelector(".modal").style.display = "flex";
+ } else {
+ if (audioState) {
+ audioPause();
+ audioSuccess.play(); // Success.mp3 plays if correct match
}
-
- flippedCards.length= 0;
+ }
+ }
+ //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";
+ });
+ if (audioState) {
+ audioPause();
+ audioFail.play(); // Fail.mp3 plays if not correct match
+ }
}
- function flipCard(e, i){
- const card = e.target
+ flippedCards.length = 0;
+ }
- // This means that card is already flipped currently, so we exit out of function
- if (card.children[0].src!==window.location.href+"#")
- return;
+ function flipCard(e, i) {
+ const card = e.target;
- flippedCards.push(card)
- card.children[0].src=cardArray[i]; // Setting image source for flipped front face
- card.children[0].alt=cardArray[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";
+ // This means that card is already flipped currently, so we exit out of function
+ if (card.children[0].src !== window.location.href + "#") return;
- //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
- }
- }
+ flippedCards.push(card);
+ card.children[0].src = cardArray[i]; // Setting image source for flipped front face
+ card.children[0].alt = cardArray[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";
- cards.forEach((card, i)=>{
- card.addEventListener('click',e=>flipCard(e, i)); // Passing index of card when calling flipCard
- })
+ //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
+ }
+ }
})();
-
-
diff --git a/style.css b/style.css
index 222b359..4013f9e 100644
--- a/style.css
+++ b/style.css
@@ -39,18 +39,91 @@ header{
background-color: rgba(255, 255, 255, 0.289);
padding: 10px 0px;
}
+.left-wrapper,
+.right-wrapper {
+ display: flex;
+ justify-content: space-between;
+ flex-direction: row;
+ align-items: center;
+}
+
+/* popup model box at beginning styling start here */
+.model-container {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: fixed;
+ top: 0;
+ left: 0;
+ background-color: rgba(0, 0, 0, 0.6);
+ z-index: 99;
+ transform: scale(1);
+}
+.model-container .model {
+ width: 300px;
+ padding: 20px;
+ border-radius: 5px;
+ background-color: #fff;
+ z-index: 100;
+ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+ text-align: center;
+ position: relative;
+}
+
+.model-container .model h3 {
+ color: #333;
+ font-size: 20px;
+ margin: 10px 0;
+}
+.model-container .model .levels {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+.model-container .model button {
+ height: 35px;
+ width: 120px;
+ background: #333;
+ outline: none;
+ border: none;
+ border-radius: 50px;
+ color: #fff;
+ font-size: 17px;
+ margin: 10px;
+ cursor: pointer;
+}
+.model-container .model button:hover {
+ opacity: 0.8;
+}
+.model-container .model .fa-times {
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ font-size: 25px;
+ cursor: pointer;
+ color: #333;
+}
+/* popup model box at beginning styling end here */
-#restart-btn, .modal--btn{
+/* box at begining behaviour on javaScript condition */
+.popupBox{
+ transition: all 0.5s;
+ transform: scale(1);
+}
+#start-btn,#restart-btn, .modal--btn{
margin-right: 15px;
text-transform: capitalize;
- padding: 7px;
+ padding: 10px 15px;
border: none;
border-radius: 10px;
outline: none;
- font-weight: bold;
+ font-weight: normal;
background-color: #729ddc;
cursor: pointer;
color: white;
+ cursor: pointer !important;
}
#restart-btn:hover, .modal--btn:hover {
+