console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>同义词连连看</title>
    <style>
        :root {
            --game-bg: #C7EDCC;
            --cell-size: 40px;
        }

        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #C7EDCC 0%, #E5F3D0 100%);
        }

        .game-container {
            width: 430px;
            height: 932px;
            background: var(--game-bg);
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0,0,0,0.1);
            overflow: hidden;
            display: grid;
            grid-template-rows: auto 1fr auto;
        }

        .game-panel {
            display: grid;
            grid-template-columns: repeat(10, var(--cell-size));
            grid-template-rows: repeat(5, var(--cell-size));
            gap: 2px;
            transition: all 0.3s;
        }

        .cell {
            background: white;
            border: 1px solid #ddd;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
        }

        .selected {
            background: #FFD700;
        }

        .connection {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        @keyframes blink {
            0% { opacity: 1; }
            50% { opacity: 0; }
            100% { opacity: 1; }
        }

        .blink {
            animation: blink 0.5s linear 1 forwards;
        }

        .celebration {
            position: absolute;
            width: 100%;
            height: 100%;
            background: url('fireworks.png') center center no-repeat;
            background-size: contain;
            opacity: 0;
            transition: opacity 0.5s;
        }

        .score-panel {
            padding: 15px;
            background: rgba(255,255,255,0.9);
            border-bottom: 2px solid #FFD700;
        }

        .controls {
            padding: 15px;
            background: rgba(255,255,255,0.9);
            border-top: 2px solid #FFD700;
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <div class="score-panel">
            <div>剩余时间: <span id="time">120</span></div>
            <div>当前分数: <span id="score">0</span></div>
            <div>历史最高分: <span id="high-score">0</span></div>
        </div>
        <div class="game-panel" id="game-panel"></div>
        <div class="controls">
            <button id="new-game">开始新游戏</button>
        </div>
    </div>

    <audio id="match-sound" src="match.mp3"></audio>
    <audio id="celebrate-sound" src="celebrate.mp3"></audio>

    <script>
        // 配置参数
        const config = {
            synonymPairs: [
                // 100组同义词示例（需补充完整）
                { word1: '美丽', word2: '漂亮' },
                { word1: '高兴', word2: '快乐' },
                { word1: '强大', word2: '强壮' },
                // ...更多同义词
            ],
            gridSize: { cols: 10, rows: 5 },
            timeLimit: 120,
            scoreIncrement: 10,
            maxBends: 2,
            cellSize: 40
        };

        // 游戏状态管理
        let cells = [];
        let selected = [];
        let timer;
        let score = 0;
        let timeLeft = config.timeLimit;
        let highScore = localStorage.getItem('highScore') || 0;

        // 初始化游戏
        function initGame() {
            resetGame();
            generateGrid();
            startTimer();
            updateUI();
        }

        // 生成游戏网格
        function generateGrid() {
            const panel = document.getElementById('game-panel');
            panel.innerHTML = '';
            
            // 从词库中随机选取25组
            const selectedPairs = config.synonymPairs
                .filter(() => Math.random() > 0.5)
                .slice(0, 25);
            
            // 生成网格布局（需实现完整逻辑）
            for (let row = 0; row < config.gridSize.rows; row++) {
                for (let col = 0; col < config.gridSize.cols; col++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = row;
                    cell.dataset.col = col;
                    cell.textContent = selectedPairs[row * col % selectedPairs.length].word1;
                    cell.addEventListener('click', handleCellClick);
                    panel.appendChild(cell);
                }
            }
        }

        // 处理单元格点击
        function handleCellClick(e) {
            const cell = e.target;
            if (selected.length < 2 && !cell.classList.contains('selected')) {
                cell.classList.add('selected');
                selected.push(cell);
                
                if (selected.length === 2) {
                    checkMatch();
                }
            }
        }

        // 检查匹配
        function checkMatch() {
            const [cell1, cell2] = selected;
            const word1 = cell1.textContent;
            const word2 = cell2.textContent;

            if (word1 === word2) {
                createConnection(cell1, cell2);
                score += 10;
                updateUI();
                setTimeout(() => {
                    cell1.remove();
                    cell2.remove();
                    selected = [];
                }, 1000);
            } else {
                selected.forEach(cell => cell.classList.remove('selected'));
                selected = [];
            }
        }

        // 创建连接动画
        function createConnection(cell1, cell2) {
            const connection = document.createElement('div');
            connection.className = 'connection blink';
            connection.style.backgroundColor = 'red';
            cell1.appendChild(connection);
            cell2.appendChild(connection.cloneNode(true));
        }

        // 更新UI
        function updateUI() {
            document.getElementById('score').textContent = score;
            document.getElementById('high-score').textContent = highScore;
            document.getElementById('time').textContent = timeLeft;
        }

        // 倒计时
        function startTimer() {
            timer = setInterval(() => {
                timeLeft--;
                updateUI();
                
                if (timeLeft <= 0) {
                    clearInterval(timer);
                    endGame();
                }
            }, 1000);
        }

        // 结束游戏
        function endGame() {
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('highScore', highScore);
            }
            document.getElementById('celebrate-sound').play();
            showCelebration();
        }

        // 重置游戏
        function resetGame() {
            score = 0;
            timeLeft = config.timeLimit;
            updateUI();
        }

        // 显示庆祝动画
        function showCelebration() {
            const celebration = document.createElement('div');
            celebration.className = 'celebration';
            celebration.style.opacity = 1;
            document.querySelector('.game-container').appendChild(celebration);
            
            setTimeout(() => {
                celebration.remove();
            }, 3000);
        }

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