示例成品AI 按一组示范选项写的
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AI成语接龙</title>
<style>
body { font-family: sans-serif; max-width: 400px; margin: 40px auto; background: #f0f4f8; }
.chat { height: 350px; overflow-y: auto; background: #fff; border-radius: 12px; padding: 15px; border: 1px solid #e1e4e8; }
.msg { margin: 8px 0; padding: 8px 12px; border-radius: 8px; max-width: 80%; clear: both; }
.ai { background: #e8f0fe; float: left; } /* AI的气泡蓝色 */
.user { background: #95ec69; float: right; } /* 用户气泡绿色 */
.input-box { display: flex; margin-top: 15px; gap: 8px; }
input { flex: 1; padding: 10px; border-radius: 8px; border: 1px solid #ccc; outline: none; }
button { padding: 10px 18px; border: none; background: #07c160; color: #fff; border-radius: 8px; cursor: pointer; }
button:hover { background: #06ad56; }
</style>
</head>
<body>
<h2>🤖 AI成语接龙陪玩</h2>
<p>规则:输入一个成语,首字需与AI末字同音即可~</p>
<div class="chat" id="chatBox">
<div class="msg ai">我先来!<b>一马当先</b>(xiān)</div>
</div>
<div class="input-box">
<input id="userInput" placeholder="输入你的成语..." onkeydown="if(event.key==='Enter')play()">
<button onclick="play()">发送</button>
</div>
<script>
// 内置同音字成语库(模拟AI脑力,免调用接口)
const db = {
'xian':['先发制人','先入为主','先见之明'],
'ren':['人山人海','人面兽心','人定胜天'],
'hai':['海阔天空','海底捞针','海枯石烂'],
'xin':['心花怒放','心想事成','心口如一'],
'kong':['空前绝后','空谷幽兰'],
'fang':['放虎归山','放任自流'],
'shan':['山清水秀','山穷水尽'],
'jin':['金玉满堂','金碧辉煌','尽善尽美'],
'tang':['堂堂正正'],
'mei':['美不胜收','美中不足'],
'shou':['手到擒来','守株待兔'],
'lai':['来日方长','来者不拒'],
'chang':['长年累月','长驱直入'],
'yue':['月下老人','月黑风高'],
'tu':['兔死狐悲','突飞猛进'],
'ru':['入木三分','入乡随俗'],
'fen':['分秒必争','分崩离析'],
'zheng'=>['争先恐后','正大光明'],
'hou':['后来居上','后生可畏'],
'ming'=>['明察秋毫','明辨是非'],
'wei'=>['威风凛凛','微乎其微'],
'hao'=>['毫不在乎','浩浩荡荡'],
'shi'=>['十全十美','石破天惊'],
'fei'=>['飞黄腾达','非同小可'],
'da'=>['大显身手','大公无私'],
'shou2':['手舞足蹈'],
'si':['四海为家','死里逃生'],
'jia':['家喻户晓','假公济私'],
'xiao':['小题大做','笑里藏刀'],
'sheng'=>['生龙活虎','声东击西'],
'hu':['虎头蛇尾','狐假虎威'],
'xi':['西窗剪烛','息事宁人'],
'wei2':['为所欲为','蔚然成风'],
'dui':['对牛弹琴'],
'qin':['琴棋书画'],
'hua':['画蛇添足','花好月圆'],
'zu':['足智多谋'],
'mou'=>['谋事在人'],
'zai':['在所不辞'],
'ci':['辞旧迎新'],
};
// 获取末字拼音的简易映射(仅覆盖本库)
const pinyinMap = {'先':'xian','人':'ren','海':'hai','心':'xin','空':'kong','放':'fang','山':'shan','尽':'jin','堂':'tang','美':'mei','手':'shou','来':'lai','长':'chang','月':'yue','兔':'tu','入':'ru','分':'fen','争':'zheng','后':'hou','明':'ming','威':'wei','毫':'hao','是':'shi','非':'fei','达':'da','私':'si','家':'jia','晓':'xiao','生':'sheng','虎':'hu','西':'xi','为':'wei2','琴':'qin','画':'hua','足':'zu','谋':'mou','在':'zai','辞':'ci'};
function play() {
const input = document.getElementById('userInput');
const chat = document.getElementById('chatBox');
const text = input.value.trim();
if (!text) return;
// 显示用户消息
chat.innerHTML += `<div class="msg user">${text}</div>`;
input.value = '';
// 获取用户成语末字拼音
const lastChar = text.charAt(text.length - 1);
const py = pinyinMap[lastChar];
if (!py || !db[py]) {
chat.innerHTML += `<div class="msg ai">哎呀,没接上!换个简单的试试?</div>`;
} else {
// AI从库中随机抽取一个接龙成语
const aiWords = db[py];
const aiWord = aiWords[Math.floor(Math.random() * aiWords.length)];
const aiLastChar = aiWord.charAt(aiWord.length - 1);
const aiPy = pinyinMap[aiLastChar] || 'xian';
chat.innerHTML += `<div class="msg ai">${aiWord}(${aiPy})</div>`;
}
chat.scrollTop = chat.scrollHeight; // 自动滚到底部
}
</script>
</body>
</html>
```