HTML版对对碰游戏基础版代码

原创于 2025-03-12 19:39:27 发布 · 145 阅读
CC 4.0 BY-SA版权
文章标签：
<!DOCTYPE html>
<html>
<head>
    <title>对对碰游戏</title>
    <style>
        .game-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            max-width: 500px;
            margin: 20px auto;
        }

        .card {
            width: 100px;
            height: 100px;
            background-color: #2196F3;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
            transition: transform 0.6s;
            transform-style: preserve-3d;
            position: relative;
        }

        .card.flipped {
            background-color: white;
            transform: rotateY(180deg);
        }

        .card.matched {
            background-color: #4CAF50;
            cursor: default;
        }

        .timer {
            text-align: center;
            font-size: 24px;
            margin: 20px;
        }

        .card-front,
        .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }

        .card-front {
            transform: rotateY(180deg);
        }

        .card-back {
            background-color: #2196F3;
        }
    </style>
</head>
<body>
    <div class="timer">剩余时间: <span id="time">100</span>秒</div>
    <div class="game-container" id="gameBoard"></div>

    <script>
        const symbols = ['❤️', '★', '♠', '♣', '♦', '♥', '☀', '☁️'];
        let flippedCards = [];
        let canFlip = true;
        let timerId;
        let timeLeft = 100;

        function createGame() {
            const gameBoard = document.getElementById('gameBoard');
            const cards = [...symbols, ...symbols]
                .sort(() => Math.random() - 0.5)
                .map((symbol, index) => createCard(symbol, index));

            gameBoard.innerHTML = '';
            cards.forEach(card => gameBoard.appendChild(card));
        }

        function createCard(symbol, index) {
            const card = document.createElement('div');
            card.className = 'card';
            card.dataset.index = index;

            const back = document.createElement('div');
            back.className = 'card-back';
            
            const front = document.createElement('div');
            front.className = 'card-front';
            front.textContent = symbol;

            card.appendChild(back);
            card.appendChild(front);

            card.addEventListener('click', () => handleCardClick(card));
            return card;
        }

        function handleCardClick(card) {
            if (!canFlip || card.classList.contains('flipped') || card.classList.contains('matched')) return;

            card.classList.add('flipped');
            flippedCards.push(card);

            if (flippedCards.length === 2) {
                canFlip = false;
                checkMatch();
            }
        }

        function checkMatch() {
            const [card1, card2] = flippedCards;
            const isMatch = card1.querySelector('.card-front').textContent === 
                          card2.querySelector('.card-front').textContent;

            if (isMatch) {
                card1.classList.add('matched');
                card2.classList.add('matched');
                checkWin();
            } else {
                setTimeout(() => {
                    card1.classList.remove('flipped');
                    card2.classList.remove('flipped');
                }, 1000);
            }

            flippedCards = [];
            setTimeout(() => canFlip = true, 1000);
        }

        function checkWin() {
            const matchedCards = document.querySelectorAll('.matched').length;
            if (matchedCards === 16) {
                clearInterval(timerId);
                alert('恭喜你赢了！');
            }
        }

        function startTimer() {
            timerId = setInterval(() => {
                timeLeft--;
                document.getElementById('time').textContent = timeLeft;
                
                if (timeLeft <= 0) {
                    clearInterval(timerId);
                    alert('时间到了！游戏结束');
                    document.querySelectorAll('.card').forEach(card => {
                        card.style.pointerEvents = 'none';
                    });
                }
            }, 1000);
        }

        // 初始化游戏
        createGame();
        startTimer();
    </script>
</body>
</html>