怎样实现简易成语接龙脚本

这是为您生成的简易成语接龙脚本HTML代码,它是一款可直接运行的网页工具，能帮助您理解成语接龙的核心逻辑。

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">简易成语接龙 · 小脚本</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: linear-gradient(145deg, #f7f3e9 0%, #e8e0d0 100%);
      min-height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Segoe UI', '华文楷体', 'KaiTi', 'Microsoft YaHei', sans-serif;
      padding: 16px;
    }
    .container {
      max-width: 600px;
      width: 100%;
      background: #fff8f0;
      padding: 28px 24px 34px;
      border-radius: 48px 48px 32px 32px;
      box-shadow: 0 20px 40px -12px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.08);
      border: 1px solid #e9dccc;
      transition: 0.2s;
    }
    h1 {
      font-size: 2rem;
      font-weight: 500;
      letter-spacing: 4px;
      color: #4f3e2e;
      text-align: center;
      margin-bottom: 8px;
      border-bottom: 2px dashed #dacbbc;
      padding-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    h1 small {
      font-size: 0.9rem;
      font-weight: 300;
      color: #7a6854;
      letter-spacing: 1px;
    }
    .display-area {
      background: #fcf6ed;
      border-radius: 36px;
      padding: 20px 20px 22px;
      margin: 12px 0 18px;
      box-shadow: inset 0 4px 8px rgba(90, 70, 50, 0.06), 0 2px 4px rgba(0,0,0,0.02);
      border: 1px solid #e6d8c6;
    }
    .chain-box {
      background: #ffffffd9;
      min-height: 4.2rem;
      padding: 14px 18px;
      border-radius: 30px;
      border: 1px solid #ded1be;
      box-shadow: inset 0 2px 6px #0000000a;
      margin-bottom: 18px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 8px;
    }
    .idiom-tag {
      background: #dac2a7;
      color: #2a221b;
      padding: 6px 16px;
      border-radius: 40px;
      font-size: 1.2rem;
      font-weight: 500;
      letter-spacing: 1px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      display: inline-block;
      border: 1px solid #c7b096;
    }
    .chain-arrow {
      font-size: 1.4rem;
      color: #8f7a62;
      margin: 0 2px;
      font-weight: 300;
    }
    .placeholder-hint {
      color: #9b8a78;
      font-size: 1rem;
      font-weight: 300;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .action-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      margin: 18px 0 8px;
    }
    .input-group {
      flex: 2;
      min-width: 180px;
      display: flex;
      background: white;
      border-radius: 60px;
      border: 1px solid #dacbbc;
      overflow: hidden;
      transition: 0.2s;
    }
    .input-group:focus-within {
      border-color: #b4a086;
      box-shadow: 0 0 0 3px #e3d2bf60;
    }
    #idiomInput {
      flex: 1;
      padding: 12px 18px;
      border: none;
      background: transparent;
      font-size: 1.1rem;
      font-family: inherit;
      outline: none;
      color: #2f281f;
    }
    #idiomInput::placeholder {
      color: #b9aa98;
      font-weight: 300;
      letter-spacing: 1px;
    }
    .input-group button {
      background: #dac2a7;
      border: none;
      color: #2d241b;
      padding: 0 20px;
      font-size: 1.2rem;
      cursor: pointer;
      transition: 0.15s;
      font-weight: 500;
      border-left: 1px solid #c7b096;
      letter-spacing: 2px;
    }
    .input-group button:hover {
      background: #c9af92;
    }
    .input-group button:active {
      background: #b89c7c;
    }
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }
    .btn {
      background: #e5d7c4;
      border: none;
      padding: 10px 20px;
      border-radius: 60px;
      font-size: 0.95rem;
      font-weight: 500;
      color: #362c21;
      cursor: pointer;
      transition: 0.1s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
      border: 1px solid #cfbea8;
      font-family: inherit;
      letter-spacing: 1px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .btn-primary {
      background: #b6a084;
      border-color: #9e8870;
      color: #faf3ea;
    }
    .btn-primary:hover {
      background: #a58c70;
    }
    .btn-outline {
      background: transparent;
      border: 1px solid #c9b8a4;
    }
    .btn-outline:hover {
      background: #ede3d6;
    }
    .btn:active {
      transform: scale(0.96);
    }
    .status-msg {
      background: #f3ebe1;
      padding: 10px 16px;
      border-radius: 40px;
      margin: 14px 0 6px;
      text-align: center;
      font-size: 0.95rem;
      color: #4e3d2d;
      border: 1px solid #e1d0bc;
      min-height: 2.8rem;
      display: flex;
      align-items: center;
      justify-content: center;
      word-break: break-word;
    }
    .footer-hint {
      text-align: center;
      font-size: 0.8rem;
      color: #8e7d68;
      margin-top: 18px;
      letter-spacing: 0.5px;
      border-top: 1px dashed #d9caba;
      padding-top: 14px;
    }
    .error {
      color: #964f3c;
      font-weight: 450;
    }
    .success {
      color: #456b4a;
    }
    @media (max-width: 480px) {
      .container { padding: 20px 16px; }
      .idiom-tag { font-size: 1rem; padding: 4px 12px; }
      .btn { padding: 8px 14px; font-size: 0.85rem; }
    }
  </style>
</head>
<body>
<div class="container">
  <h1>
    🧩 接龙
    <small>· 成语</small>
  </h1>
  <div class="display-area">
    <!-- 成语链展示 -->
    <div class="chain-box" id="chainDisplay">
      <span class="placeholder-hint">🐉 龙首 · 一鸣惊人</span>
    </div>
    <!-- 输入 & 动作 -->
    <div class="action-bar">
      <div class="input-group">
        <input type="text" id="idiomInput" placeholder="输入成语" autocomplete="off" />
        <button id="submitBtn">↵</button>
      </div>
    </div>
    <div class="button-group">
      <button class="btn btn-primary" id="resetBtn">🔄 重开一局</button>
      <button class="btn btn-outline" id="exampleBtn">✨ 示例</button>
    </div>
    <!-- 状态 / 消息 -->
    <div class="status-msg" id="statusMsg">⚡ 输入四字成语，首字需接上一成语尾字</div>
  </div>
  <div class="footer-hint">
    支持常见成语 (内置约180个) · 尾字接首字
  </div>
</div>
<script>
  (function(){
    // ---------- 简易成语词库 (约180个, 覆盖常用) ----------
    const idioms = new Set([
      "一鸣惊人", "人山人海", "海阔天空", "空穴来风", "风吹草动", "动人心魄", "魄力十足", 
      "足智多谋", "谋事在人", "人定胜天", "天经地义", "义不容辞", "辞旧迎新", 
      "新陈代谢", "谢天谢地", "地大物博", "博古通今", "今非昔比", "比翼双飞", 
      "飞黄腾达", "达官贵人", "人杰地灵", "灵机一动", "动若脱兔", "兔死狗烹", 
      "烹龙炮凤", "凤毛麟角", "角立杰出", "出人头地", "地久天长", "长驱直入", 
      "入木三分", "分秒必争", "争先恐后", "后来居上", "上善若水", "水到渠成", 
      "成竹在胸", "胸有成竹", "竹报平安", "安步当车", "车水马龙", "龙马精神", 
      "神采飞扬", "扬眉吐气", "气宇轩昂", "昂首阔步", "步步高升", "升堂入室", 
      "室迩人远", "远走高飞", "飞蛾扑火", "火中取栗", "栗栗危惧", "惧内喜外", 
      "外强中干", "干净利落", "落花流水", "水落石出", "出神入化", "化险为夷", 
      "夷然自若", "若即若离", "离群索居", "居安思危", "危机四伏", "伏虎降龙", 
      "龙飞凤舞", "舞文弄墨", "墨守成规", "规矩准绳", "绳锯木断", "断章取义", 
      "义薄云天", "天衣无缝", "缝衣浅带", "带月披星", "星罗棋布", "布衣之交", 
      "交头接耳", "耳聪目明", "明察秋毫", "毫不介意", "意味深长", "长歌当哭", 
      "哭笑不得", "得失荣枯", "枯木逢春", "春华秋实", "实事求是", "是古非今", 
      "今愁古恨", "恨铁不成钢", "钢筋铁骨", "骨肉相连", "连绵不断", "断壁残垣", 
      "源远流长", "长此以往", "往返徒劳", "劳苦功高", "高屋建瓴", "淋漓尽致", 
      "志同道合", "合情合理", "理所当然", "然荻读书", "书声琅琅", "琅琅上口", 
      "口若悬河", "河清海晏", "宴安鸩毒", "毒蛇猛兽", "兽心人面", "面红耳赤", 
      "赤胆忠心", "心照不宣", "宣化承流", "流连忘返", "返老还童", "童颜鹤发", 
      "发奋图强", "强弩之末", "末学肤受", "受之有愧", "愧不敢当", "当仁不让", 
      "让礼一寸", "寸步难行", "行将就木", "木人石心", "心旷神怡", "怡然自得", 
      "得心应手", "手舞足蹈", "蹈厉奋发", "发扬光大", "大功告成", "成人之美", 
      "美中不足", "足不出户", "户枢不蠹", "蠹众木折", "折冲樽俎", "俎上肉", 
      "肉眼凡胎", "胎死腹中", "中庸之道", "道听途说", "说三道四", "四面八方", 
      "方兴未艾", "艾发衰容", "容光焕发", "发指眦裂", "裂石穿云", "云蒸霞蔚", 
      "蔚然成风", "风吹雨打", "打草惊蛇", "蛇蝎心肠", "肠肥脑满", "满城风雨", 
      "雨过天晴", "晴天霹雳", "力挽狂澜", "澜倒波随", "随机应变", "变本加厉", 
      "厉兵秣马", "马到成功", "" 
    ].filter(s => s.length === 4));  // 确保四字
    // 再补充一些常见  (确保接龙丰富)
    idioms.add("功成名就");
    idioms.add("就地取材");
    idioms.add("材大难用");
    idioms.add("用兵如神");
    idioms.add("神机妙算");
    idioms.add("算无遗策");
    idioms.add("策马扬鞭");
    idioms.add("鞭辟入里");
    idioms.add("里应外合");
    idioms.add("合二为一");
    idioms.add("一马平川");
    idioms.add("川流不息");
    idioms.add("息事宁人");
    idioms.add("人心所向");
    idioms.add("向壁虚造");
    idioms.add("造谣生事");
    idioms.add("事半功倍");
    idioms.add("倍道兼程");
    idioms.add("程门立雪");
    idioms.add("雪中送炭");
    idioms.add("炭疽热病");  // 凑字 不太常见但保留
    idioms.delete("炭疽热病"); // 移除不规范的
    idioms.add("虎头蛇尾");
    idioms.add("尾大不掉");
    idioms.add("掉以轻心");
    idioms.add("心花怒放");
    idioms.add("放虎归山");
    idioms.add("山清水秀");
    idioms.add("秀色可餐");
    idioms.add("餐风饮露");
    idioms.add("露宿风餐");
    idioms.add("餐风茹雪");
    idioms.add("雪上加霜");
    idioms.add("霜露之疾");
    idioms.add("疾风劲草");
    idioms.add("草长莺飞");
    // 清理无效空字符串
    idioms.delete("");
    // ---------- 游戏状态 ----------
    let chain = [];                // 成语链 (顺序)
    const chainDisplay = document.getElementById('chainDisplay');
    const idiomInput = document.getElementById('idiomInput');
    const submitBtn = document.getElementById('submitBtn');
    const resetBtn = document.getElementById('resetBtn');
    const exampleBtn = document.getElementById('exampleBtn');
    const statusMsg = document.getElementById('statusMsg');
    // ---------- 辅助函数 ----------
    function getLastChar() {
      if (chain.length === 0) return null;
      const last = chain[chain.length - 1];
      return last.charAt(last.length - 1);
    }
    // 判断成语是否合法: 在词库中, 且为4汉字
    function isValidIdiom(word) {
      if (!word || word.length !== 4) return false;
      // 简单正则: 4个汉字
      if (!/^[\u4e00-\u9fa5]{4}$/.test(word)) return false;
      return idioms.has(word);
    }
    // 检查是否可以接龙 (chain不为空时)
    function canConnect(word) {
      if (chain.length === 0) return true;   // 第一条任意
      const lastChar = getLastChar();
      return word.charAt(0) === lastChar;
    }
    // 更新展示
    function renderChain() {
      if (chain.length === 0) {
        chainDisplay.innerHTML = `<span class="placeholder-hint">🐉 龙首 · 一鸣惊人</span>`;
        return;
      }
      let html = '';
      chain.forEach((idiom, index) => {
        html += `<span class="idiom-tag">${idiom}</span>`;
        if (index < chain.length - 1) {
          html += `<span class="chain-arrow">→</span>`;
        }
      });
      chainDisplay.innerHTML = html;
    }
    // 添加成语到链上 (不验证, 由调用方保证)
    function addToChain(idiom) {
      chain.push(idiom);
      renderChain();
      idiomInput.value = '';
      statusMsg.textContent = `✅ 接龙成功！当前 ${chain.length} 个成语`;
      statusMsg.className = 'status-msg success';
    }
    // 重置游戏 (默认开局以「一鸣惊人」开头)
    function resetGame(startIdiom = '一鸣惊人') {
      chain = [];
      // 确保起始成语合法
      if (!isValidIdiom(startIdiom)) {
        startIdiom = '一鸣惊人';
      }
      chain.push(startIdiom);
      renderChain();
      idiomInput.value = '';
      statusMsg.textContent = `🌟 开局: 「${startIdiom}」 请接 「${getLastChar()}」开头`;
      statusMsg.className = 'status-msg';
    }
    // 尝试接龙
    function attemptConnect(inputRaw) {
      const word = inputRaw.trim();
      if (!word) {
        statusMsg.textContent = '⚠️ 请输入成语';
        statusMsg.className = 'status-msg error';
        return false;
      }
      if (!isValidIdiom(word)) {
        statusMsg.textContent = `❌ “${word}” 不在词库中或非四字成语`;
        statusMsg.className = 'status-msg error';
        return false;
      }
      // 检查是否重复 (不允许重复出现)
      if (chain.includes(word)) {
        statusMsg.textContent = `⛔ “${word}” 已经出现过，不能重复`;
        statusMsg.className = 'status-msg error';
        return false;
      }
      // 检查接龙规则
      if (chain.length > 0) {
        if (!canConnect(word)) {
          const lastChar = getLastChar();
          statusMsg.textContent = `🔗 首字应为 “${lastChar}” ， “${word}” 首字为 “${word.charAt(0)}”`;
          statusMsg.className = 'status-msg error';
          return false;
        }
      }
      // 通过
      addToChain(word);
      return true;
    }
    // 加载示例接龙
    function loadExample() {
      // 清空后设置一个较长的链
      chain = [];
      const demoChain = ['一鸣惊人', '人山人海', '海阔天空', '空穴来风', '风吹草动', '动人心魄'];
      // 校验每个成语是否在词库，不在则跳过
      const validDemo = demoChain.filter(w => isValidIdiom(w));
      if (validDemo.length >= 2) {
        chain = validDemo;
        renderChain();
        idiomInput.value = '';
        const lastC = getLastChar();
        statusMsg.textContent = `📖 示例链已加载，当前尾字 “${lastC}” ，继续接龙吧`;
        statusMsg.className = 'status-msg success';
      } else {
        // fallback
        resetGame('一鸣惊人');
      }
    }
    // ---------- 事件绑定 ----------
    submitBtn.addEventListener('click', function() {
      attemptConnect(idiomInput.value);
    });
    idiomInput.addEventListener('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        attemptConnect(idiomInput.value);
      }
    });
    resetBtn.addEventListener('click', function() {
      resetGame('一鸣惊人');
    });
    exampleBtn.addEventListener('click', function() {
      loadExample();
    });
    // ---------- 初始化 ----------
    // 默认开局
    resetGame('一鸣惊人');
    // 额外功能: 点击示例后如果不满展示, 可任意输入
    // 窗口加载完毕后聚焦输入框
    window.addEventListener('load', function() {
      idiomInput.focus();
    });
    // 增加一个自动补全/提示体验
    // (无依赖)
  })();
</script>
</body>
</html>

玩法与规则说明

您需要输入四字成语,使其首字与上一成语的尾字相同，脚本内置了约180个常用成语词库，并会实时校验您的输入。

• 核心玩法：在输入框中输入成语，点击“↵”按钮或按回车键提交，如果成语符合规则（在词库中、未重复、首尾衔接），它就会添加到上方的成语链中。
• 交互反馈：页面下方的状态区会清晰显示操作结果，例如接龙成功、成语不在词库中或首字不匹配等提示，方便您调整。
• 辅助功能：您可以使用“重开一局”按钮快速开始新游戏，或点击“示例”按钮查看一个预设的成语接龙示例，帮助理解玩法。