|
|
<!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> |
|
|
<style> |
|
|
:root { |
|
|
--card-width: 120px; |
|
|
--card-height: 150px; |
|
|
--primary-color: #2c3e50; |
|
|
--secondary-color: #3498db; |
|
|
} |
|
|
|
|
|
* { |
|
|
box-sizing: border-box; |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
} |
|
|
|
|
|
body { |
|
|
min-height: 100vh; |
|
|
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.game-container { |
|
|
margin-top: 2rem; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
margin: 1rem 0; |
|
|
display: flex; |
|
|
gap: 1rem; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
padding: 0.5rem 1rem; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
color: white; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
.stats { |
|
|
display: flex; |
|
|
gap: 2rem; |
|
|
margin: 1rem; |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.board { |
|
|
display: grid; |
|
|
gap: 10px; |
|
|
padding: 20px; |
|
|
perspective: 1000px; |
|
|
} |
|
|
|
|
|
.card { |
|
|
width: var(--card-width); |
|
|
height: var(--card-height); |
|
|
position: relative; |
|
|
transform-style: preserve-3d; |
|
|
transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
|
|
cursor: pointer; |
|
|
} |
|
|
|
|
|
.card.flipped { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.card.matched { |
|
|
transform: rotateY(180deg) scale(0.95); |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.card-face { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
backface-visibility: hidden; |
|
|
border-radius: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 2rem; |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.card-front { |
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.card-back { |
|
|
background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); |
|
|
} |
|
|
|
|
|
.modal { |
|
|
position: fixed; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
background: rgba(0, 0, 0, 0.9); |
|
|
padding: 2rem; |
|
|
border-radius: 10px; |
|
|
text-align: center; |
|
|
display: none; |
|
|
} |
|
|
|
|
|
@keyframes match { |
|
|
0%, 100% { transform: rotateY(180deg) scale(1); } |
|
|
50% { transform: rotateY(180deg) scale(1.1); } |
|
|
} |
|
|
|
|
|
@keyframes mismatch { |
|
|
0%, 100% { transform: rotateY(180deg); } |
|
|
20%, 40%, 60%, 80% { transform: rotateY(180deg) translateX(-10px); } |
|
|
30%, 50%, 70%, 90% { transform: rotateY(180deg) translateX(10px); } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="game-container"> |
|
|
<h1>Memory Match</h1> |
|
|
<div class="controls"> |
|
|
<select id="difficulty" class="btn"> |
|
|
<option value="8">Easy (4x4)</option> |
|
|
<option value="18">Medium (6x6)</option> |
|
|
<option value="32">Hard (8x8)</option> |
|
|
</select> |
|
|
<button class="btn" id="start">New Game</button> |
|
|
</div> |
|
|
<div class="stats"> |
|
|
<div>Moves: <span id="moves">0</span></div> |
|
|
<div>Time: <span id="timer">0:00</span></div> |
|
|
<div>Score: <span id="score">0</span></div> |
|
|
</div> |
|
|
<div class="board" id="board"></div> |
|
|
</div> |
|
|
<div class="modal" id="win-modal"> |
|
|
<h2>Congratulations!</h2> |
|
|
<p>You completed the game in <span id="final-time"></span></p> |
|
|
<p>Final Score: <span id="final-score"></span></p> |
|
|
<button class="btn" onclick="startGame()">Play Again</button> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
|
|
let gameState = { |
|
|
flippedCards: [], |
|
|
matches: 0, |
|
|
moves: 0, |
|
|
score: 0, |
|
|
timer: 0, |
|
|
gameStarted: false, |
|
|
timerInterval: null |
|
|
}; |
|
|
|
|
|
const emojis = ['🎮', '🎲', '🎯', '🎨', '🎭', '🎪', '🎫', '🎬', |
|
|
'🎤', '🎧', '🎷', '🎸', '🎹', '🎺', '🎻', '🥁', |
|
|
'⚽️', '🏀', '🏈', '⚾️', '🎾', '🏐', '🏉', '🎱', |
|
|
'🏓', '🏸', '🥊', '🥋', '🎣', '⛳️', '🏹', '🎽']; |
|
|
|
|
|
function createAudioBuffer(frequency, duration) { |
|
|
const sampleRate = audioContext.sampleRate; |
|
|
const buffer = audioContext.createBuffer(1, duration * sampleRate, sampleRate); |
|
|
const data = buffer.getChannelData(0); |
|
|
|
|
|
for (let i = 0; i < buffer.length; i++) { |
|
|
data[i] = Math.sin(2 * Math.PI * frequency * i / sampleRate) * |
|
|
Math.exp(-5 * i / buffer.length); |
|
|
} |
|
|
|
|
|
return buffer; |
|
|
} |
|
|
|
|
|
const matchSound = createAudioBuffer(440, 0.1); |
|
|
const mismatchSound = createAudioBuffer(220, 0.1); |
|
|
|
|
|
function playSound(buffer) { |
|
|
const source = audioContext.createBufferSource(); |
|
|
source.buffer = buffer; |
|
|
source.connect(audioContext.destination); |
|
|
source.start(); |
|
|
} |
|
|
|
|
|
function createBoard() { |
|
|
const board = document.getElementById('board'); |
|
|
const difficulty = parseInt(document.getElementById('difficulty').value); |
|
|
const pairs = difficulty; |
|
|
const size = Math.sqrt(pairs * 2); |
|
|
|
|
|
board.style.gridTemplateColumns = `repeat(${size}, var(--card-width))`; |
|
|
board.innerHTML = ''; |
|
|
|
|
|
const selectedEmojis = emojis.slice(0, pairs); |
|
|
const cards = [...selectedEmojis, ...selectedEmojis] |
|
|
.sort(() => Math.random() - 0.5); |
|
|
|
|
|
cards.forEach((emoji, index) => { |
|
|
const card = document.createElement('div'); |
|
|
card.className = 'card'; |
|
|
card.dataset.value = emoji; |
|
|
card.dataset.index = index; |
|
|
card.innerHTML = ` |
|
|
<div class="card-face card-front">${emoji}</div> |
|
|
<div class="card-face card-back">?</div> |
|
|
`; |
|
|
card.addEventListener('click', flipCard); |
|
|
board.appendChild(card); |
|
|
}); |
|
|
} |
|
|
|
|
|
function flipCard() { |
|
|
if (!gameState.gameStarted) { |
|
|
startTimer(); |
|
|
gameState.gameStarted = true; |
|
|
} |
|
|
|
|
|
const card = this; |
|
|
if (card.classList.contains('flipped') || |
|
|
gameState.flippedCards.length >= 2) return; |
|
|
|
|
|
card.classList.add('flipped'); |
|
|
gameState.flippedCards.push(card); |
|
|
|
|
|
if (gameState.flippedCards.length === 2) { |
|
|
gameState.moves++; |
|
|
document.getElementById('moves').textContent = gameState.moves; |
|
|
checkMatch(); |
|
|
} |
|
|
} |
|
|
|
|
|
function checkMatch() { |
|
|
const [card1, card2] = gameState.flippedCards; |
|
|
const match = card1.dataset.value === card2.dataset.value; |
|
|
|
|
|
if (match) { |
|
|
playSound(matchSound); |
|
|
card1.classList.add('matched'); |
|
|
card2.classList.add('matched'); |
|
|
gameState.matches++; |
|
|
gameState.score += 100; |
|
|
card1.style.animation = card2.style.animation = 'match 0.5s ease'; |
|
|
|
|
|
if (gameState.matches === parseInt(document.getElementById('difficulty').value)) { |
|
|
endGame(); |
|
|
} |
|
|
} else { |
|
|
playSound(mismatchSound); |
|
|
card1.style.animation = card2.style.animation = 'mismatch 0.5s ease'; |
|
|
gameState.score = Math.max(0, gameState.score - 20); |
|
|
|
|
|
setTimeout(() => { |
|
|
card1.classList.remove('flipped'); |
|
|
card2.classList.remove('flipped'); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
setTimeout(() => { |
|
|
card1.style.animation = card2.style.animation = ''; |
|
|
}, 500); |
|
|
|
|
|
document.getElementById('score').textContent = gameState.score; |
|
|
gameState.flippedCards = []; |
|
|
} |
|
|
|
|
|
function startTimer() { |
|
|
gameState.timerInterval = setInterval(() => { |
|
|
gameState.timer++; |
|
|
const minutes = Math.floor(gameState.timer / 60); |
|
|
const seconds = gameState.timer % 60; |
|
|
document.getElementById('timer').textContent = |
|
|
`${minutes}:${seconds.toString().padStart(2, '0')}`; |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function endGame() { |
|
|
clearInterval(gameState.timerInterval); |
|
|
const modal = document.getElementById('win-modal'); |
|
|
document.getElementById('final-time').textContent = |
|
|
document.getElementById('timer').textContent; |
|
|
document.getElementById('final-score').textContent = gameState.score; |
|
|
modal.style.display = 'block'; |
|
|
} |
|
|
|
|
|
function startGame() { |
|
|
gameState = { |
|
|
flippedCards: [], |
|
|
matches: 0, |
|
|
moves: 0, |
|
|
score: 0, |
|
|
timer: 0, |
|
|
gameStarted: false, |
|
|
timerInterval: null |
|
|
}; |
|
|
|
|
|
document.getElementById('moves').textContent = '0'; |
|
|
document.getElementById('timer').textContent = '0:00'; |
|
|
document.getElementById('score').textContent = '0'; |
|
|
document.getElementById('win-modal').style.display = 'none'; |
|
|
|
|
|
createBoard(); |
|
|
clearInterval(gameState.timerInterval); |
|
|
} |
|
|
|
|
|
document.getElementById('start').addEventListener('click', startGame); |
|
|
document.getElementById('difficulty').addEventListener('change', startGame); |
|
|
|
|
|
|
|
|
startGame(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
