CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Memory Game</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.enhancedmemorygame3742-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.enhancedmemorygame3742-container {
display: flex;
flex-direction: row;
gap: 20px;
}
.enhancedmemorygame3742-game-info {
width: 200px;
}
.enhancedmemorygame3742-game-board {
display: grid;
gap: 10px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.enhancedmemorygame3742-card {
width: 80px;
height: 80px;
background-color: #3498db;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
cursor: pointer;
transition: transform 0.3s;
border-radius: 5px;
}
.enhancedmemorygame3742-card.flipped {
transform: rotateY(180deg);
background-color: #2ecc71;
}
.enhancedmemorygame3742-button {
margin: 10px 0;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
}
.enhancedmemorygame3742-button:hover {
background-color: #2980b9;
}
.enhancedmemorygame3742-difficulty {
margin-top: 20px;
}
@media (max-width: 768px) {
.enhancedmemorygame3742-container {
flex-direction: column;
}
.enhancedmemorygame3742-game-info {
width: 100%;
}
}
</style>
</head>
<body class="enhancedmemorygame3742-body">
<div class="enhancedmemorygame3742-container">
<div class="enhancedmemorygame3742-game-info">
<h1>Enhanced Memory Game</h1>
<p>Match all the pairs of cards to win!</p>
<h3>Instructions:</h3>
<ul>
<li>Click on a card to reveal its icon</li>
<li>Click on another card to find its match</li>
<li>If the cards match, they stay flipped</li>
<li>If they don't match, they flip back</li>
<li>Match all pairs to win the game</li>
</ul>
<p>Time: <span id="timer">00:00</span></p>
<p>Moves: <span id="moves">0</span></p>
<button id="startButton" class="enhancedmemorygame3742-button">Start Game</button>
<button id="newGameButton" class="enhancedmemorygame3742-button">New Game</button>
<div class="enhancedmemorygame3742-difficulty">
<label for="difficultySelect">Difficulty:</label>
<select id="difficultySelect">
<option value="easy">Easy (4x4)</option>
<option value="medium">Medium (6x6)</option>
<option value="hard">Hard (8x8)</option>
</select>
</div>
<div>
<label for="musicToggle">
<input type="checkbox" id="musicToggle"> Background Music
</label>
</div>
</div>
<div id="gameBoard" class="enhancedmemorygame3742-game-board"></div>
</div>
<script>
const gameBoard = document.getElementById('gameBoard');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const timerDisplay = document.getElementById('timer');
const movesDisplay = document.getElementById('moves');
const difficultySelect = document.getElementById('difficultySelect');
const musicToggle = document.getElementById('musicToggle');
let cards = [];
let flippedCards = [];
let matchedPairs = 0;
let moves = 0;
let gameStarted = false;
let timerInterval;
let seconds = 0;
let gridSize = 4;
const icons = [
'fa-heart', 'fa-star', 'fa-smile', 'fa-sun', 'fa-moon', 'fa-car', 'fa-tree', 'fa-bell',
'fa-coffee', 'fa-apple', 'fa-book', 'fa-music', 'fa-camera', 'fa-plane', 'fa-bicycle', 'fa-fish',
'fa-gift', 'fa-key', 'fa-leaf', 'fa-paw', 'fa-rocket', 'fa-umbrella', 'fa-world', 'fa-crown',
'fa-fire', 'fa-ghost', 'fa-hat-wizard', 'fa-ice-cream', 'fa-jedi', 'fa-kiwi-bird', 'fa-lemon', 'fa-medal'
];
const flipSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-quick-jump-arcade-game-239.mp3');
const matchSound = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-complete-or-approved-mission-205.mp3');
const backgroundMusic = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-game-level-music-689.mp3');
backgroundMusic.loop = true;
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function createBoard() {
gameBoard.innerHTML = '';
gameBoard.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
cards = [];
flippedCards = [];
matchedPairs = 0;
moves = 0;
movesDisplay.textContent = moves;
const shuffledIcons = shuffleArray(icons.slice(0, (gridSize * gridSize) / 2));
const gameIcons = shuffleArray([...shuffledIcons, ...shuffledIcons]);
for (let i = 0; i < gridSize * gridSize; i++) {
const card = document.createElement('div');
card.classList.add('enhancedmemorygame3742-card');
card.dataset.value = gameIcons[i];
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
cards.push(card);
}
}
function flipCard() {
if (!gameStarted) return;
if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
this.classList.add('flipped');
this.innerHTML = `<i class="fas ${this.dataset.value}"></i>`;
flippedCards.push(this);
flipSound.play();
if (flippedCards.length === 2) {
moves++;
movesDisplay.textContent = moves;
setTimeout(checkMatch, 500);
}
}
}
function checkMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.value === card2.dataset.value) {
matchedPairs++;
matchSound.play();
if (matchedPairs === (gridSize * gridSize) / 2) {
endGame();
}
} else {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
card1.innerHTML = '';
card2.innerHTML = '';
}
flippedCards = [];
}
function startGame() {
if (!gameStarted) {
gameStarted = true;
createBoard();
startTimer();
startButton.textContent = 'Pause';
if (musicToggle.checked) {
backgroundMusic.play();
}
} else {
gameStarted = false;
clearInterval(timerInterval);
startButton.textContent = 'Resume';
backgroundMusic.pause();
}
}
function newGame() {
gameStarted = false;
clearInterval(timerInterval);
seconds = 0;
timerDisplay.textContent = '00:00';
startButton.textContent = 'Start Game';
createBoard();
backgroundMusic.pause();
backgroundMusic.currentTime = 0;
}
function startTimer() {
clearInterval(timerInterval);
timerInterval = setInterval(() => {
seconds++;
const minutes = Math.floor(seconds / 60);
const remainingSeconds = seconds % 60;
timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
}, 1000);
}
function endGame() {
gameStarted = false;
clearInterval(timerInterval);
alert(`Congratulations! You won in ${moves} moves and ${timerDisplay.textContent} time.`);
backgroundMusic.pause();
backgroundMusic.currentTime = 0;
}
function changeDifficulty() {
switch (difficultySelect.value) {
case 'easy':
gridSize = 4;
break;
case 'medium':
gridSize = 6;
break;
case 'hard':
gridSize = 8;
break;
}
newGame();
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', newGame);
difficultySelect.addEventListener('change', changeDifficulty);
musicToggle.addEventListener('change', () => {
if (gameStarted) {
if (musicToggle.checked) {
backgroundMusic.play();
} else {
backgroundMusic.pause();
}
}
});
createBoard();
</script>
</body>
</html>