Follow us on the instagram: https://www.instagram.com/webstreet_code/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Match Game</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(-45deg, #1a2a6c, #b21f1f, #fdbb2d, #0f2027);
background-size: 400% 400%;
animation: gradientBG 8s ease infinite;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 15px;
}
.card {
width: 80px;
height: 80px;
perspective: 1000px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s, box-shadow 0.3s;
transform-style: preserve-3d;
cursor: pointer;
}
.card-inner:hover {
box-shadow: 0 4px 20px rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.card-inner.flipped {
transform: rotateY(180deg);
}
.card-front,
.card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 10px;
}
.card-front {
background: #444;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.card-front span {
font-size: 2rem;
color: #fff;
}
.card-back {
background: #fff;
transform: rotateY(180deg);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
font-weight: bold;
border-radius: 10px;
}
.red-heart {
color: red;
}
.yellow-heart {
color: gold;
}
.orange-heart {
color: orange;
}
@keyframes glow {
0% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
50% { box-shadow: 0 0 30px rgba(255, 255, 255, 0.5); }
100% { box-shadow: 0 0 10px rgba(255, 255, 255, 0.2); }
}
</style>
</head>
<body>
<h1>CARD MATCH GAME</h1>
<div class="grid" id="grid"></div>
<script>
const logos = [];
const logoTypes = ["❤️", "💛", "🧡"];
for (let i = 0; i < 16; i++) {
logos.push(logoTypes[Math.floor(Math.random() * logoTypes.length)]);
}
logos.sort(() => Math.random() - 0.5);
const grid = document.getElementById("grid");
let flippedCards = [];
let matchedPairs = 0;
logos.forEach((logo, index) => {
const card = document.createElement("div");
card.classList.add("card")
const cardInner = document.createElement("div");
cardInner.classList.add("card-inner");
cardInner.setAttribute("data-logo", logo);
const cardFront = document.createElement("div");
cardFront.classList.add("card-front");
cardFront.innerHTML = `<span>?</span>`;
const cardBack = document.createElement("div");
cardBack.classList.add("card-back");
if (logo === "❤️") cardBack.classList.add("red-heart");
if (logo === "💛") cardBack.classList.add("yellow-heart");
if (logo === "🧡") cardBack.classList.add("orange-heart");
cardBack.innerHTML = logo;
cardInner.appendChild(cardFront);
cardInner.appendChild(cardBack);
card.appendChild(cardInner);
grid.appendChild(card);
card.addEventListener("click", () => {
if (cardInner.classList.contains("flipped") || flippedCards.length === 2) return;
cardInner.classList.add("flipped");
flippedCards.push(cardInner);
if (flippedCards.length === 2) {
const [first, second] = flippedCards;
const firstLogo = first.getAttribute("data-logo");
const secondLogo = second.getAttribute("data-logo");
if (firstLogo === secondLogo) {
setTimeout(() => {
first.style.animation = "glow 1s infinite";
second.style.animation = "glow 1s infinite";
setTimeout(() => {
first.parentElement.style.transform = "translateY(-50px)";
second.parentElement.style.transform = "translateY(-50px)";
setTimeout(() => {
first.parentElement.remove();
second.parentElement.remove();
matchedPairs++;
if (matchedPairs === 8) alert("You win!");
}, 500);
}, 500);
}, 500);
} else {
setTimeout(() => {
first.classList.remove("flipped");
second.classList.remove("flipped");
}, 1000);
}
flippedCards = [];
}
});
});
</script>
</body>
</html>
Top comments (0)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.