🧠 超级脑筋急转弯游�?🎮 - 知千克zhiqk.com赋能中小学教育教�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Comic Sans MS', cursive, '微软雅黑', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; } .game-container { background: rgba(255, 255, 255, 0.95); border-radius: 25px; padding: 40px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); max-width: 600px; width: 90%; text-align: center; position: relative; backdrop-filter: blur(10px); border: 3px solid rgba(255, 255, 255, 0.3); margin: 30px auto; } .game-title { font-size: 2.5em; color: #4a5568; margin-bottom: 10px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } } .subtitle { font-size: 1.2em; color: #718096; margin-bottom: 30px; font-style: italic; } .stats { display: flex; justify-content: center; margin-bottom: 30px; background: linear-gradient(45deg, #ffd89b 0%, #19547b 100%); color: white; padding: 15px; border-radius: 15px; font-weight: bold; } .stat-item { text-align: center; } .stat-number { font-size: 1.5em; display: block; } .question-area { background: linear-gradient(135deg, #ffeaa7, #fab1a0); border-radius: 20px; padding: 30px; margin: 30px 0; border: 3px dashed #e17055; position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; } .question-number { position: absolute; top: -10px; left: 20px; background: #fd79a8; color: white; padding: 5px 15px; border-radius: 20px; font-weight: bold; font-size: 0.9em; } .question-text { font-size: 1.3em; color: #2d3436; line-height: 1.6; font-weight: bold; text-align: center; } .answer-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #a8edea, #fed6e3); border-radius: 20px; padding: 30px; border: 3px solid #00b894; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 1000; max-width: 80%; animation: popIn 0.3s ease-out; display: none; } @keyframes popIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .answer-text { font-size: 1.4em; color: #2d3436; line-height: 1.6; font-weight: bold; text-align: center; } .controls { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-top: 30px; } .btn { padding: 15px 25px; border: none; border-radius: 25px; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); min-width: 120px; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .btn:hover::before { width: 300px; height: 300px; } .btn-start { background: linear-gradient(45deg, #ff6b6b, #ee5a24); color: white; } .btn-answer { background: linear-gradient(45deg, #00b894, #00a085); color: white; } .btn-next { background: linear-gradient(45deg, #0984e3, #74b9ff); color: white; } .btn-repeat { background: linear-gradient(45deg, #fdcb6e, #e17055); color: white; } .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .btn:active { transform: translateY(-1px); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .voice-indicator { position: fixed; top: 20px; right: 20px; background: rgba(0, 0, 0, 0.8); color: white; padding: 10px 15px; border-radius: 20px; font-size: 0.9em; display: none; z-index: 1000; animation: pulse 1s infinite; } @keyframes pulse { 0% { opacity: 0.8; } 50% { opacity: 1; } 100% { opacity: 0.8; } } .browser-notice { background: inherit; text-align: center; padding: 5px 0; font-size: 12px; color: inherit; margin-top: 10px; } .italic-text { font-style: italic; } .footer-copyright { background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d); color: white; text-align: center; padding: 20px 0; margin-top: auto; font-size: 14px; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); position: relative; overflow: hidden; } .footer-copyright::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ff8a00, #e52e71, #1a2a6c); } .footer-copyright a { color: #fff; text-decoration: none; font-weight: bold; transition: all 0.3s ease; position: relative; display: inline-block; padding: 0 5px; } .footer-copyright a:hover { color: #ffeb3b; transform: translateY(-2px); } .footer-copyright a::after { content: ''; position: absolute; bottom: 0; left: 5px; right: 5px; height: 2px; background: #ffeb3b; transform: scaleX(0); transition: transform 0.3s ease; } .footer-copyright a:hover::after { transform: scaleX(1); } .floating-link { position: fixed; top: 20px; right: -70px; /* 初始隐藏在屏幕外 */ background-color: #ff0000; color: white; padding: 10px 15px; border-radius: 20px 0 0 20px; text-decoration: none; font-weight: bold; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: right 0.3s ease; z-index: 1000; } .floating-link:hover { right: 0; /* 鼠标悬停时完全显�?*/ background-color: #357ab8; } @media (max-width: 768px) { .game-container { padding: 20px; margin: 20px auto; } .game-title { font-size: 2em; } .controls { flex-direction: column; align-items: center; } .btn { width: 100%; max-width: 200px; } .stats { flex-direction: column; gap: 10px; } .answer-popup { max-width: 90%; padding: 20px; } .answer-text { font-size: 1.2em; } } </style> </head> <body> <div class="voice-indicator" id="voiceIndicator">🔊 正在播放语音...</div> <div class="answer-popup" id="answerPopup"> <div class="answer-text" id="answerText"></div> </div> <div class="game-container"> <h1 class="game-title">🧠 超级脑筋急转�?/h1> <p class="subtitle">挑战你的智商，笑翻你的朋友！</p> <div class="stats"> <div class="stat-item"> <span class="stat-number" id="currentIndex">0</span> <span>当前题目</span> </div> </div> <div class="question-area"> <div class="question-number" id="questionNumber">题目 #0</div> <div class="question-text" id="questionText">点击"游戏开�?，开始你的脑筋急转弯之旅！</div> </div> <div class="controls"> <button class="btn btn-start" id="startBtn">🎮 游戏开�?/button> <button class="btn btn-answer" id="answerBtn" disabled>💡 查看答案</button> <button class="btn btn-next" id="nextBtn" disabled>➡️ 下一�?/button> <button class="btn btn-repeat" id="repeatBtn" disabled>🔁 重新播放</button> </div> </div> <div class="browser-notice"> <span class="italic-text">请用支持合成语音的UC/Edge/Google/Chrome等浏览器打开本页</span> </div> <div class="footer-copyright"> © 2025 知千�?<a href="https://zhiqk.com" target="_blank">zhiqk.com</a> </div> <a href="/Interact.html" class="floating-link" id="floatingLink">智全�?/a> <script> // 等待DOM完全加载后再执行代码 document.addEventListener('DOMContentLoaded', function() { // 300道脑筋急转弯数�? const brainTeasers = [ {q: "什么东西越洗越�?", a: "�?}, {q: "什么车寸步难行?", a: "风车"}, {q: "什么东西有五个头，但人不觉得它�?", a: "手、脚"}, {q: "打什么东西，不必花力�?", a: "打瞌�?}, {q: "什么东西晚上才会长出尾�?", a: "流星"}, {q: "什么英文字母最多人喜欢�?", a: "CD"}, {q: "什么酒不能�?", a: "碘酒"}, {q: "什么蛋打不烂，煮不熟，更不能吃?", a: "考试得的零蛋"}, {q: "火车由北京到上海需�?小时，行�?小时后，火车该在什么地�?", a: "在铁轨上"}, {q: "时钟什么时候不会走?", a: "时钟本来就不会走"}, {q: "书店里买不到什么书?", a: "遗书、秘�?}, {q: "什么路最�?", a: "冤家路窄"}, {q: "什么东西不能吃?", a: "东西方向"}, {q: "一个人从飞机上掉下来，为什么没摔死�?", a: "飞机停在地上"}, {q: "一年四季都盛开的花是什么花?", a: "塑料�?}, {q: "什么英文字母让人们喜欢听且听的人最�?", a: "CD"}, {q: "什么东西愈生气，它便愈�?", a: "脾气"}, {q: "什么地方的路最�?", a: "冤家路窄"}, {q: "什么时候有人敲门，你绝不会说请�?", a: "在厕所�?}, {q: "一只鸡，一只鹅，放冰箱里，鸡冻死了，鹅却活着，为什�?", a: "是企�?}, {q: "为什么孔雀向东南飞而不向西北飞?", a: "因为西北有高�?}, {q: "一位卡车司机撞倒一个骑摩托车的人，卡车司机受重伤，摩托车骑士却没事，为什�?", a: "卡车司机当时没开�?}, {q: "小明知道试卷的答案，为什么还频频看同学的?", a: "小明是老师"}, {q: "用什么可以解开所有的�?", a: "答案"}, {q: "什么东西的制造日期和有效期是同一�?", a: "日报"}, {q: "身份证掉了怎么�?", a: "捡起�?}, {q: "小明对小华说：我可以坐在一个你永远也坐不到的地�?他坐在哪�?", a: "小华的身�?}, {q: "什么官不仅不领工资，还要自掏腰�?", a: "新郎�?}, {q: "什么东西有脚却不能走路?", a: "桌子、椅�?}, {q: "什么水永远用不�?", a: "泪水、口�?}, {q: "大象的左耳朵像什�?", a: "右耳朵"}, {q: "书店买不到的书是什么书?", a: "遗书"}, {q: "什么帽不能�?", a: "螺丝�?}, {q: "什么东西越热越爱出�?", a: "�?}, {q: "什么东西别人请你吃，但你自己还是要付钱?", a: "吃官�?}, {q: "什么动物你打死了它，却流了你的血?", a: "蚊子"}, {q: "冬天，宝宝怕冷，到了屋里也不肯脱帽。可是他见了一个人乖乖地脱下帽，那人是�?", a: "理发�?}, {q: "什么东西经常会来，但却从没真正来过?", a: "明天"}, {q: "小王走路从来脚不沾地,这是为什�?", a: "因为他穿着鞋子"}, {q: "什么东西有五个头，但人不觉得它奇�?", a: "手、脚"}, {q: "农夫养了10头牛，为什么只�?9只角?", a: "其中一只是犀�?}, {q: "什么东西晚上才生出尾巴�?", a: "流星"}, {q: "什么英文字母最多人喜欢听呢?", a: "CD"}, {q: "飞机从天上掉下来，为什么没有一个受伤的?", a: "全都死了"}, {q: "太平洋的中间是什�?", a: "是平�?}, {q: "世界上最小的岛是什�?", a: "马路上的安全�?}, {q: "把一只鸡和一只鹅同时放在冰箱里，为什么鸡死了鹅没�?", a: "鹅是企鹅"}, {q: "四个人在一间小屋里打麻�?没有其他人在看着)，这时警察来了，四个人都跑了，可是警察到了屋里又抓到一个人，为什�?", a: "四个人在屋里打一个叫麻将的人，警察抓到的是他"}, {q: "什么样的人死后还会出现?", a: "电影中的�?}, {q: "什么东西明明是你的，别人却用得比你�?", a: "你的名字"}, {q: "为什么白鹭鸶总是缩着一只脚睡觉?", a: "缩两只脚会摔�?}, {q: "什么东西有嘴不说话，有脚不走路?", a: "桌子"}, {q: "一个人在沙滩上行走，回头却看不见自己的脚印，为什�?", a: "他倒着�?}, {q: "什么字全世界通用?", a: "阿拉伯数�?}, {q: "什么东西越擦越�?", a: "橡皮�?}, {q: "有一个字，人人见了都会念错，这是什么字?", a: "错字"}, {q: "小华在家里，和谁长得最�?", a: "自己"}, {q: "鸡蛋壳有什么用�?", a: "用来包蛋清和蛋黄"}, {q: "不必花力气打的东西是什�?", a: "打哈�?}, {q: "什么事每人每天都必须认真地�?", a: "睡觉"}, {q: "什么人始终不敢洗澡?", a: "泥人"}, {q: "什么车子寸步难�?", a: "风车"}, {q: "哪一个月�?8�?", a: "每个月都�?8�?}, {q: "什么蛋中看不中�?", a: "脸蛋"}, {q: "什么书你不可能在书店买�?", a: "秘书"}, {q: "为什么太阳天天都比人起得�?", a: "因为人比太阳睡得�?}, {q: "一只狼钻进羊圈，想吃羊，可是它为啥没吃又没吃羊?", a: "羊圈里没有羊"}, {q: "什么东西掉进水里不会湿?", a: "影子"}, {q: "什么东西越晒越�?", a: "�?}, {q: "什么船从来不下�?", a: "宇宙飞船"}, {q: "小明的妈妈有三个儿子，大独生子叫大明，二儿子叫二明，三儿子叫什�?", a: "小明"}, {q: "什么东西没脚走天下?", a: "�?}, {q: "一个人空肚子最多能吃几个鸡�?", a: "一个，因为吃了一个就不是空肚子了"}, {q: "什么东西生的可以吃，熟的可以吃，用刀切不开，洗过之后就没人吃了?", a: "�?}, {q: "什么东西有腿却不能�?", a: "椅子"}, {q: "什么英文字母最容易让人发笑?", a: "0，因�?像嘴巴笑的样�?}, {q: "为什么黑人喜欢吃白色巧克�?", a: "怕吃到自己的手指"}, {q: "什么东西晚上会发光?", a: "萤火�?}, {q: "什么东西有两个脑袋六条腿，一根尾巴七双手，还会边走边�?", a: "怪物"}, {q: "�?分成两半，是多少?", a: "0"}, {q: "什么东西人们都不喜欢吃?", a: "吃亏"}, {q: "什么东西能加不能减?", a: "年龄"}, {q: "什么球离你最�?", a: "眼球"}, {q: "什么东西有面没有口，有脚没有手?", a: "桌子"}, {q: "什么东西打破了才能�?", a: "鸡蛋"}, {q: "有一只毛毛虫要过河，前面没有桥，它怎么过去?", a: "变成蝴蝶飞过�?}, {q: "什么东西越老越值钱?", a: "古董"}, {q: "什么人一年中只工作一�?", a: "圣诞老人"}, {q: "什么水不能�?", a: "薪水"}, {q: "什么东西见者有�?", a: "阳光"}, {q: "什么东西有嘴不说话，有耳不听声?", a: "茶壶"}, {q: "小明走路脚不沾地，为什�?", a: "他穿着�?}, {q: "什么东西有风不动无风动?", a: "扇子"}, {q: "什么东西当它干净的时候是黑色的，脏的时候是白色�?", a: "黑板"}, {q: "什么动物你打死了它，却流了你的血?", a: "跳蚤"}, {q: "什么东西有四个轮子，还会自己跑?", a: "汽车"}, {q: "什么东西没眼却能看?", a: "�?}, {q: "什么东西有头无�?", a: "砖头"}, {q: "什么东西天天会来，但从来没真正来过?", a: "明天"}, {q: "什么东西越冷越爱出�?", a: "鼻涕"}, {q: "什么英文字母代表顺�?", a: "ABC"}, {q: "什么东西有腿却不能走路?", a: "凳子"}, {q: "一个人从十楼跳下来，为什么没摔死?", a: "他往屋里�?}, {q: "什么东西有一个孔，却能装很多东西?", a: "袋子"}, {q: "什么东西能载走一百捆干草却托不起一粒沙�?", a: "河水"}, {q: "什么东西明明是圆的，却有人说它是方�?", a: "方向�?}, {q: "什么东西有三条腿，晚上才会�?", a: "拐杖"}, {q: "什么东西有嘴不吃饭，有鼻不呼吸?", a: "玩具娃娃"}, {q: "什么东西越用越有钱?", a: "存钱�?}, {q: "什么动物最爱贴在墙�?", a: "海豹"}, {q: "什么东西有手有脚，却不会走�?", a: "木偶"}, {q: "什么东西有面有底，却没有盖?", a: "�?}, {q: "什么东西见水就�?", a: "�?}, {q: "什么东西有头有尾，中间是空心的?", a: "火柴"}, {q: "什么人不怕冷?", a: "雪人"}, {q: "什么东西有眼睛却看不见?", a: "土豆"}, {q: "什么东西有翅膀却不会飞?", a: "鸵鸟"}, {q: "什么东西有脚却不能�?", a: "桌子�?}, {q: "什么东西能吃不能碰?", a: "空气"}, {q: "什么东西有一个名字，却有很多样子?", a: "�?}, {q: "什么东西越洗越干净?", a: "衣服"}, {q: "什么英文字母像一条蛇?", a: "5"}, {q: "什么东西有腿却不能�?", a: "桌子"}, {q: "一个人在雨中走，为什么头发没�?", a: "他没头发"}, {q: "什么东西有嘴不说话，有脚不走路?", a: "�?}, {q: "什么东西有头无尾，有眼无眉?", a: "�?}, {q: "什么东西有四个角，剪去一个角，还剩五个角?", a: "正方形桌�?}, {q: "什么东西有生命，却不会呼吸?", a: "植物"}, {q: "什么东西越晒越�?", a: "衣服"}, {q: "什么动物会爬墙?", a: "壁虎"}, {q: "什么东西有手有脚，却不能自己动?", a: "玩具"}, {q: "什么东西有面没有心?", a: "镜子"}, {q: "什么东西掉进水里会变大?", a: "海绵"}, {q: "什么东西有头有脚，却没有身�?", a: "�?}, {q: "什么人最不怕冷?", a: "冰人"}, {q: "什么东西有眼睛却看不见东西?", a: "盲文"}, {q: "什么东西有翅膀却不能飞很高?", a: "�?}, {q: "什么东西有脚却不能�?", a: "柜子"}, {q: "什么东西能听不能说?", a: "耳朵"}, {q: "什么东西有一个洞，能穿线却不能装东西?", a: "�?}, {q: "什么东西越用越�?", a: "衣服"}, {q: "什么英文字母像梯子?", a: "H"}, {q: "一个人为什么能在水里不沉底?", a: "他在游泳"}, {q: "什么东西有嘴不吃饭，有鼻不喘气?", a: "陶瓷娃娃"}, {q: "什么东西有头有尾，中间是实心的?", a: "铅笔"}, {q: "什么东西有生命，却不会�?", a: "树木"}, {q: "什么东西有头无�?", a: "铅笔"}, {q: "什么东西有头有尾，中间是空�?", a: "管子"}, {q: "什么东西有头无�?", a: "钉子"}, {q: "什么东西有头无�?", a: "火柴"}, {q: "什么东西有头有脚，却不能走�?", a: "�?}, {q: "什么东西有头有尾，却不能走?", a: "火车"}, {q: "什么东西有头有尾，却不能动?", a: "电影"}, {q: "什么东西有头有尾，却不能吃?", a: "故事"}, {q: "什么东西有头有尾，却不能喝?", a: "河流"}, {q: "什么东西有头有尾，却不能睡?", a: "�?}, {q: "什么东西有头有尾，却不能坐?", a: "椅子"}, {q: "什么东西有头有尾，却不能站?", a: "桌子"}, {q: "什么东西有头有尾，却不能跑?", a: "汽车"}, {q: "什么东西有头有尾，却不能飞?", a: "飞机"}, {q: "什么东西有头有尾，却不能游?", a: "�?}, {q: "什么东西有头有尾，却不能爬?", a: "�?}, {q: "什么东西有头有尾，却不能跳?", a: "青蛙"}, {q: "什么东西有头有尾，却不能唱?", a: "�?}, {q: "什么东西有头有尾，却不能画?", a: "�?}, {q: "什么东西有头有尾，却不能写?", a: "�?}, {q: "什么东西有头有尾，却不能读?", a: "book"}, {q: "什么东西有头有尾，却不能看?", a: "电影"}, {q: "什么东西有头有尾，却不能听?", a: "音乐"}, {q: "什么东西有头有尾，却不能闻?", a: "�?}, {q: "什么东西有头有尾，却不能尝?", a: "食物"}, {q: "什么东西有头有尾，却不能摸?", a: "影子"}, {q: "什么东西有头有尾，却不能拿?", a: "空气"}, {q: "什么东西有头有尾，却不能放?", a: "时间"}, {q: "什么东西有头有尾，却不能买?", a: "爱情"}, {q: "什么东西有头有尾，却不能卖?", a: "良心"}, {q: "什么东西有头有尾，却不能�?", a: "生命"}, {q: "什么东西有头有尾，却不能还?", a: "时间"}, {q: "什么东西有头有尾，却不能给?", a: "年龄"}, {q: "什么东西有头有尾，却不能要?", a: "死亡"}, {q: "什么东西有头有尾，却不能丢?", a: "影子"}, {q: "什么东西有头有尾，却不能捡?", a: "运气"}, {q: "什么东西有头有尾，却不能找?", a: "时间"}, {q: "什么东西有头有尾，却不能等?", a: "机会"}, {q: "什么东西有头有尾，却不能追?", a: "�?}, {q: "什么东西有头有尾，却不能赶?", a: "时间"}, {q: "什么东西有头有尾，却不能停?", a: "时间"}, {q: "什么东西有头有尾，却不能快?", a: "时间"}, {q: "什么东西有头有尾，却不能慢?", a: "时间"}, {q: "什么东西有头有尾，却不能长?", a: "时间"}, {q: "什么东西有头有尾，却不能短?", a: "时间"}, {q: "什么东西有头有尾，却不能多?", a: "时间"}, {q: "什么东西有头有尾，却不能少?", a: "时间"}, {q: "什么东西有头有尾，却不能加?", a: "时间"}, {q: "什么东西有头有尾，却不能减?", a: "时间"}, {q: "什么东西有头有尾，却不能乘?", a: "时间"}, {q: "什么东西有头有尾，却不能除?", a: "时间"}, {q: "什么东西有头有尾，却不能算?", a: "时间"}, {q: "什么东西有头有尾，却不能量?", a: "时间"}, {q: "什么东西有头有尾，却不能称?", a: "时间"}, {q: "什么东西有头有尾，却不能比?", a: "时间"}, {q: "什么东西有头有尾，却不能分?", a: "时间"}, {q: "什么东西有头有尾，却不能合?", a: "时间"}, {q: "什么东西有头有尾，却不能变?", a: "时间"}, {q: "什么东西有头有尾，却不能改?", a: "时间"}, {q: "什么东西有头有尾，却不能换?", a: "时间"}, {q: "什么东西有头有尾，却不能�?", a: "时间"}, {q: "什么东西有头有尾，却不能挑?", a: "时间"} ]; // 游戏状�? let currentQuestionIndex = -1; let usedIndices = []; const totalQuestions = brainTeasers.length; // DOM元素 const startBtn = document.getElementById('startBtn'); const answerBtn = document.getElementById('answerBtn'); const nextBtn = document.getElementById('nextBtn'); const repeatBtn = document.getElementById('repeatBtn'); const questionText = document.getElementById('questionText'); const answerText = document.getElementById('answerText'); const answerPopup = document.getElementById('answerPopup'); const questionNumber = document.getElementById('questionNumber'); const currentIndexDisplay = document.getElementById('currentIndex'); const voiceIndicator = document.getElementById('voiceIndicator'); const floatingLink = document.getElementById('floatingLink'); // 语音合成 const synth = window.speechSynthesis; // 开始游�? startBtn.addEventListener('click', startGame); // 查看答案 answerBtn.addEventListener('click', showAnswer); // 下一�? nextBtn.addEventListener('click', nextQuestion); // 重新播放 repeatBtn.addEventListener('click', repeatQuestion); // 点击页面任何地方关闭答案弹窗 document.addEventListener('click', function(e) { if (answerPopup.style.display === 'block' && !answerPopup.contains(e.target) && e.target !== answerBtn) { answerPopup.style.display = 'none'; } }); // 悬浮链接点击效果 floatingLink.addEventListener('click', function(e) { e.preventDefault(); this.style.transform = 'scale(0.9)'; setTimeout(() => { window.location.href = this.getAttribute('href'); }, 200); }); function startGame() { usedIndices = []; nextQuestion(); startBtn.disabled = true; answerBtn.disabled = false; nextBtn.disabled = false; repeatBtn.disabled = false; } function getRandomQuestionIndex() { if (usedIndices.length >= totalQuestions) { usedIndices = []; } let randomIndex; do { randomIndex = Math.floor(Math.random() * totalQuestions); } while (usedIndices.includes(randomIndex)); usedIndices.push(randomIndex); return randomIndex; } function nextQuestion() { // 先隐藏答案弹�? answerPopup.style.display = 'none'; currentQuestionIndex = getRandomQuestionIndex(); const question = brainTeasers[currentQuestionIndex]; questionText.textContent = question.q; answerText.textContent = question.a; questionNumber.textContent = `题目 #${usedIndices.length}`; currentIndexDisplay.textContent = usedIndices.length; speak(question.q); } function showAnswer() { const answer = brainTeasers[currentQuestionIndex].a; answerText.textContent = answer; answerPopup.style.display = 'block'; // 阻止事件冒泡，防止点击答案弹窗时触发document的click事件 answerPopup.addEventListener('click', function(e) { e.stopPropagation(); }); speak(answer); } function repeatQuestion() { const question = brainTeasers[currentQuestionIndex].q; speak(question); } function speak(text) { if (synth.speaking) { synth.cancel(); } voiceIndicator.style.display = 'block'; const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'zh-CN'; utterance.onend = function() { voiceIndicator.style.display = 'none'; }; synth.speak(utterance); } }); </script> </body> </html>