Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added Memory Match Game #862

Merged
merged 2 commits into from
Oct 10, 2024
Merged

Added Memory Match Game #862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b3d6e3d
added memory match game
DivyaJyothi9 Oct 9, 2024
2a7fa5f
added memory match game
DivyaJyothi9 Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -400,6 +400,21 @@ <h3 class="card-heading">Text to Speech</h3>
</p>
</div>
</a>


<a href="./projects/Memory Match Game/index.html" class="card" target="_blank">
<div class="card-cover">
<img src="./projects/Memory Match Game/images/memory match logo.png" alt="Memory Match Game logo">
</div>
<div class="card-content">
<h3 class="card-heading">Memory Match Game</h3>
<p class="card-description">
Match the pairs of cards.
</p>
</div>
</a>


<a href="./projects/image Generator/index.html" class="card" target="_blank">
<div class="card-cover">
<img src="./projects/image Generator/search.png" alt="Image Generator logo">
Expand Down
Binary file added projects/Memory Match Game/images/img-1.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-2.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-3.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-4.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-5.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-6.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-7.png
View file
Open in desktop
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 projects/Memory Match Game/images/img-8.png
View file
Open in desktop
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 projects/Memory Match Game/images/memory match logo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
146 changes: 146 additions & 0 deletions projects/Memory Match Game/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Match Game</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="wrapper">
<ul class="cards">
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-7.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-8.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-1.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-2.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-3.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-4.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-5.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-6.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-7.png" alt="card-img">
</div>
</li>
<li class="card">
<div class="view front-view">
<span class="material-icons">question_mark</span>
</div>
<div class="view back-view">
<img src="images/img-8.png" alt="card-img">
</div>
</li>
</ul>
</div>

<script src="script.js"></script>
</body>
</html>
67 changes: 67 additions & 0 deletions projects/Memory Match Game/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
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);
}
}

function matchCards(img1, img2) {
if (img1 === img2) {
matchedCard++;
if (matchedCard === 8) {
setTimeout(() => {
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() {
matchedCard = 0;
cardOne = cardTwo = "";
disableDeck = false;
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, index) => {
card.classList.remove("flip");
let imgTag = card.querySelector("img");
imgTag.src = `images/img-${arr[index]}.png`; // Use backticks for template literals
card.addEventListener("click", flipcard);
});
}

shuffleCard();

cards.forEach(card => {
card.addEventListener("click", flipcard);
});
103 changes: 103 additions & 0 deletions projects/Memory Match Game/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
@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; /* Background color */
}

.wrapper {
height: 400px; /* Height of the game board */
width: 400px; /* Width of the game board */
padding: 25px; /* Padding around the game board */
background: #f8f8f8; /* Background color of the wrapper */
border-radius: 10px; /* Rounded corners */
}

.cards {
height: 100%; /* Full height */
width: 100%; /* Full width */
display: flex; /* Flexbox for card layout */
flex-wrap: wrap; /* Allow wrapping of cards */
justify-content: space-between; /* Space between cards */
list-style-type: none; /* Remove default bullet points */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
}

.cards .card {
cursor: pointer; /* Pointer on hover */
position: relative; /* Positioning for card flip */
perspective: 800px; /* 3D perspective */
transform-style: preserve-3d; /* Preserve 3D styles */
height: calc(100% / 4 - 10px); /* Dynamic height */
width: calc(100% / 4 - 10px); /* Dynamic width */
margin: 5px; /* Margin for spacing */
}

.card.shake {
animation: shake 0.35s ease-in-out; /* Shake animation */
}

@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%; /* Full width */
height: 100%; /* Full height */
user-select: none; /* Prevent text selection */
pointer-events: none; /* Disable pointer events */
position: absolute; /* Positioning for flipping */
background: #fff; /* Background of the card */
border-radius: 7px; /* Rounded corners */
backface-visibility: hidden; /* Hide back face when flipped */
transition: transform 0.25s linear; /* Transition for flip */
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* Shadow effect */
}

.card .front-view span {
color: #6563ff; /* Color of the question mark */
font-size: 40px; /* Font size */
}

.card .back-view {
transform: rotateY(-180deg); /* Rotate back view */
}

.card .back-view img {
max-width: 100%; /* Adjust to fit the card */
border-radius: 7px; /* Optional: for a nicer appearance */
}

.card.flip .front-view {
transform: rotateY(180deg); /* Rotate front view */
}

.card.flip .back-view {
transform: rotateY(0); /* Show back view */
}

Loading