Practical project to create a memory game in HTML5 and CSS3
Creating a memory game in HTML5 and CSS3 can be a fun and educational project! Here's a basic outline of how you can get started: ## HTML Structure: You'll need to create a basic HTML structure for your memory game. This will include the game board, cards, and any other elements you want to include. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Memory Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="memory-game"> <!-- Game board and cards will be dynamically generated here --> </div> <script src="script.js"></script> </body> </html> ``` ## CSS Styles: Define the styles for your memory game, including card appearance, board layout, and any animations you want to include. ```css /* styles.css */ .memory-game { display: flex; flex-wrap: wrap; justify-content: space-around; max-width: 600px; margin: 0 auto; } .card { width: 100px; height: 100px; background-color: #ccc; margin: 10px; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; transition: transform 0.3s ease; } .card.flipped { background-color: #fff; } .matched { background-color: #8BC34A; pointer-events: none; } ``` ## JavaScript Logic: You'll need JavaScript to handle the game logic, including flipping cards, checking for matches, and resetting the game. ```js // script.js const cards = ["🍉", "🍉", "🍎", "🍎", "🍇", "🍇", "🍌", "🍌", "🍒", "🍒", "🍓", "🍓", "🍍", "🍍", "🥑", "🥑"]; let flippedCards = []; let matchedCards = []; function shuffle(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]]; } } function createBoard() { const memoryGame = document.querySelector('.memory-game'); shuffle(cards); cards.forEach((emoji, index) => { const card = document.createElement('div'); card.classList.add('card'); card.dataset.index = index; card.innerHTML = emoji; card.addEventListener('click', flipCard); memoryGame.appendChild(card); }); } function flipCard() { if (flippedCards.length < 2 && !this.classList.contains('flipped') && !this.classList.contains('matched')) { this.classList.add('flipped'); flippedCards.push(this); if (flippedCards.length === 2) { checkMatch(); } } } function checkMatch() { if (flippedCards[0].innerHTML === flippedCards[1].innerHTML) { flippedCards.forEach(card => card.classList.add('matched')); matchedCards.push(flippedCards[0], flippedCards[1]); flippedCards = []; if (matchedCards.length === cards.length) { setTimeout(() => { alert('Congratulations! You won!'); }, 500); } } else { setTimeout(() => { flippedCards.forEach(card => card.classList.remove('flipped')); flippedCards = []; }, 1000); } } createBoard(); ``` ## How It Works: + The HTML structure creates a container for the game (memory-game). + CSS styles define the appearance of cards and the game board. + JavaScript handles the game logic: - **createBoard()** dynamically generates the game board with shuffled cards. - **flipCard()** flips the clicked card. - **checkMatch()** checks if two flipped cards match and updates the game state accordingly. Let me know in the comments how your result turned out.