小学生成语接龙游戏edit icon

作者：
胡老的课堂工具
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
设置
BUG反馈
index.html
现在支持上传本地图片了！ 
            
            <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小学生成语接龙游戏</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #6dd5ed, #2193b0);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            color: #333;
        }
        
        /* 开始界面样式 */
        #start-screen {
            width: 100%;
            max-width: 500px;
            background-color: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
        }
        
        #start-screen h1 {
            color: #ff6b6b;
            font-size: 2.5rem;
            margin-bottom: 30px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        #start-screen p {
            font-size: 1.2rem;
            margin-bottom: 25px;
            color: #555;
        }
        
        .time-options {
            display: flex;
            justify-content: space-around;
            margin-bottom: 30px;
        }
        
        .time-option {
            padding: 15px 25px;
            background-color: #f1f1f1;
            border: 3px solid #ddd;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 1.2rem;
            font-weight: bold;
        }
        
        .time-option:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .time-option.selected {
            background-color: #4caf50;
            color: white;
            border-color: #3d8b40;
        }
        
        #start-btn {
            padding: 15px 40px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.3rem;
            font-weight: bold;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        #start-btn:hover {
            background-color: #3d8b40;
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        }
        
        /* 游戏界面样式 */
        #game-screen {
            display: none;
            width: 100%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            margin-top: 20px;
        }
        
        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 10px;
        }
        
        .timer {
            font-size: 1.5rem;
            font-weight: bold;
            color: #ff6b6b;
            padding: 8px 15px;
            background-color: #fff;
            border-radius: 10px;
            border: 2px solid #ff6b6b;
        }
        
        .game-info {
            display: flex;
            gap: 20px;
        }
        
        .current-word {
            font-size: 1.8rem;
            font-weight: bold;
            color: #339af0;
            text-align: center;
            margin: 20px 0;
            padding: 15px;
            background: linear-gradient(135deg, #e3f2fd, #bbdefb);
            border-radius: 10px;
        }
        
        .input-area {
            display: flex;
            margin-bottom: 20px;
        }
        
        input {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #339af0;
            border-radius: 10px 0 0 10px;
            font-size: 1.2rem;
            outline: none;
        }
        
        button {
            padding: 12px 20px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 0 10px 10px 0;
            cursor: pointer;
            font-size: 1.2rem;
            transition: background-color 0.3s;
        }
        
        button:hover {
            background-color: #3d8b40;
        }
        
        .actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        
        .actions button {
            border-radius: 10px;
            padding: 10px 15px;
            font-size: 1rem;
        }
        
        .hint-btn {
            background-color: #ff9800;
        }
        
        .hint-btn:hover {
            background-color: #e68a00;
        }
        
        .explain-btn {
            background-color: #9c27b0;
        }
        
        .explain-btn:hover {
            background-color: #7b1fa2;
        }
        
        .restart-btn {
            background-color: #f44336;
        }
        
        .restart-btn:hover {
            background-color: #d32f2f;
        }
        
        .history {
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 10px;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .history h3 {
            color: #5a67d8;
            margin-bottom: 10px;
        }
        
        .history-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        
        .history-item {
            background-color: #e9ecef;
            padding: 8px 12px;
            border-radius: 20px;
            font-size: 0.9rem;
        }
        
        .message {
            text-align: center;
            padding: 10px;
            margin: 10px 0;
            border-radius: 10px;
            font-weight: bold;
        }
        
        .success {
            background-color: #d4edda;
            color: #155724;
        }
        
        .error {
            background-color: #f8d7da;
            color: #721c24;
        }
        
        .explanation {
            margin-top: 20px;
            padding: 15px;
            background-color: #e3f2fd;
            border-radius: 10px;
            display: none;
        }
        
        .rules {
            margin-top: 20px;
            padding: 15px;
            background-color: #fff3cd;
            border-radius: 10px;
        }
        
        .rules h3 {
            color: #856404;
            margin-bottom: 10px;
        }
        
        .rules ol {
            padding-left: 20px;
        }
        
        .rules li {
            margin-bottom: 8px;
        }
        
        /* 游戏结束界面 */
        #game-over {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 100;
            justify-content: center;
            align-items: center;
        }
        
        #game-over-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 500px;
            width: 90%;
        }
        
        #game-over h2 {
            color: #ff6b6b;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        
        #final-score {
            font-size: 2rem;
            color: #4caf50;
            margin: 20px 0;
        }
        
        #play-again {
            padding: 15px 40px;
            background-color: #4caf50;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1.3rem;
            margin-top: 20px;
        }
        
        @media (max-width: 600px) {
            h1 {
                font-size: 2rem;
            }
            
            .input-area {
                flex-direction: column;
            }
            
            input {
                border-radius: 10px;
                margin-bottom: 10px;
            }
            
            button {
                border-radius: 10px;
            }
            
            .time-options {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- 开始界面 -->
    <div id="start-screen">
        <h1>小学生成语接龙游戏</h1>
        <p>请选择游戏时长，然后单击"开始游戏"</p>
        
        <div class="time-options">
            <div class="time-option" data-time="60">1分钟</div>
            <div class="time-option selected" data-time="120">2分钟</div>
            <div class="time-option" data-time="180">3分钟</div>
        </div>
        
        <button id="start-btn">开始游戏</button>
    </div>
    
    <!-- 游戏界面 -->
    <div id="game-screen">
        <div class="game-header">
            <div class="timer">剩余时间: <span id="time-left">02:00</span></div>
            <div class="game-info">
                <div>分数: <span id="score">0</span></div>
                <div>连续接龙: <span id="streak">0</span></div>
            </div>
        </div>
        
        <div class="current-word">
            当前成语: <span id="current-idom">胸有成竹</span>
        </div>
        
        <div class="input-area">
            <input type="text" id="user-input" placeholder="请输入下一个成语...">
            <button id="submit-btn">提交</button>
        </div>
        
        <div class="message" id="message"></div>
        
        <div class="actions">
            <button class="hint-btn" id="hint-btn">提示</button>
            <button class="explain-btn" id="explain-btn">解释当前成语</button>
            <button class="restart-btn" id="restart-btn">重新开始</button>
        </div>
        
        <div class="explanation" id="explanation">
            <h3>成语解释</h3>
            <p id="explanation-text"></p>
        </div>
        
        <div class="history">
            <h3>已接龙成语</h3>
            <div class="history-list" id="history-list"></div>
        </div>
        
        <div class="rules">
            <h3>游戏规则</h3>
            <ol>
                <li>下一个成语的第一个字必须与当前成语的最后一个字相同</li>
                <li>输入必须是正确的四字成语</li>
                <li>不能重复使用已经用过的成语</li>
                <li>点击"提示"按钮可以获得可能的接龙成语</li>
                <li>点击"解释"按钮可以了解当前成语的含义</li>
            </ol>
        </div>
    </div>
    
    <!-- 游戏结束界面 -->
    <div id="game-over">
        <div id="game-over-content">
            <h2>游戏结束</h2>
            <p>时间到了！你的最终得分是：</p>
            <div id="final-score">0分</div>
            <p>再接再厉，继续学习更多成语吧！</p>
            <button id="play-again">再玩一次</button>
        </div>
    </div>

    <script>
        // 常用成语库（适合小学生）
        const idioms = [
            "胸有成竹", "竹报平安", "安富尊荣", "荣华富贵", "贵而贱目", 
            "目无余子", "子虚乌有", "有目共睹", "睹物思人", "人中骐骥",
            "骥子龙文", "文质彬彬", "彬彬有礼", "礼贤下士", "士饱马腾",
            "腾云驾雾", "雾里看花", "花言巧语", "语重心长", "长此以往",
            "往返徒劳", "劳而无功", "功成不居", "居官守法", "法外施仁",
            "仁至义尽", "尽心竭力", "力透纸背", "背道而驰", "驰名中外",
            "外强中干", "干柴烈火", "火烧眉毛", "毛手毛脚", "脚踏实地",
            "地大物博", "博古通今", "今非昔比", "比比皆是", "是非曲直",
            "直抒己见", "见多识广", "广开言路", "路不拾遗", "遗臭万年",
            "年富力强", "强词夺理", "理直气壮", "壮志凌云", "云消雾散"
        ];

        // 成语解释
        const explanations = {
            "胸有成竹": "比喻做事之前已经有通盘的考虑。",
            "竹报平安": "指平安家信，也比喻报平安的消息。",
            "安富尊荣": "安定富足，尊贵荣华。",
            "荣华富贵":  "形容有钱有势，兴旺荣耀。",
            "贵而贱目": "比喻相信传说，不重视事实。",
            "目无余子": "形容骄傲自大，看不起人。",
            "子虚乌有": "指假设的、不存在的、不真实的事情。",
            "有目共睹": "形容极其明显，人人都能看到。",
            "睹物思人": "看见死去或离别的人留下的东西就想起了这个人。",
            "人中骐骥": "比喻才能出众的年轻人。"
            // 更多成语解释可以继续添加
        };

        // 游戏状态
        let usedIdioms = [];
        let currentIdiom = "";
        let score = 0;
        let streak = 0;
        let gameTime = 120; // 默认2分钟
        let timeLeft = gameTime;
        let timerInterval = null;

        // DOM元素
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const gameOverScreen = document.getElementById('game-over');
        const timeOptions = document.querySelectorAll('.time-option');
        const startBtn = document.getElementById('start-btn');
        const timeLeftElement = document.getElementById('time-left');
        const userInput = document.getElementById('user-input');
        const submitBtn = document.getElementById('submit-btn');
        const hintBtn = document.getElementById('hint-btn');
        const explainBtn = document.getElementById('explain-btn');
        const restartBtn = document.getElementById('restart-btn');
        const currentIdiomElement = document.getElementById('current-idom');
        const scoreElement = document.getElementById('score');
        const streakElement = document.getElementById('streak');
        const messageElement = document.getElementById('message');
        const historyList = document.getElementById('history-list');
        const explanationElement = document.getElementById('explanation');
        const explanationText = document.getElementById('explanation-text');
        const finalScoreElement = document.getElementById('final-score');
        const playAgainBtn = document.getElementById('play-again');

        // 初始化开始界面
        function initStartScreen() {
            // 时间选择逻辑
            timeOptions.forEach(option => {
                option.addEventListener('click', function() {
                    timeOptions.forEach(opt => opt.classList.remove('selected'));
                    this.classList.add('selected');
                    gameTime = parseInt(this.dataset.time);
                });
            });
            
            // 开始游戏按钮
            startBtn.addEventListener('click', function() {
                startScreen.style.display = 'none';
                gameScreen.style.display = 'block';
                initGame();
                startTimer();
            });
        }

        // 初始化游戏
        function initGame() {
            usedIdioms = [];
            score = 0;
            streak = 0;
            timeLeft = gameTime;
            updateTimerDisplay();
            updateScore();
            
            // 随机选择一个起始成语
            const randomIndex = Math.floor(Math.random() * idioms.length);
            currentIdiom = idioms[randomIndex];
            usedIdioms.push(currentIdiom);
            updateCurrentIdiom();
            updateHistory();
            
            // 清空消息和输入框
            messageElement.textContent = "";
            messageElement.className = "message";
            userInput.value = "";
            explanationElement.style.display = "none";
            
            // 聚焦到输入框
            userInput.focus();
        }

        // 开始计时器
        function startTimer() {
            clearInterval(timerInterval);
            
            timerInterval = setInterval(function() {
                timeLeft--;
                updateTimerDisplay();
                
                if (timeLeft <= 0) {
                    clearInterval(timerInterval);
                    endGame();
                }
            }, 1000);
        }

        // 更新计时器显示
        function updateTimerDisplay() {
            const minutes = Math.floor(timeLeft / 60);
            const seconds = timeLeft % 60;
            timeLeftElement.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            // 时间少于30秒时改变颜色
            if (timeLeft <= 30) {
                timeLeftElement.parentElement.style.color = '#ff0000';
                timeLeftElement.parentElement.style.borderColor = '#ff0000';
            }
        }

        // 游戏结束
        function endGame() {
            gameScreen.style.display = 'none';
            gameOverScreen.style.display = 'flex';
            finalScoreElement.textContent = `${score}分`;
        }

        // 更新当前成语显示
        function updateCurrentIdiom() {
            currentIdiomElement.textContent = currentIdiom;
        }

        // 更新分数显示
        function updateScore() {
            scoreElement.textContent = score;
            streakElement.textContent = streak;
        }

        // 更新历史记录
        function updateHistory() {
            historyList.innerHTML = "";
            usedIdioms.forEach(idiom => {
                const item = document.createElement('div');
                item.className = 'history-item';
                item.textContent = idiom;
                historyList.appendChild(item);
            });
        }

        // 显示消息
        function showMessage(message, isSuccess) {
            messageElement.textContent = message;
            messageElement.className = isSuccess ? "message success" : "message error";
        }

        // 检查输入的成语是否有效
        function isValidIdiom(idiom) {
            // 检查是否为四字成语
            if (idiom.length !== 4) {
                showMessage("成语必须是四个汉字！", false);
                return false;
            }
            
            // 检查是否在成语库中
            if (!idioms.includes(idiom)) {
                showMessage("这不是一个有效的成语，请重新输入！", false);
                return false;
            }
            
            // 检查是否已经使用过
            if (usedIdioms.includes(idiom)) {
                showMessage("这个成语已经使用过了，请换一个！", false);
                return false;
            }
            
            // 检查接龙是否匹配
            const lastChar = currentIdiom.charAt(currentIdiom.length - 1);
            if (idiom.charAt(0) !== lastChar) {
                showMessage(`下一个成语必须以"${lastChar}"开头！`, false);
                return false;
            }
            
            return true;
        }

        // 处理用户提交
        function handleSubmit() {
            const userIdiom = userInput.value.trim();
            
            if (!userIdiom) {
                showMessage("请输入一个成语！", false);
                return;
            }
            
            if (isValidIdiom(userIdiom)) {
                // 更新游戏状态
                currentIdiom = userIdiom;
                usedIdioms.push(userIdiom);
                score += 10;
                streak += 1;
                
                // 更新界面
                updateCurrentIdiom();
                updateScore();
                updateHistory();
                showMessage("接龙成功！+10分", true);
                userInput.value = "";
                userInput.focus();
            }
        }

        // 提供提示
        function provideHint() {
            const lastChar = currentIdiom.charAt(currentIdiom.length - 1);
            const possibleIdioms = idioms.filter(idiom => 
                idiom.charAt(0) === lastChar && !usedIdioms.includes(idiom)
            );
            
            if (possibleIdioms.length > 0) {
                // 随机选择一个提示
                const hint = possibleIdioms[Math.floor(Math.random() * possibleIdioms.length)];
                showMessage(`试试：${hint}`, true);
                score = Math.max(0, score - 5); // 扣5分作为提示代价
                streak = 0;
                updateScore();
            } else {
                showMessage("没有可用的提示了！", false);
            }
        }

        // 解释当前成语
        function explainCurrentIdiom() {
            if (explanations[currentIdiom]) {
                explanationText.textContent = explanations[currentIdiom];
                explanationElement.style.display = "block";
            } else {
                showMessage("暂无此成语的解释", false);
            }
        }

        // 事件监听
        submitBtn.addEventListener('click', handleSubmit);
        
        userInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleSubmit();
            }
        });
        
        hintBtn.addEventListener('click', provideHint);
        explainBtn.addEventListener('click', explainCurrentIdiom);
        restartBtn.addEventListener('click', function() {
            clearInterval(timerInterval);
            initGame();
            startTimer();
        });
        
        playAgainBtn.addEventListener('click', function() {
            gameOverScreen.style.display = 'none';
            startScreen.style.display = 'block';
        });

        // 初始化开始界面
        initStartScreen();
    </script>
</body>
</html>
预览
控制台