|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Memory Match</title> |
|
<style> |
|
* { |
|
margin: 0; |
|
padding: 0; |
|
box-sizing: border-box; |
|
} |
|
|
|
body { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
min-height: 100vh; |
|
background: linear-gradient(45deg, #1a1a1a, #2d2d2d); |
|
font-family: 'Segoe UI', sans-serif; |
|
color: #fff; |
|
} |
|
|
|
.game-container { |
|
padding: 2rem; |
|
} |
|
|
|
.controls { |
|
display: flex; |
|
gap: 2rem; |
|
margin-bottom: 2rem; |
|
align-items: center; |
|
} |
|
|
|
.stats { |
|
background: rgba(255, 255, 255, 0.1); |
|
padding: 1rem 2rem; |
|
border-radius: 10px; |
|
font-size: 1.2rem; |
|
} |
|
|
|
select { |
|
padding: 0.5rem 1rem; |
|
border-radius: 5px; |
|
background: #3a3a3a; |
|
color: #fff; |
|
border: none; |
|
cursor: pointer; |
|
} |
|
|
|
.grid { |
|
display: grid; |
|
gap: 1rem; |
|
perspective: 1000px; |
|
} |
|
|
|
.card { |
|
width: 100px; |
|
height: 100px; |
|
position: relative; |
|
transform-style: preserve-3d; |
|
transition: transform 0.6s; |
|
cursor: pointer; |
|
} |
|
|
|
.card.flipped { |
|
transform: rotateY(180deg); |
|
} |
|
|
|
.card-front, .card-back { |
|
position: absolute; |
|
width: 100%; |
|
height: 100%; |
|
backface-visibility: hidden; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 2rem; |
|
border-radius: 10px; |
|
box-shadow: 0 0 10px rgba(0,0,0,0.3); |
|
} |
|
|
|
.card-front { |
|
background: linear-gradient(135deg, #4a90e2, #357abd); |
|
} |
|
|
|
.card-back { |
|
background: white; |
|
transform: rotateY(180deg); |
|
color: #333; |
|
} |
|
|
|
.matched { |
|
animation: match 0.5s ease-in-out; |
|
} |
|
|
|
@keyframes match { |
|
0%, 100% { transform: scale(1) rotateY(180deg); } |
|
50% { transform: scale(1.1) rotateY(180deg); } |
|
} |
|
|
|
button { |
|
padding: 0.5rem 1rem; |
|
border: none; |
|
border-radius: 5px; |
|
background: #4a90e2; |
|
color: white; |
|
cursor: pointer; |
|
transition: background 0.3s; |
|
} |
|
|
|
button:hover { |
|
background: #357abd; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<div class="game-container"> |
|
<div class="controls"> |
|
<div class="stats"> |
|
<span>Score: <span id="score">0</span></span> |
|
<span style="margin-left: 1rem">Time: <span id="timer">0:00</span></span> |
|
</div> |
|
<select id="difficulty"> |
|
<option value="easy">Easy (4x4)</option> |
|
<option value="medium">Medium (6x6)</option> |
|
<option value="hard">Hard (8x8)</option> |
|
</select> |
|
<button id="newGame">New Game</button> |
|
</div> |
|
<div class="grid" id="grid"></div> |
|
</div> |
|
|
|
<script> |
|
const audioContext = new (window.AudioContext || window.webkitAudioContext)(); |
|
|
|
const createSound = (frequency, type = 'sine') => { |
|
const oscillator = audioContext.createOscillator(); |
|
const gainNode = audioContext.createGain(); |
|
oscillator.type = type; |
|
oscillator.frequency.value = frequency; |
|
oscillator.connect(gainNode); |
|
gainNode.connect(audioContext.destination); |
|
return { oscillator, gainNode }; |
|
}; |
|
|
|
const playSound = (frequency, duration = 0.1) => { |
|
const sound = createSound(frequency); |
|
sound.gainNode.gain.setValueAtTime(0.1, audioContext.currentTime); |
|
sound.oscillator.start(); |
|
sound.oscillator.stop(audioContext.currentTime + duration); |
|
}; |
|
|
|
class MemoryGame { |
|
constructor() { |
|
this.grid = document.getElementById('grid'); |
|
this.scoreElement = document.getElementById('score'); |
|
this.timerElement = document.getElementById('timer'); |
|
this.difficultySelect = document.getElementById('difficulty'); |
|
this.newGameBtn = document.getElementById('newGame'); |
|
|
|
this.cards = []; |
|
this.flippedCards = []; |
|
this.matchedPairs = 0; |
|
this.score = 0; |
|
this.timer = 0; |
|
this.timerInterval = null; |
|
|
|
this.setupEventListeners(); |
|
this.startNewGame(); |
|
} |
|
|
|
setupEventListeners() { |
|
this.newGameBtn.addEventListener('click', () => this.startNewGame()); |
|
this.difficultySelect.addEventListener('change', () => this.startNewGame()); |
|
} |
|
|
|
startNewGame() { |
|
this.grid.innerHTML = ''; |
|
this.cards = []; |
|
this.flippedCards = []; |
|
this.matchedPairs = 0; |
|
this.score = 0; |
|
this.scoreElement.textContent = '0'; |
|
clearInterval(this.timerInterval); |
|
this.timer = 0; |
|
this.updateTimer(); |
|
|
|
const difficulty = this.difficultySelect.value; |
|
const size = difficulty === 'easy' ? 4 : difficulty === 'medium' ? 6 : 8; |
|
|
|
this.grid.style.gridTemplateColumns = `repeat(${size}, 100px)`; |
|
|
|
const pairs = (size * size) / 2; |
|
const symbols = this.generateSymbols(pairs); |
|
this.createCards(symbols); |
|
|
|
this.startTimer(); |
|
} |
|
|
|
generateSymbols(pairs) { |
|
const emojis = ['🎨', '🎮', '🎲', '🎭', '🎪', '🎨', '🎯', '🎱', '🎳', '🎼', |
|
'🎵', '🎹', '🎺', '🎸', '🎻', '🎬', '🎤', '🎧', '🎙', '🎚', |
|
'🎛', '🎞', '📽', '🎥', '📺', '📷', '📸', '📹', '📼', '🎉', |
|
'🎊', '🎎', '🎈', '🎁', '🎫', '🎠', '🎡', '🎢']; |
|
|
|
const selectedEmojis = [...emojis].sort(() => Math.random() - 0.5).slice(0, pairs); |
|
return [...selectedEmojis, ...selectedEmojis].sort(() => Math.random() - 0.5); |
|
} |
|
|
|
createCards(symbols) { |
|
symbols.forEach((symbol, index) => { |
|
const card = document.createElement('div'); |
|
card.className = 'card'; |
|
card.innerHTML = ` |
|
<div class="card-front">?</div> |
|
<div class="card-back">${symbol}</div> |
|
`; |
|
card.addEventListener('click', () => this.flipCard(card, symbol)); |
|
this.grid.appendChild(card); |
|
this.cards.push(card); |
|
}); |
|
} |
|
|
|
flipCard(card, symbol) { |
|
if (this.flippedCards.length === 2 || card.classList.contains('flipped') || |
|
card.classList.contains('matched')) return; |
|
|
|
card.classList.add('flipped'); |
|
playSound(440); |
|
|
|
this.flippedCards.push({ card, symbol }); |
|
|
|
if (this.flippedCards.length === 2) { |
|
this.checkMatch(); |
|
} |
|
} |
|
|
|
checkMatch() { |
|
const [card1, card2] = this.flippedCards; |
|
|
|
if (card1.symbol === card2.symbol) { |
|
setTimeout(() => { |
|
card1.card.classList.add('matched'); |
|
card2.card.classList.add('matched'); |
|
playSound(880, 0.2); |
|
this.matchedPairs++; |
|
this.score += 10; |
|
this.scoreElement.textContent = this.score; |
|
|
|
if (this.matchedPairs === this.cards.length / 2) { |
|
this.endGame(); |
|
} |
|
}, 500); |
|
} else { |
|
setTimeout(() => { |
|
card1.card.classList.remove('flipped'); |
|
card2.card.classList.remove('flipped'); |
|
playSound(220, 0.2); |
|
this.score = Math.max(0, this.score - 5); |
|
this.scoreElement.textContent = this.score; |
|
}, 1000); |
|
} |
|
|
|
this.flippedCards = []; |
|
} |
|
|
|
startTimer() { |
|
this.timerInterval = setInterval(() => { |
|
this.timer++; |
|
this.updateTimer(); |
|
}, 1000); |
|
} |
|
|
|
updateTimer() { |
|
const minutes = Math.floor(this.timer / 60); |
|
const seconds = this.timer % 60; |
|
this.timerElement.textContent = |
|
`${minutes}:${seconds.toString().padStart(2, '0')}`; |
|
} |
|
|
|
endGame() { |
|
clearInterval(this.timerInterval); |
|
setTimeout(() => { |
|
alert(`Congratulations! You won!\nScore: ${this.score}\nTime: ${this.timerElement.textContent}`); |
|
}, 500); |
|
} |
|
} |
|
|
|
new MemoryGame(); |
|
</script> |
|
</body> |
|
</html> |
