diff --git a/src/Games/Memory Card Game/dog.png b/src/Games/Memory Card Game/dog.png new file mode 100644 index 000000000..649fabc34 Binary files /dev/null and b/src/Games/Memory Card Game/dog.png differ diff --git a/src/Games/Memory Card Game/doll.png b/src/Games/Memory Card Game/doll.png new file mode 100644 index 000000000..6985fdaa5 Binary files /dev/null and b/src/Games/Memory Card Game/doll.png differ diff --git a/src/Games/Memory Card Game/duck.png b/src/Games/Memory Card Game/duck.png new file mode 100644 index 000000000..e05b00e03 Binary files /dev/null and b/src/Games/Memory Card Game/duck.png differ diff --git a/src/Games/Memory Card Game/fish-color.png b/src/Games/Memory Card Game/fish-color.png new file mode 100644 index 000000000..20702e33e Binary files /dev/null and b/src/Games/Memory Card Game/fish-color.png differ diff --git a/src/Games/Memory Card Game/flames.png b/src/Games/Memory Card Game/flames.png new file mode 100644 index 000000000..7aefd3885 Binary files /dev/null and b/src/Games/Memory Card Game/flames.png differ diff --git a/src/Games/Memory Card Game/index.html b/src/Games/Memory Card Game/index.html new file mode 100644 index 000000000..a5287a6ae --- /dev/null +++ b/src/Games/Memory Card Game/index.html @@ -0,0 +1,144 @@ + + + + + + Document + + + +
+ +
+ + + \ No newline at end of file diff --git a/src/Games/Memory Card Game/intro b/src/Games/Memory Card Game/intro new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/src/Games/Memory Card Game/intro @@ -0,0 +1 @@ + diff --git a/src/Games/Memory Card Game/logic.js b/src/Games/Memory Card Game/logic.js new file mode 100644 index 000000000..1678c4782 --- /dev/null +++ b/src/Games/Memory Card Game/logic.js @@ -0,0 +1,62 @@ +const cards = document.querySelectorAll('.card'); +let matchedCard =0; +let cardOne, cardTwo; +let disableDeck = false; +function flipCard(e){ + let clickedCard = e.target; +if(clickedCard !== cardOne && !disableDeck) { + clickedCard.classList.add("flip"); + if(!cardOne){ + return cardOne = clickedCard; + } cardTwo= clickedCard; + disableDeck = true; + let cardOneImg = cardOne.querySelector("img").src; + cardTwoImg = cardTwo.querySelector("img").src; + matchCards(cardOneImg , cardTwoImg); +}} +cards.forEach(card =>{ + card.addEventListener('click',flipCard); +}); + + + + + function matchCards(img1,img2){ + if(img1==img2){ + matchedCard++; + if(matchedCard==8){ + setTimeout(()=>{ + return shuffleCard();},1000); + } + cardOne.removeEventListener("click",flipCard); + cardTwo.removeEventListener("click",flipCard); + cardOne=cardTwo=""; + return disableDeck= false; + + + } else + 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(){ + matchedCard = 0; + 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 =>{ + card.classList.remove("flip"); + let imgTag = card.querySelector("img"); + // imgTag.src =`images/img-${arr[index]}.png`; + card.addEventListener('click',flipCard);}); + } +shuffleCard(); \ No newline at end of file diff --git a/src/Games/Memory Card Game/pork.png b/src/Games/Memory Card Game/pork.png new file mode 100644 index 000000000..1b3543e3f Binary files /dev/null and b/src/Games/Memory Card Game/pork.png differ diff --git a/src/Games/Memory Card Game/style.css b/src/Games/Memory Card Game/style.css new file mode 100644 index 000000000..d03beacfe --- /dev/null +++ b/src/Games/Memory Card Game/style.css @@ -0,0 +1,100 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + + +} +body{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: rgb(99, 4, 47); + +}.wrapper{ + height: 400px; + width:400px ; + background: white; + border-radius: 10px; +}.back-view img{ + max-width: 50px; + max-height: 50px; + justify-content: space-around; + +}.cards,.card,.view{ + display: flex; + align-items: center; + justify-content: space-around; + /* background: red; */ + background: whitesmoke; +}.cards{ + height: 100%; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + + padding: 10px; + position: relative; + perspective: 800px; + transform-style: preserve-3d; + +} .card{ + height: 25%; + width: 25%; + cursor: pointer; + position: relative; + perspective: 800px; + transform-style: preserve-3d ; + + +} +.view{ + height: 100%; + width: 100%; + background:rgb(255, 228, 240); + position: absolute; + transition: 0.25s linear ; + backface-visibility: hidden; + pointer-events: none; + user-select: none; + +} + +.back-view{ + justify-content: space-around; + height: 85px; + width: 85px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + border-radius: 5px; + transform:rotateY(-180deg) +}.front-view{ + justify-content: space-around; + height: 85px; + width: 85px; + box-shadow: 0 3px 10px rgba(0,0,0,0.1); + border-radius: 5px; +}h1{ + font-size: 42; + color:rgb(99, 4, 47); ; +}.card.flip .back-view{ + transform: rotateY(0); +}.card.flip .front-view{ + transform: rotateY(180deg); +} .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); + } +} \ No newline at end of file diff --git a/src/Games/Memory Card Game/teddy-bear-brown.png b/src/Games/Memory Card Game/teddy-bear-brown.png new file mode 100644 index 000000000..77f91070e Binary files /dev/null and b/src/Games/Memory Card Game/teddy-bear-brown.png differ diff --git a/src/Games/Memory Card Game/traffic-light.png b/src/Games/Memory Card Game/traffic-light.png new file mode 100644 index 000000000..f695c6c37 Binary files /dev/null and b/src/Games/Memory Card Game/traffic-light.png differ