diff --git a/index.html b/index.html new file mode 100644 index 0000000..8e75e52 --- /dev/null +++ b/index.html @@ -0,0 +1,93 @@ + + + + + + + + + Memory FlipCard Game + + + +
+ +
+ + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..f8050ad --- /dev/null +++ b/script.js @@ -0,0 +1,97 @@ +const cards = document.querySelectorAll(".card"), +timeTag = document.querySelector(".time b"), +flipsTag = document.querySelector(".flips b"), +refreshBtn = document.querySelector(".details button"); + +let maxTime = 30; +let timeLeft = maxTime; +let flips = 0; +let matchedCards = 0; +let disableDeck = false; +let isPlaying = false; +let cardOne, cardTwo, timer; + +function initTimer(){ + if(timeLeft <= 0){ + return clearInterval(timer); + } + timeLeft--; + timeTag.innerText = timeLeft; +} + +function flipCard({target: clickedCard}){ + if(!isPlaying){ + isPlaying = true; + timer = setInterval(initTimer, 1000); + } + if(clickedCard !== cardOne && !disableDeck && timeLeft > 0){ + flips++; + flipsTag.innerText = flips; + clickedCard.classList.add("flip"); + 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); + } +} + +function matchCards(icon1, icon2){ + if(icon1 === icon2){ + matchedCards++; + if(matchedCards == 6 && timeLeft > 0){ + return clearInterval(timer); + } + cardOne.removeEventListener("click", flipCard); + cardTwo.removeEventListener("click", flipCard); + cardOne = cardTwo = ""; + return disableDeck = false; + } + + setTimeout(() =>{ + cardOne.classList.add("shake"); + cardTwo.classList.add("shake"); + }, 300); + + setTimeout(() =>{ + cardOne.classList.remove("shake", "flip"); + cardTwo.classList.remove("shake", "flip"); + cardOne = cardTwo = ""; + disableDeck = false; + }, 600); + +} + +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-twitter", "bxl-youtube", "bxl-tiktok", "bxl-instagram-alt", "bxl-twitter", "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 diff --git a/style.css b/style.css new file mode 100644 index 0000000..5faed99 --- /dev/null +++ b/style.css @@ -0,0 +1,198 @@ +@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; +} +p{ + font-size: 20px; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #edecec; +} + +.wrapper{ + padding: 25px; + background: #699fea93; + border-radius: 10px; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} + +.cards, .card, .view, .details, p{ + display: flex; + align-items: center; + justify-content: center; +} + +.cards{ + height: 350px; + width: 350px; + flex-wrap: wrap; + justify-content: space-between; +} + +.cards .card{ + cursor: pointer; + position: relative; + perspective: 1000px; + transform-style: preserve-3d; + height: calc(100% / 4 - 10px); + width: calc(100% / 4 - 10px); +} + +.card.shake{ + animation: shake 0.35s ease-in-out; +} + +@keyframes shake{ + 0%, 100%{ + transform: translateX(0); + } + 20%{ + transform: translateX(-13px); + } + 40%{ + transform: translateX(13px); + } + 60%{ + transform: translateX(-8px); + } + 80%{ + transform: translateX(8px); + } +} + +.cards .card .view{ + width: 100%; + height: 100%; + user-select: none; + pointer-events: none; + position: absolute; + background: #fff; + border-radius: 7px; + backface-visibility: hidden; + transition: transform 0.25s linear; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); +} + +.card .front-view i{ + font-size: 40px; +} + +.card .back-view i{ + font-size: 40px; +} + +.card .back-view { + transform: rotateY(-180deg); +} +.card.flip .front-view{ + transform: rotateY(180deg); +} + +.card.flip .back-view{ + transform: rotateY(0); +} + +.level{ + width: 30px; + margin-top: 15px; + padding: 0 20px; + background: #014098e1; + border-radius: calc(100% / 4 - 30px); +} + +.details{ + width: 100%; + margin-top: 15px; + padding: 0 20px; + background: #fff; + border-radius: 7px; + height: calc(100% / 4 - 30px); + justify-content: space-between; +} + +.details p{ + font-size: 18px; + height: 17px; + padding-right: 18px; + border-right: 1px solid #ccc; +} + +.details p span{ + margin-left: 8px; +} + +.details p b{ + font-weight: 500; +} + +.details button{ + cursor: pointer; + font-size: 14px; + color: #014098e1; + border-radius: 4px; + padding: 4px 11px; + background: #fff; + border: 2px solid #014098e1; + transition: 0.3s ease; +} + +.details button:hover{ + color: #fff; + background: #014098e1; +} + +::selection{ + color: #fff; + background: #699fea93; +} + +@media screen and (max-width: 700px) { + .cards{ + height: 350px; + width: 350px; + } + .card .front-view i{ + font-size: 35px; + } + .card .back-view i{ + font-size: 35px; + } +} + +@media screen and (max-width: 530px) { + .cards{ + height: 300px; + width: 300px; + } + .card .back-view i{ + font-size: 30px; + } + .details{ + margin-top: 10px; + padding: 0 15px; + height: calc(100% / 4 - 20px); + } + + .details p{ + height: 15px; + font-size: 17px; + padding-right: 13px; + } + + .details button{ + font-size: 13px; + padding: 5px 10px; + border: none; + color: #fff; + background: #699fea; + } + +} \ No newline at end of file