| | <!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> |
