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