Skip to content

Commit

Permalink
Merge pull request #600 from MAYURIKOTHARI299/new
Browse files Browse the repository at this point in the history 
Memory Card Game
  • Loading branch information
@panwar8279
panwar8279 committed Jul 28, 2023
2 parents c637e97 + 4ba68e1 commit 2bf30ba
Show file tree
Hide file tree
Showing 12 changed files with 307 additions and 0 deletions.
Binary file added src/Games/Memory Card Game/dog.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Games/Memory Card Game/doll.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Games/Memory Card Game/duck.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Games/Memory Card Game/fish-color.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Games/Memory Card Game/flames.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 144 additions & 0 deletions src/Games/Memory Card Game/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="doll.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="duck.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="dog.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="pork.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="dog.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="pork.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="fish-color.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="doll.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="teddy-bear-brown.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="traffic-light.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="flames.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="traffic-light.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="fish-color.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="duck.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="teddy-bear-brown.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<h1>?</h1>
</div>
<div class="view back-view">
<img src="flames.png" alt="card-img">
</div>
</li>
</ul>
</div>
<script src="logic.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions src/Games/Memory Card Game/intro
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@

62 changes: 62 additions & 0 deletions src/Games/Memory Card Game/logic.js
View file
Original file line number Diff line number Diff line change
@@ -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();
Binary file added src/Games/Memory Card Game/pork.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions src/Games/Memory Card Game/style.css
View file
Original file line number Diff line number Diff line change
@@ -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);
}
}
Binary file added src/Games/Memory Card Game/teddy-bear-brown.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/Games/Memory Card Game/traffic-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2bf30ba

Please sign in to comment.