<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fairy Matching Game</title>
<style>
body {
font-family: 'Comic Sans MS', cursive;
background: linear-gradient(to bottom right, #fce4ec, #f8d7f2);
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
margin: 20px;
color: #8e44ad;
text-shadow: 2px 2px 4px #fff;
}
.game-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
width: 90vw;
max-width: 600px;
}
.card {
width: 45vw;
height: 45vw;
background: #fff0f6;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
cursor: pointer;
transition: transform 0.3s;
}
.[Link] {
background: #ffd1dc;
transform: rotateY(180deg);
}
.card img {
width: 70%;
height: 70%;
transition: transform 0.3s;
}
.controls {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
button {
padding: 10px 20px;
border-radius: 25px;
border: none;
background: #f8cdd0;
color: #8e44ad;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #f2a6b2;
}
.status {
font-size: 1.2em;
margin-bottom: 10px;
}
@media (min-width: 600px) {
.card {
width: 120px;
height: 120px;
}
}
</style>
</head>
<body>
<h1>✨ Fairy Matching Game ✨</h1>
<div class="status" id="status">Level 1 - Find matching pairs</div>
<div class="controls">
<button onclick="startGame(1)">Restart Level</button>
<button onclick="nextLevel()">Next Level</button>
</div>
<div class="game-container" id="gameContainer"></div>
<script>
const levels = [
{ pairs: 3, time: 45 },
{ pairs: 6, time: 60 },
{ pairs: 9, time: 75 },
{ pairs: 12, time: 90 }
];
let currentLevel = 0;
let cards = [];
let firstCard = null;
let lockBoard = false;
let timer = null;
const images = [
'[Link] // fairy
'[Link] // flower
'[Link] // star
'[Link] // butterfly
'[Link] // moon
'[Link] // wand
];
function createLevel(level) {
const container = [Link]('gameContainer');
[Link] = '';
const pairs = levels[level].pairs;
cards = [];
// Create card pairs
const cardValues = [];
for (let i = 0; i < pairs; i++) {
const img = images[i % [Link]];
[Link](img, img);
}
// Shuffle cards
for (let i = [Link] - 1; i > 0; i--) {
const j = [Link]([Link]() * (i + 1));
[cardValues[i], cardValues[j]] = [cardValues[j], cardValues[i]];
}
[Link](value => {
const card = [Link]('div');
[Link] = 'card';
[Link] = value;
const img = [Link]('img');
[Link] = '[Link] // default image
[Link] = value;
[Link](img);
[Link]('click', () => flipCard(card));
[Link](card);
[Link]({ element: card, img: img, matched: false });
});
startTimer(levels[level].time);
updateStatus(`Level ${level + 1} - ${levels[level].time} seconds`);
}
function flipCard(card) {
if (lockBoard) return;
if () {
[Link]('flipped');
[Link]('img').src = [Link];
if (!firstCard) {
firstCard = card;
} else {
checkMatch(card);
}
}
}
function checkMatch(secondCard) {
lockBoard = true;
const firstImg = [Link];
const secondImg = [Link];
if (firstImg === secondImg) {
// Match found
[Link]('img').src = firstImg;
[Link]('img').src = secondImg;
[Link]('matched');
[Link]('matched');
checkWin();
} else {
// No match
setTimeout(() => {
[Link]('flipped');
[Link]('flipped');
[Link]('img').src =
'[Link]
[Link]('img').src =
'[Link]
}, 1000);
}
firstCard = null;
lockBoard = false;
}
function checkWin() {
const matchedCards = [Link]('.[Link]');
if ([Link] === [Link]) {
setTimeout(() => {
currentLevel++;
if (currentLevel < [Link]) {
updateStatus(`Level ${currentLevel + 1} - Next level
unlocked!`);
createLevel(currentLevel);
} else {
updateStatus('🎉 You completed all levels! 🎉');
}
}, 500);
}
}
function startTimer(time) {
let remaining = time;
updateStatus(`Time left: ${remaining}s`);
timer = setInterval(() => {
remaining--;
updateStatus(`Time left: ${remaining}s`);
if (remaining <= 0) {
clearInterval(timer);
updateStatus('⏰ Time\'s up! Try again!');
lockBoard = true;
}
}, 1000);
}
function startGame(level=0) {
currentLevel = level;
createLevel(level);
}
function nextLevel() {
if (currentLevel < [Link] - 1) {
currentLevel++;
createLevel(currentLevel);
}
}
function updateStatus(text) {
[Link]('status').textContent = text;
}
// Initialize game
startGame();
</script>
</body>
</html>