Untitled

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