Untitled
unknown
plain_text
5 months ago
3.2 kB
2
Indexable
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Antonym Matching Game</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Antonym Matching Game</h1> <div id="timer">Time left: <span id="time-left">60</span> seconds</div> <div id="score">Score: 0</div> <div id="game-board" class="game-board"> <!-- Cards will be generated here --> </div> <buttonbody { font-family: Arial, sans-serif; text-align: center; } #game-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 20px auto; width: 80%; } .card { padding: 20px; background-color: #f0f0f0; border: 1px solid #ccc; cursor: pointer; } .card.flipped { background-color: #d1ffd1; /* Color when the card is flipped */ } button { margin-top: 20px; } id="restart">Restart</button> <script src="game.js"></script> </body> const words = [ { word: "hot", antonym: "cold" }, { word: "happy", antonym: "sad" }, { word: "big", antonym: "small" }, { word: "light", antonym: "heavy" }, // Add more word pairs here ]; let flippedCards = []; let matchedPairs = 0; let score = 0; let timeLeft = 60; let timer; function startGame() { matchedPairs = 0; score = 0; document.getElementById("score").textContent = `Score: ${score}`; document.getElementById("time-left").textContent = timeLeft; const shuffledWords = [...words, ...words].sort(() => 0.5 - Math.random()); // Shuffle words const board = document.getElementById("game-board"); board.innerHTML = ""; // Clear the board shuffledWords.forEach(word => { const card = document.createElement("div"); card.classList.add("card"); card.textContent = word.word; card.dataset.antonym = word.antonym; card.addEventListener("click", flipCard); board.appendChild(card); }); timer = setInterval(() => { if (timeLeft <= 0) { clearInterval(timer); alert("Game Over! Your score: " + score); return; } timeLeft--; document.getElementById("time-left").textContent = timeLeft; }, 1000); } function flipCard(event) { const card = event.target; if (flippedCards.length < 2 && !card.classList.contains("flipped")) { card.classList.add("flipped"); flippedCards.push(card); if (flippedCards.length === 2) { checkMatch(); } } } function checkMatch() { const [card1, card2] = flippedCards; if (card1.dataset.antonym === card2.textContent || card2.dataset.antonym === card1.textContent) { matchedPairs++; score += 10; document.getElementById("score").textContent = `Score: ${score}`; flippedCards = []; if (matchedPairs === words.length) { clearInterval(timer); alert("You Win! Your score: " + score); } } else { setTimeout(() => { card1.classList.remove("flipped"); card2.classList.remove("flipped"); flippedCards = []; }, 1000); } } document.getElementById("restart").addEventListener("click", startGame); startGame(); </html>
Editor is loading...
Leave a Comment