diff --git a/MemoryGame/AnkitaSikdar005/images/img-1.png b/MemoryGame/AnkitaSikdar005/images/img-1.png new file mode 100644 index 000000000..e8d7e7ec5 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-1.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-2.png b/MemoryGame/AnkitaSikdar005/images/img-2.png new file mode 100644 index 000000000..2750ea02f Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-2.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-3.png b/MemoryGame/AnkitaSikdar005/images/img-3.png new file mode 100644 index 000000000..5fb8d4c51 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-3.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-4.png b/MemoryGame/AnkitaSikdar005/images/img-4.png new file mode 100644 index 000000000..32a1928fe Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-4.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-5.png b/MemoryGame/AnkitaSikdar005/images/img-5.png new file mode 100644 index 000000000..08cb96c15 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-5.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-6.png b/MemoryGame/AnkitaSikdar005/images/img-6.png new file mode 100644 index 000000000..daa34f3a8 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-6.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-7.png b/MemoryGame/AnkitaSikdar005/images/img-7.png new file mode 100644 index 000000000..3609f8857 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-7.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/img-8.png b/MemoryGame/AnkitaSikdar005/images/img-8.png new file mode 100644 index 000000000..c2b3fac33 Binary files /dev/null and b/MemoryGame/AnkitaSikdar005/images/img-8.png differ diff --git a/MemoryGame/AnkitaSikdar005/images/que_icon.svg b/MemoryGame/AnkitaSikdar005/images/que_icon.svg new file mode 100644 index 000000000..9f81b10ed --- /dev/null +++ b/MemoryGame/AnkitaSikdar005/images/que_icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/MemoryGame/AnkitaSikdar005/index.html b/MemoryGame/AnkitaSikdar005/index.html new file mode 100644 index 000000000..7b8849b3a --- /dev/null +++ b/MemoryGame/AnkitaSikdar005/index.html @@ -0,0 +1,147 @@ + + + + + + Memory Card Game in JavaScript | CodingNepal + + + + +
+ +
+ + + + + \ No newline at end of file diff --git a/MemoryGame/AnkitaSikdar005/script.js b/MemoryGame/AnkitaSikdar005/script.js new file mode 100644 index 000000000..93169ccde --- /dev/null +++ b/MemoryGame/AnkitaSikdar005/script.js @@ -0,0 +1,65 @@ +const cards = document.querySelectorAll(".card"); + +let matched = 0; +let cardOne, cardTwo; +let disableDeck = false; + +function flipCard({target: clickedCard}) { + if(cardOne !== clickedCard && !disableDeck) { + clickedCard.classList.add("flip"); + if(!cardOne) { + return cardOne = clickedCard; + } + cardTwo = clickedCard; + disableDeck = true; + let cardOneImg = cardOne.querySelector(".back-view img").src, + cardTwoImg = cardTwo.querySelector(".back-view img").src; + matchCards(cardOneImg, cardTwoImg); + } +} + +function matchCards(img1, img2) { + if(img1 === img2) { + matched++; + if(matched == 8) { + setTimeout(() => { + return shuffleCard(); + }, 1000); + } + cardOne.removeEventListener("click", flipCard); + cardTwo.removeEventListener("click", flipCard); + cardOne = cardTwo = ""; + return disableDeck = false; + } + setTimeout(() => { + cardOne.classList.add("shake"); + cardTwo.classList.add("shake"); + }, 400); + + setTimeout(() => { + cardOne.classList.remove("shake", "flip"); + cardTwo.classList.remove("shake", "flip"); + cardOne = cardTwo = ""; + disableDeck = false; + }, 1200); +} + +function shuffleCard() { + matched = 0; + disableDeck = false; + cardOne = cardTwo = ""; + let arr = [1, 2, 3, 4, 5, 6, 7, 8, 1, 2, 3, 4, 5, 6, 7, 8]; + arr.sort(() => Math.random() > 0.5 ? 1 : -1); + cards.forEach((card, i) => { + card.classList.remove("flip"); + let imgTag = card.querySelector(".back-view img"); + imgTag.src = `images/img-${arr[i]}.png`; + card.addEventListener("click", flipCard); + }); +} + +shuffleCard(); + +cards.forEach(card => { + card.addEventListener("click", flipCard); +}); \ No newline at end of file diff --git a/MemoryGame/AnkitaSikdar005/style.css b/MemoryGame/AnkitaSikdar005/style.css new file mode 100644 index 000000000..1572a2775 --- /dev/null +++ b/MemoryGame/AnkitaSikdar005/style.css @@ -0,0 +1,114 @@ +/* Import Google Font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #6563FF; +} +.wrapper{ + padding: 25px; + border-radius: 10px; + background: #F8F8F8; + box-shadow: 0 10px 30px rgba(0,0,0,0.1); +} +.cards, .card, .view{ + display: flex; + align-items: center; + justify-content: center; +} +.cards{ + height: 400px; + width: 400px; + flex-wrap: wrap; + justify-content: space-between; +} +.cards .card{ + cursor: pointer; + list-style: none; + user-select: none; + 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); + } +} +.card .view{ + width: 100%; + height: 100%; + position: absolute; + border-radius: 7px; + background: #fff; + pointer-events: none; + backface-visibility: hidden; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + transition: transform 0.25s linear; +} +.card .front-view img{ + width: 19px; +} +.card .back-view img{ + max-width: 45px; +} +.card .back-view{ + transform: rotateY(-180deg); +} +.card.flip .back-view{ + transform: rotateY(0); +} +.card.flip .front-view{ + transform: rotateY(180deg); +} + +@media screen and (max-width: 700px) { + .cards{ + height: 350px; + width: 350px; + } + .card .front-view img{ + width: 17px; + } + .card .back-view img{ + max-width: 40px; + } +} + +@media screen and (max-width: 530px) { + .cards{ + height: 300px; + width: 300px; + } + .card .front-view img{ + width: 15px; + } + .card .back-view img{ + max-width: 35px; + } +} \ No newline at end of file