From 79cdbb95a8c84b75891433c8cbf481eef052f797 Mon Sep 17 00:00:00 2001 From: Leni-Nikitaa Date: Fri, 20 Oct 2023 22:36:33 +0530 Subject: [PATCH] codes update --- index.html | 70 ++++++++++++++++------------ script.js | 133 ++++++++++++++++++++++++++++++++++++----------------- style.css | 113 +++++++++++++++++++++++++++++++-------------- 3 files changed, 211 insertions(+), 105 deletions(-) diff --git a/index.html b/index.html index 9e108b2..367a02c 100644 --- a/index.html +++ b/index.html @@ -4,113 +4,125 @@ + Memor Flip Card Game + + +
+
+ + +
+
+

Time: 0s

+

Flips: 0

+ +
diff --git a/script.js b/script.js index 5066fb5..115a7a3 100644 --- a/script.js +++ b/script.js @@ -1,14 +1,53 @@ -const cards = document.querySelectorAll(".card"), -timeTag = document.querySelector(".time b"), -flipsTag = document.querySelector(".flips b"), -refreshBtn = document.querySelector(".details button"); -let maxTime = 20; +const cards = document.querySelectorAll(".card"); +const timeTag = document.querySelector(".time b"); +const flipsTag = document.querySelector(".flips b"); +const refreshBtn = document.querySelector(".details button"); +const difficultySelect = document.getElementById("difficulty-select"); +const flipSound = new Audio("flip.wav"); // Replace with the actual path to your flip sound file +const matchSound = new Audio("match.wav"); // Replace with the actual path to your match sound file +const wrongSound = new Audio("wrong.wav"); +let maxTime = 0; +let maxFlips = 0; let timeLeft = maxTime; let flips = 0; let matchedCards = 0; let disableDeck = false; let isPlaying = false; let cardOne, cardTwo, timer; +function setDifficulty() { + const selectedDifficulty = difficultySelect.value; + + switch (selectedDifficulty) { + case "easy": + maxTime = 60; + maxFlips = 12; + break; + case "medium": + maxTime = 45; + maxFlips = 10; + break; + case "hard": + maxTime = 30; + maxFlips = 8; + break; + default: + maxTime = 60; + maxFlips = 12; + break; + } +} +function initGame() { + setDifficulty(); + timeLeft = maxTime; + flips = 0; + matchedCards = 0; + cardOne = cardTwo = ""; + clearInterval(timer); + timeTag.innerText = timeLeft; + flipsTag.innerText = flips; + disableDeck = isPlaying = false; + shuffleCards(); +} function initTimer(){ if(timeLeft <= 0){ return clearInterval(timer); @@ -16,39 +55,61 @@ function initTimer(){ timeLeft--; timeTag.innerText=timeLeft; } -function flipCard({target: clickedCard}){ - if(!isPlaying){ +function shuffleCards(){ + timeLeft = maxTime; + flips = matchedCards = 0; + cardOne = cardTwo = "" + clearInterval(timer); + timeTag.innerText = timeLeft; + flipsTag.innerText = flips; + disableDeck = isPlaying = false; + const imagePaths = ["card2.jpg","card3.jpg","card4.jpg","card5.jpg","card6.jpg","card7.jpg","card2.jpg","card3.jpg","card4.jpg","card5.jpg","card6.jpg","card7.jpg"]; + shuffleArray(imagePaths); + cards.forEach((card, index) => { + card.classList.remove("flip"); + let image = card.querySelector(".back-view img"); + image.src = imagePaths[index]; + card.addEventListener("click", flipCard); + }); +} +function flipCard({ target: clickedCard }) { + if (!isPlaying) { isPlaying = true; - timer=setInterval(initTimer, 1000); + timer = setInterval(initTimer, 1000); } - if(clickedCard !== cardOne && !disableDeck && timeLeft > 0){ + if (clickedCard !== cardOne && !disableDeck && timeLeft > 0) { flips++; flipsTag.innerText = flips; clickedCard.classList.add("flip"); - if(!cardOne){ - return cardOne = clickedCard; + flipSound.play(); // Play flip sound + + if (!cardOne) { + return (cardOne = clickedCard); } cardTwo = clickedCard; disableDeck = true; - let cardOneIcon = cardOne.querySelector(".back-view i").classList.value; - cardTwoIcon=cardTwo.querySelector(".back-view i").classList.value; - matchCards(cardOneIcon, cardTwoIcon); + let cardOneImage = cardOne.querySelector(".back-view img").src; + let cardTwoImage = cardTwo.querySelector(".back-view img").src; + + matchCards(cardOneImage, cardTwoImage); } } -function matchCards(icon1, icon2) { - if (icon1 == icon2) { +function matchCards(image1, image2) { + if (image1 === image2) { matchedCards++; - if (matchedCards == 6 && timeLeft > 0) { + if (matchedCards === 6 && timeLeft > 0) { clearInterval(timer); } cardOne.removeEventListener("click", flipCard); cardTwo.removeEventListener("click", flipCard); cardOne = cardTwo = ""; disableDeck = false; + matchSound.play(); } else { setTimeout(() => { cardOne.classList.add("shake"); cardTwo.classList.add("shake"); + wrongSound.play(); }, 400); setTimeout(() => { cardOne.classList.remove("shake", "flip"); @@ -58,27 +119,17 @@ function matchCards(icon1, icon2) { }, 1200); } } -function shuffleCards(){ - timeLeft = maxTime; - flips = matchedCards = 0; - cardOne = cardTwo = "" - clearInterval(timer); - timeTag.innerText = timeLeft; - flipsTag.innerText = flips; - disableDeck = isPlaying = false; - let arr = ["bxl-tiktok", "bxl-instagram-alt", "bxl-facebook-circle", "bxl-twitter", "bxl-whatsapp", "bxl-youtube", "bxl-tiktok", "bxl-instagram-alt", "bxl-facebook-circle", "bxl-twitter", "bxl-whatsapp", "bxl-youtube"]; - arr.sort(() => Math.random() > 0.5 ? 1 : -1); - cards.forEach((card, index) =>{ - card.classList.remove("flip"); - let iconTag = card.querySelector(".back-view i"); - setTimeout(() =>{ - iconTag.classList.value = `bx ${arr[index]}`; - }, 500); - card.addEventListener("click", flipCard); - }); -} -shuffleCards(); -refreshBtn.addEventListener("click",shuffleCards); -cards.forEach(card =>{ - card.addEventListener("click",flipCard); -}); \ No newline at end of file +refreshBtn.addEventListener("click", initGame); +cards.forEach((card) => { + card.addEventListener("click", flipCard); +}); +document.addEventListener("DOMContentLoaded", function () { + initGame(); +}); + +function shuffleArray(array) { + for (let i = array.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [array[i], array[j]] = [array[j], array[i]]; + } +} \ No newline at end of file diff --git a/style.css b/style.css index 2bc5e4a..b4497c8 100644 --- a/style.css +++ b/style.css @@ -1,20 +1,20 @@ -@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,400;0,500;1,300&display=swap'); -*{ - padding: 0; - margin: 0; - box-sizing: border-box; - font-family: 'Ubuntu',sans-serif; +@import url('https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap'); +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: 'Roboto', sans-serif; } p{ font-size: 20px; } -body{ +body { + background: #f5f5f5; display: flex; - align-items: center; justify-content: center; + align-items: center; min-height: 100vh; - background: #673ab7; -} + } .wrapper{ padding: 25px; background: #f8f8f8; @@ -32,6 +32,22 @@ body{ flex-wrap: wrap; justify-content: space-between; } +.card { + cursor: pointer; + position: relative; + perspective: 1000px; + height: 100px; + width: 100px; + } +.card .view { + background: #fff; + border-radius: 7px; + height: 100%; + width: 100%; + transition: transform 0.25s linear; + user-select: none; + pointer-events: none; + } .cards .card{ cursor: pointer; position: relative; @@ -72,21 +88,23 @@ body{ transition: tranform 0.25s linear; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } -.card .front-view i{ - font-size: 40px; +.card .front-view img { + max-width: 100%; + max-height: 100%; } -.card .back-view i{ - font-size: 40px; +.card .back-view img { + max-width: 100%; + max-height: 100%; } -.card .back-view{ +.card .back-view { transform: rotateY(-180deg); } -.card.filp .front-view{ +.card.flip .front-view { transform: rotateY(180deg); -} -.card.flip .back-view{ + } +.card.flip .back-view { transform: rotateY(0); -} + } .details{ width: 100%; margin-top: 15px; @@ -133,12 +151,14 @@ body{ height: 350px; width: 350px; } - .card .front-view i{ - font-size: 35px; - } - .card .back-view i{ - font-size: 35px; - } + .card .front-view i { + font-size: 40px; + color: #673AB7; + } + .card .back-view i { + font-size: 40px; + color: #673AB7; + } } @media screen and (max-width: 530px) { .cards{ @@ -148,16 +168,39 @@ body{ .card .back-view i{ font-size: 30px; } - .details{ - margin-top: 10px; - padding: 0 15px; - height: calc(100% / 4 - 20%); - } - .details p{ - height: 15px; - font-size: 17px; - padding-right: 13px; - } + .details { + background: #fff; + border-radius: 7px; + margin-top: 15px; + padding: 10px; + text-align: center; + } + .details p { + font-size: 18px; + display: inline; + padding-right: 18px; + border-right: 1px solid #ccc; + } + .details p span { + margin-left: 8px; + } + .details p b { + font-weight: 500; + } + details button { + background: #673AB7; + border: 2px solid #673AB7; + border-radius: 4px; + color: #fff; + cursor: pointer; + font-size: 14px; + padding: 4px 11px; + transition: 0.3s ease; + } + details button:hover { + background: #fff; + color: #673AB7; + } .details button{ font-size: 13px; padding: 5px IOpx;