免费公司网站,网站建设找哪一家好,wordpress本地渗透,跳转网站怎么做的#x1f3ae; 打造现象级H5答题游戏#xff1a;《终极主题答题冒险》开源项目详解
摘要#xff1a; 本文将手把手带你解析并部署一个令人惊艳的开源HTML5答题游戏——《终极主题答题 Adventure》。它不仅仅是一个问答应用#xff0c;更是一个融合了角色扮演、主题切换和精… 打造现象级H5答题游戏《终极主题答题冒险》开源项目详解
摘要 本文将手把手带你解析并部署一个令人惊艳的开源HTML5答题游戏——《终极主题答题 Adventure》。它不仅仅是一个问答应用更是一个融合了角色扮演、主题切换和精美动画的沉浸式学习体验。告别枯燥的题库让每一次答题都成为一场视觉盛宴
关键词 HTML5, JavaScript, CSS3, 前端游戏, 答题游戏, 主题切换, SVG动画, 游戏开发, 开源项目 项目亮点为什么它如此特别
在众多的在线题库和答题应用中《终极主题答题冒险》凭借其独特的设计理念脱颖而出 动态主题系统 这是本项目的核心灵魂每一道题目都关联一个独立的视觉主题如“超级马里奥”、“森林守护者”、“太空探险”等。当你切换题目时整个游戏界面——从背景、地面、角色形象到选项方块和装饰物——都会进行一次彻底的、流畅的“换装”。这种设计极大地提升了游戏的趣味性和新鲜感让玩家始终保持探索欲。 ️ 融合游戏玩法 它不是简单的点击选择。玩家需要通过左右移动按钮控制一个可爱的角色在四个选项A, B, C, D之间移动然后点击“跳跃”按钮来“踩”中答案。答对时角色会欢快地跳跃答错时则会“壮烈牺牲”代入感十足。 精致的视觉与动画 项目大量使用了CSS3动画、SVG绘制角色和渐变背景。每个主题的细节都经过精心设计配合音效项目已集成公有领域音效营造出极佳的视听体验。目前音效部分有bug应该是原来的资源在cdn上不存在了 教育与娱乐结合 通过游戏化的方式学习知识寓教于乐。内置的题目是编程相关的但你可以轻松替换为任何领域的题库历史、地理、生物等使其成为一个万能的学习工具。 完美响应式设计 项目对移动端进行了优化无论是手机还是平板都能获得流畅的操作体验。
在线Demo体验 点击这里立即开始你的冒险 ️ 核心代码结构解析
整个项目是一个单HTML文件结构清晰主要分为以下几个部分
1. HTML结构 (index.html)
游戏容器 (#gameContainer): 包裹所有游戏元素。HUD界面 (#hud): 显示分数、收集品和生命值。题目与选项区 (#questionArea, #optionsContainer): 展示当前题目和四个可选答案。角色与地面 (#character, #ground): 可移动的角色和游戏的“舞台”。控制按钮 (#controls): 左、跳、右三个操作按钮。反馈与弹窗 (#answerScreen, #startScreen): 用于显示答题结果和游戏开始/结束界面。音效元素 (audio): 预加载的跳跃、答对、答错等音效。
2. CSS样式
样式部分定义了所有元素的布局、动画和默认外观。其中最关键的是主题系统它通过动态插入style标签来覆盖默认的CSS类从而实现主题的彻底切换。
/* 示例马里奥主题的选项块样式 */
.theme-block-style {.optionBlock {background: linear-gradient(to bottom, #FFB84D, #CC8E33);border: 2px solid #663300;border-radius: 5px 5px 0 0;}
}3. JavaScript逻辑 (script)
这是游戏的大脑主要包含以下几个模块 themes 对象 定义了所有可用主题的详细配置包括背景、角色SVG、选项样式、奖励动画和装饰物HTML。 const themes {mario: {name: 超级马里奥,background: linear-gradient(...),character: svg.../svg,// ... 其他配置},// ... 其他主题
};questions 数组 存储题库。每道题都包含question问题、options选项、correct正确答案和theme关联主题四个关键字段。 const questions [{question: JavaScript中以下哪个不是原始数据类型,options: [Number, Array, String, Boolean],correct: B,theme: mario // 关键指定本题主题},// ... 更多题目
];applyTheme(themeKey) 函数 主题切换的核心。它会根据传入的主题名动态修改body背景、ground样式、角色SVG、装饰物并插入新的CSS样式表来覆盖选项的外观。 function applyTheme(themeKey) {const theme themes[themeKey];document.body.style.background theme.background;ground.style.cssText theme.groundStyle;character.innerHTML theme.character; // 直接替换SVG// ... 处理装饰物和样式表
}游戏状态管理 (gameState): 一个对象用于跟踪当前分数、生命值、题目索引、角色位置等。 核心游戏循环 包括loadQuestion()加载题目并切换主题、moveToBlock()移动角色、jump()跳跃并触发答题和checkAnswer()判断对错并播放反馈。 如何自定义你的专属题库
这个项目的最大魅力在于其高度可定制性。你只需修改questions数组就能轻松创建属于你自己的知识冒险
步骤如下
找到questions数组 在HTML文件的script标签内定位到const questions [...]部分。添加或修改题目对象 每个题目对象必须包含以下四个属性 question: 问题的文本。options: 一个包含四个选项文本的数组。correct: 正确答案的字母“A”, “B”, “C”, 或 “D”。theme: 该题目要使用的主题名必须是themes对象中已定义的键如mario, space等。 保存并刷新 修改完成后保存文件并在浏览器中刷新即可看到效果。
示例添加一道历史题
{question: 中国历史上第一个皇帝是谁,options: [刘邦, 项羽, 秦始皇, 汉武帝],correct: C,theme: goldMiner // 使用“黄金矿工”主题寓意挖掘历史宝藏
}通过这种方式你可以为不同学科、不同难度的题目分配不同的主题让学习过程充满惊喜。 总结与展望
《终极主题答题冒险》是一个将前端技术HTML5, CSS3, JavaScript与游戏设计理念完美结合的典范。它证明了学习工具也可以做得非常有趣和吸引人。
项目价值
对学习者 提供了一种全新的、沉浸式的学习方式。对开发者 是一个绝佳的学习项目涵盖了动态样式、SVG动画、状态管理和音效处理等多个前端知识点。对教育者 可以作为教学辅助工具激发学生的学习兴趣。
未来可以拓展的方向
增加更多主题如“埃及法老”、“未来都市”。引入道具系统如“复活卡”、“提示卡”。增加本地存储记录玩家最高分。实现题目难度分级。
立即获取源码开启你的创作之旅吧 **项目源码
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalablenotitle终极主题答题冒险/titlestyle* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Helvetica Neue, Arial, sans-serif;height: 100vh;overflow: hidden;position: relative;transition: background 0.8s ease;}#gameContainer {width: 100%;height: 100vh;position: relative;overflow: hidden;}/* HUD */#hud {position: absolute;top: 15px;left: 15px;color: white;font-size: 16px;font-weight: bold;text-shadow: 2px 2px 3px rgba(0,0,0,0.6);z-index: 100;}#hud div {margin-bottom: 5px;}/* 题目区域 */#questionArea {position: absolute;top: 70px;left: 50%;transform: translateX(-50%);background: rgba(0, 0, 0, 0.7);color: white;padding: 20px;border-radius: 10px;max-width: 90%;text-align: center;font-size: 18px;line-height: 1.6;box-shadow: 0 4px 8px rgba(0,0,0,0.3);z-index: 20;transition: all 0.5s ease;}/* 选项容器 */.optionsContainer {position: absolute;top: 200px;left: 50%;transform: translateX(-50%);display: flex;gap: 20px;width: fit-content;z-index: 15;}/* 默认选项样式每个主题会彻底覆盖 */.optionBlock {width: 100px;height: 80px;display: flex;flex-direction: column;justify-content: center;align-items: center;font-family: Helvetica Neue, Arial, sans-serif;cursor: default;position: relative;transition: transform 0.2s;border-radius: 5px;color: #333;}.optionBlock .label {font-size: 20px;font-weight: bold;}.optionBlock .text {font-size: 12px;margin-top: 4px;text-align: center;padding: 0 5px;}/* 反馈动画 */.optionBlock.correct { animation: correctAnim 0.6s ease-out forwards; }.optionBlock.wrong { animation: wrongAnim 0.5s ease-out forwards; opacity: 0.7; }keyframes correctAnim {0% { transform: scale(1); }50% { transform: scale(1.2) rotate(15deg); }100% { transform: scale(1); }}keyframes wrongAnim {0% { transform: rotate(0deg); }100% { transform: rotate(15deg) translateY(50px); opacity: 0.2; }}/* 角色容器 */#character {position: absolute;bottom: 160px;width: 40px;height: 40px;z-index: 10;transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease;filter: drop-shadow(2px 4px 3px rgba(0,0,0,0.4));}/* 角色动画 */#character.jump { animation: jump 0.8s ease-out; }#character.die { animation: die 1s ease-out forwards; }keyframes jump {0%, 100% { transform: translateY(0); }50% { transform: translateY(-120px); }}keyframes die {0% { transform: translateY(0) rotate(0deg); }50% { transform: translateY(-80px) rotate(180deg); }100% { transform: translateY(200px) rotate(360deg); opacity: 0; }}/* 地面 */#ground {position: absolute;bottom: 0;width: 100%;height: 100px;transition: all 0.5s ease;}/* 控制按钮 */#controls {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 15px;z-index: 100;}.controlBtn {width: 70px;height: 70px;background: rgba(255,255,255,0.3);border: 3px solid white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 28px;color: white;cursor: pointer;user-select: none;font-weight: bold;box-shadow: 0 4px 8px rgba(0,0,0,0.3);transition: all 0.2s;}.controlBtn:active {background: rgba(255,255,255,0.5);transform: scale(0.95);}/* 奖励动画容器 */.reward {position: absolute;z-index: 50;animation: floatUp 1.5s ease-out forwards;}keyframes floatUp {0% { transform: translateY(0) scale(1); opacity: 1; }100% { transform: translateY(-150px) scale(0.3); opacity: 0; }}/* 反馈弹窗 */.feedback {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);padding: 20px 30px;border-radius: 10px;font-size: 18px;font-weight: bold;text-align: center;z-index: 200;animation: fadeInOut 1.5s ease-out forwards;color: white;text-shadow: 1px 1px 2px rgba(0,0,0,0.8);}keyframes fadeInOut {0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }}/* 答案反馈层新增 */#answerScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.85);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 300;color: white;padding: 20px;text-align: center;display: none;}#answerScreen h2 {font-size: 24px;margin-bottom: 15px;color: #FFD700;}#answerScreen p {font-size: 18px;margin-bottom: 25px;line-height: 1.5;}#answerScreen .btn {padding: 12px 30px;margin: 0 10px;background: #FF6B35;border: none;border-radius: 8px;color: white;font-size: 18px;font-weight: bold;cursor: pointer;transition: background 0.2s, transform 0.2s;}#answerScreen .btn:hover {background: #FF8552;transform: scale(1.05);}/* 开始界面 */#startScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 400;color: white;}#startScreen h1 {font-size: 28px;margin-bottom: 20px;text-align: center;line-height: 1.4;}.startBtn {padding: 15px 40px;background: #FF6B35;border: none;border-radius: 8px;color: white;font-size: 18px;font-weight: bold;cursor: pointer;transition: transform 0.2s, background 0.2s;box-shadow: 0 5px 15px rgba(0,0,0,0.3);}.startBtn:hover {background: #FF8552;transform: scale(1.05);}/* 结束界面 */.endScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.9);display: flex;flex-direction: column;align-items: center;justify-content: center;z-index: 500;color: white;}.endScreen h1 {font-size: 32px;margin-bottom: 20px;}.endScreen .stats {font-size: 20px;margin-bottom: 30px;text-align: center;line-height: 1.6;}/* 装饰元素容器 */#decorationContainer {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none;z-index: 1;}/* 响应式 */media (max-width: 600px) {#questionArea { font-size: 16px; padding: 15px; }.controlBtn { width: 60px; height: 60px; font-size: 24px; }.optionBlock { width: 80px; height: 70px; }.optionBlock .label { font-size: 18px; }.optionBlock .text { font-size: 11px; }}/style
/head
bodydiv idgameContainer!-- 装饰元素 --div iddecorationContainer/div!-- HUD --div idhuddiv分数: span idscore0/span/divdiv收集: span idrewards0/span/divdiv生命: span idlives❤️❤️❤️/span/div/div!-- 题目区 --div idquestionAreadiv idquestionText点击开始游戏/div/div!-- 选项区 --div classoptionsContainer idoptionsContainer/div!-- 角色 --div idcharacter/div!-- 地面 --div idground/div!-- 控制按钮 --div idcontrolsdiv classcontrolBtn idleftBtn←/divdiv classcontrolBtn idjumpBtn↑/divdiv classcontrolBtn idrightBtn→/div/div!-- 答案反馈层 --div idanswerScreenh2 idanswerTitle✓ 正确/h2p idanswerDetail答案A - Number/pdivbutton classbtn idnextBtn下一题/buttonbutton classbtn idretryBtn styledisplay:none;再试一次/button/div/div!-- 开始界面 --div idstartScreenh1 终极主题答题冒险 /h1p stylecolor:#ccc;margin-bottom:30px;每道题都是全新世界/pbutton classstartBtn idstartBtn开始冒险/button/div!-- 音效元素使用公有领域 MP3 jsDelivr CDN --audio idjumpSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/retro/retro-game04.mp3 preloadauto/audioaudio idcorrectSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/interface/interface_01.mp3 preloadauto/audioaudio idwrongSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/interface/interface_03.mp3 preloadauto/audioaudio idcoinSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/coins/coins_01.mp3 preloadauto/audioaudio idsuccessSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/interface/interface_05.mp3 preloadauto/audioaudio idfailSound srchttps://cdn.jsdelivr.net/gh/KenneyNL/kenney-soundsmaster/sounds/interface/interface_04.mp3 preloadauto/audio/divscript// // 主题配置系统彻底不同的视觉系统// const themes {mario: {name: 超级马里奥,background: linear-gradient(to bottom, #5C94FC 0%, #5C94FC 80%, #C84C0C 80%),groundStyle: linear-gradient(to bottom, #8B7355 0%, #8B7355 10%, #5C4033 10%); border-top: 5px solid #3A2A1A;,questionBg: rgba(0, 0, 0, 0.7),character: svg viewBox0 0 40 40 xmlnshttp://www.w3.org/2000/svgcircle cx20 cy15 r12 fill#FF6B35/ !-- 帽子 --rect x10 y20 width20 height15 fillred rx2/ !-- 身体 --rect x12 y35 width6 height5 fill#333 rx1/ !-- 左脚 --rect x22 y35 width6 height5 fill#333 rx1/ !-- 右脚 --circle cx16 cy12 r2 fill#fff/ !-- 左眼 --circle cx24 cy12 r2 fill#fff/ !-- 右眼 --circle cx17 cy12 r1 fill#000/ !-- 左瞳孔 --circle cx25 cy12 r1 fill#000/ !-- 右瞳孔 --rect x18 y18 width4 height2 fill#000 rx1/ !-- 嘴 --/svg,blockStyle: .optionBlock {background: linear-gradient(to bottom, #FFB84D, #CC8E33);border: 2px solid #663300;border-radius: 5px 5px 0 0;},reward: {html: div stylewidth:30px;height:30px;background:radial-gradient(circle,#FFD700,#FFA500);border:2px solid #FFB84D;border-radius:50%;/div,animation: floatUp},decorations: !-- 云朵 --div styleposition:absolute;width:120px;height:50px;top:15%;left:15%;background:white;border-radius:50px;opacity:0.8;animation:floatCloud 25s infinite ease-in-out;/divdiv styleposition:absolute;width:90px;height:40px;top:10%;right:20%;background:white;border-radius:50px;opacity:0.8;animation:floatCloud 30s infinite ease-in-out;/div!-- 管道 --div styleposition:absolute;width:60px;height:100px;bottom:100px;left:80px;background:linear-gradient(to right,#00A800,#00D800,#008400);border:2px solid #003600;border-radius:5px 5px 0 0;/divdiv styleposition:absolute;width:60px;height:100px;bottom:100px;right:80px;background:linear-gradient(to right,#00A800,#00D800,#008400);border:2px solid #003600;border-radius:5px 5px 0 0;/div,animations: keyframes floatCloud {0%, 100% { transform: translateX(0); }50% { transform: translateX(40px); }},correctAnim: scale(1.2) rotate(15deg),wrongAnim: rotate(15deg) translateY(50px)},eco: {name: 森林守护者,background: linear-gradient(to bottom, #87CEEB 0%, #87CEEB 70%, #228B22 70%),groundStyle: linear-gradient(to bottom, #3A5F0B 0%, #013220 100%); border-top: 5px solid #006400;,questionBg: rgba(0, 80, 0, 0.7),character: svg viewBox0 0 40 40 xmlnshttp://www.w3.org/2000/svgcircle cx20 cy15 r12 fill#4169E1/ !-- 头盔 --rect x10 y20 width20 height15 fill#32CD32 rx2/ !-- 环保服 --rect x12 y35 width6 height5 fill#8B4513 rx1/ !-- 左靴 --rect x22 y35 width6 height5 fill#8B4513 rx1/ !-- 右靴 --circle cx16 cy12 r2 fill#fff/ !-- 左眼 --circle cx24 cy12 r2 fill#fff/ !-- 右眼 --circle cx17 cy12 r1 fill#000/ !-- 左瞳孔 --circle cx25 cy12 r1 fill#000/ !-- 右瞳孔 --path dM18 18 Q20 20 22 18 stroke#000 stroke-width1 fillnone/ !-- 微笑 --circle cx30 cy10 r3 fill#FFD700/ !-- 徽章 --/svg,blockStyle: .optionBlock {background: linear-gradient(to bottom, #90EE90, #228B22);border: 2px solid #006400;border-radius: 8px;box-shadow: 0 4px 8px rgba(0,100,0,0.3);},reward: {html: div stylewidth:25px;height:25px;background:linear-gradient(135deg,#7CFC00,#32CD32);border:2px solid #006400;border-radius:50%;box-shadow:0 0 10px #7CFC00;/div,animation: floatUpSpin},decorations: !-- 树木 --div styleposition:absolute;width:40px;height:60px;bottom:100px;left:100px;background:linear-gradient(to right,#006400 50%,#228B22 50%);border-radius:20px 20px 0 0;box-shadow:5px 5px 10px rgba(0,0,0,0.3);/divdiv styleposition:absolute;width:50px;height:70px;bottom:100px;right:120px;background:linear-gradient(to right,#006400 50%,#228B22 50%);border-radius:25px 25px 0 0;box-shadow:5px 5px 10px rgba(0,0,0,0.3);/div!-- 太阳 --div styleposition:absolute;width:60px;height:60px;top:15%;right:15%;background:radial-gradient(circle,#FFD700,#FF8C00);border-radius:50%;box-shadow:0 0 30px #FFD700;animation:pulseSun 3s infinite;/div,animations: keyframes pulseSun {0%, 100% { box-shadow: 0 0 30px #FFD700; }50% { box-shadow: 0 0 50px #FFD700; }}keyframes floatUpSpin {0% { transform: translateY(0) rotate(0deg); opacity: 1; }100% { transform: translateY(-150px) rotate(360deg) scale(0.3); opacity: 0; }},correctAnim: scale(1.2) rotate(10deg) translateY(-10px),wrongAnim: shake 0.5s ease-out forwards},goldMiner: {name: 黄金矿工,background: linear-gradient(to bottom, #8B4513 0%, #A0522D 50%, #654321 100%),groundStyle: linear-gradient(to bottom, #5C4033 0%, #2F1C0F 100%); border-top: 5px solid #000;,questionBg: rgba(139, 69, 19, 0.8),character: svg viewBox0 0 40 40 xmlnshttp://www.w3.org/2000/svgcircle cx20 cy15 r11 fill#8B4513/ !-- 头盔 --rect x12 y20 width16 height14 fill#A0522D rx2/ !-- 工作服 --rect x14 y34 width5 height4 fill#000/ !-- 左靴 --rect x21 y34 width5 height4 fill#000/ !-- 右靴 --circle cx17 cy12 r1.5 fill#fff/ !-- 左眼 --circle cx23 cy12 r1.5 fill#fff/ !-- 右眼 --circle cx17.5 cy12 r0.8 fill#000/ !-- 左瞳孔 --circle cx23.5 cy12 r0.8 fill#000/ !-- 右瞳孔 --path dM18 17 Q20 19 22 17 stroke#000 stroke-width1 fillnone/ !-- 严肃表情 --rect x18 y8 width4 height3 fill#FFD700/ !-- 头灯 --/svg,blockStyle: .optionBlock {background: linear-gradient(to bottom right, #DAA520, #8B4513);border: 2px solid #696969;border-radius: 3px;box-shadow: inset 2px 2px 5px rgba(255,255,255,0.3), 3px 3px 8px rgba(0,0,0,0.5);},reward: {html: div stylewidth:30px;height:30px;background:radial-gradient(circle,#FFD700,#B8860B);border:2px solid #DAA520;border-radius:50%;box-shadow:0 0 15px rgba(255,215,0,0.7);animation:glow 1.5s infinite alternate;/div,animation: floatUp},decorations: !-- 岩石 --div styleposition:absolute;width:50px;height:40px;bottom:120px;left:150px;background:#696969;border-radius:10px;transform:rotate(10deg);box-shadow:5px 5px 15px rgba(0,0,0,0.5);/divdiv styleposition:absolute;width:40px;height:50px;bottom:130px;right:160px;background:#696969;border-radius:15px;transform:rotate(-15deg);box-shadow:5px 5px 15px rgba(0,0,0,0.5);/div!-- 矿车 --div styleposition:absolute;width:60px;height:30px;bottom:100px;left:50%;transform:translateX(-50%);background:#8B4513;border:2px solid #000;border-radius:5px;animation:shakeCart 2s infinite;box-shadow:0 5px 15px rgba(0,0,0,0.5);div styleposition:absolute;bottom:-10px;left:10px;width:15px;height:10px;background:#000;border-radius:50%;/divdiv styleposition:absolute;bottom:-10px;right:10px;width:15px;height:10px;background:#000;border-radius:50%;/div/div,animations: keyframes shakeCart {0%, 100% { transform: translateX(-50%) rotate(0deg); }25% { transform: translateX(-55%) rotate(2deg); }75% { transform: translateX(-45%) rotate(-2deg); }}keyframes glow {from { box-shadow: 0 0 15px rgba(255,215,0,0.7); }to { box-shadow: 0 0 25px rgba(255,215,0,1); }},correctAnim: scale(1.2) rotate(5deg) translateY(-15px),wrongAnim: fallRock 0.5s ease-out forwards},space: {name: 太空探险,background: linear-gradient(to bottom, #000033 0%, #000066 100%),groundStyle: linear-gradient(to bottom, #4B0082 0%, #2E0854 100%); border-top: 5px solid #000;,questionBg: rgba(0, 0, 50, 0.8),character: svg viewBox0 0 40 40 xmlnshttp://www.w3.org/2000/svgcircle cx20 cy15 r12 fill#C0C0C0/ !-- 头盔 --rect x10 y20 width20 height15 fill#696969 rx2/ !-- 太空服 --rect x12 y35 width6 height5 fill#444 rx1/ !-- 左靴 --rect x22 y35 width6 height5 fill#444 rx1/ !-- 右靴 --circle cx16 cy12 r2 fill#00BFFF/ !-- 左眼罩 --circle cx24 cy12 r2 fill#00BFFF/ !-- 右眼罩 --circle cx16 cy12 r1 fill#fff/ !-- 左眼 --circle cx24 cy12 r1 fill#fff/ !-- 右眼 --rect x18 y18 width4 height2 fill#FF4500 rx1/ !-- 通讯器 --circle cx20 cy5 r3 fill#FFD700/ !-- 天线 --/svg,blockStyle: .optionBlock {background: linear-gradient(to bottom, #4682B4, #000080);border: 2px solid #0000CD;border-radius: 5px;box-shadow: 0 0 15px rgba(70,130,180,0.5);},reward: {html: div stylewidth:25px;height:25px;background:radial-gradient(circle,#00BFFF,#0000CD);border:2px solid #00008B;border-radius:50%;box-shadow:0 0 20px #00BFFF;animation:twinkle 1s infinite;/div,animation: floatUpBlink},decorations: !-- 星星 --div styleposition:absolute;width:4px;height:4px;top:20%;left:30%;background:white;border-radius:50%;box-shadow:0 0 10px white;animation:twinkleStar 1s infinite;/divdiv styleposition:absolute;width:3px;height:3px;top:15%;right:25%;background:white;border-radius:50%;box-shadow:0 0 10px white;animation:twinkleStar 1.5s infinite;/div!-- 行星 --div styleposition:absolute;width:50px;height:50px;bottom:150px;left:200px;background:radial-gradient(circle,#FF6347,#8B0000);border-radius:50%;box-shadow:0 0 30px #FF6347;animation:rotatePlanet 10s linear infinite;/div,animations: keyframes twinkleStar {0%, 100% { opacity: 0.3; box-shadow: 0 0 5px white; }50% { opacity: 1; box-shadow: 0 0 15px white; }}keyframes rotatePlanet {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}keyframes floatUpBlink {0% { transform: translateY(0); opacity: 0.5; }25% { opacity: 1; }75% { opacity: 1; }100% { transform: translateY(-150px) scale(0.3); opacity: 0; }},correctAnim: scale(1.2) rotate(360deg),wrongAnim: explode 0.5s ease-out forwards},ocean: {name: 深海寻宝,background: linear-gradient(to bottom, #1E90FF 0%, #00008B 100%),groundStyle: linear-gradient(to bottom, #2F4F4F 0%, #000000 100%); border-top: 5px solid #000;,questionBg: rgba(0, 0, 100, 0.8),character: svg viewBox0 0 40 40 xmlnshttp://www.w3.org/2000/svgcircle cx20 cy15 r12 fill#4169E1/ !-- 潜水头盔 --rect x10 y20 width20 height15 fill#1E90FF rx2/ !-- 潜水服 --rect x12 y35 width6 height5 fill#4B0082 rx1/ !-- 左脚蹼 --rect x22 y35 width6 height5 fill#4B0082 rx1/ !-- 右脚蹼 --circle cx16 cy12 r2 fill#fff/ !-- 左眼 --circle cx24 cy12 r2 fill#fff/ !-- 右眼 --circle cx17 cy12 r1 fill#000/ !-- 左瞳孔 --circle cx25 cy12 r1 fill#000/ !-- 右瞳孔 --path dM18 18 Q20 20 22 18 stroke#000 stroke-width1 fillnone/ !-- 微笑 --ellipse cx30 cy10 rx4 ry2 fill#FFD700/ !-- 氧气表 --/svg,blockStyle: .optionBlock {background: linear-gradient(to bottom, #20B2AA, #008080);border: 2px solid #006400;border-radius: 0 0 10px 10px;box-shadow: 0 5px 15px rgba(0,128,128,0.3);},reward: {html: div stylewidth:25px;height:25px;background:radial-gradient(circle,#F0FFFF,#E0FFFF);border:2px solid #AFEEEE;border-radius:50%;box-shadow:0 0 15px #00FFFF;animation:floatBubble 3s infinite;/div,animation: floatUpBubble},decorations: !-- 珊瑚 --div styleposition:absolute;width:30px;height:50px;bottom:100px;left:120px;background:linear-gradient(to top,#FF6347,#FF4500);border-radius:15px 15px 0 0;box-shadow:0 5px 15px rgba(255,99,71,0.3);/divdiv styleposition:absolute;width:40px;height:60px;bottom:100px;right:140px;background:linear-gradient(to top,#FF6347,#FF4500);border-radius:20px 20px 0 0;box-shadow:0 5px 15px rgba(255,99,71,0.3);/div!-- 气泡 --div styleposition:absolute;width:20px;height:20px;top:30%;left:40%;background:rgba(255,255,255,0.3);border-radius:50%;animation:riseBubble 3s infinite;/divdiv styleposition:absolute;width:15px;height:15px;top:25%;right:35%;background:rgba(255,255,255,0.3);border-radius:50%;animation:riseBubble 2.5s infinite;/div,animations: keyframes riseBubble {0% { transform: translateY(0); opacity: 0.3; }50% { transform: translateY(-30px); opacity: 0.8; }100% { transform: translateY(-60px); opacity: 0; }}keyframes floatUpBubble {0% { transform: translateY(0); opacity: 0.8; }50% { transform: translateY(-80px) scale(1.2); }100% { transform: translateY(-150px) scale(0.3); opacity: 0; }},correctAnim: scale(1.2) translateY(-20px) rotate(10deg),wrongAnim: sink 0.5s ease-out forwards}};// // 题目数据每题带 theme 字段// const questions [{question: JavaScript中以下哪个不是原始数据类型,options: [Number, Array, String, Boolean],correct: B,theme: mario},{question: HTML5中哪个标签用于定义导航链接,options: [nav, navigation, navigate, menu],correct: A,theme: eco},{question: CSS中哪个属性用于设置元素的透明度,options: [transparency, opacity, visible, alpha],correct: B,theme: goldMiner},{question: 在Git中哪个命令用于查看提交历史,options: [git status, git log, git history, git show],correct: B,theme: space},{question: React中哪个Hook用于处理副作用,options: [useState, useReducer, useEffect, useContext],correct: C,theme: ocean},{question: HTTP状态码404表示什么,options: [服务器错误, 未找到, 禁止访问, 请求超时],correct: B,theme: mario},{question: Python中哪个关键字用于定义函数,options: [function, def, func, define],correct: B,theme: goldMiner},{question: 数据库中SQL的全称是什么,options: [Structured Query Language, Simple Query Language, Standard Query Language, System Query Language],correct: A,theme: space}];// // 游戏状态// let gameState {score: 0,rewards: 0,lives: 3,currentQuestion: 0,currentBlockIndex: 0,isJumping: false,isAnswering: false,gameStarted: false,currentTheme: null,awaitingAction: false // 新增等待用户点击按钮};// 常量const BLOCK_WIDTH 100;const BLOCK_SPACING 20;// DOM 元素const character document.getElementById(character);const questionArea document.getElementById(questionArea);const questionText document.getElementById(questionText);const optionsContainer document.getElementById(optionsContainer);const scoreElement document.getElementById(score);const rewardsElement document.getElementById(rewards);const livesElement document.getElementById(lives);const startScreen document.getElementById(startScreen);const startBtn document.getElementById(startBtn);const leftBtn document.getElementById(leftBtn);const rightBtn document.getElementById(rightBtn);const jumpBtn document.getElementById(jumpBtn);const decorationContainer document.getElementById(decorationContainer);const ground document.getElementById(ground);// 音效元素const jumpSound document.getElementById(jumpSound);const correctSound document.getElementById(correctSound);const wrongSound document.getElementById(wrongSound);const coinSound document.getElementById(coinSound);const successSound document.getElementById(successSound);const failSound document.getElementById(failSound);// 答案反馈层元素const answerScreen document.getElementById(answerScreen);const answerTitle document.getElementById(answerTitle);const answerDetail document.getElementById(answerDetail);const nextBtn document.getElementById(nextBtn);const retryBtn document.getElementById(retryBtn);// // 音效系统终极修复版// function playSound(sound) {if (!sound || !sound.src) {console.warn(音效未加载或无效:, sound);return;}sound.currentTime 0;const playPromise sound.play();if (playPromise ! undefined) {playPromise.catch(error {console.warn(音效播放被浏览器阻止等待用户交互后重试:, error);const unlockHandler () {sound.play().catch(() {});document.removeEventListener(click, unlockHandler);document.removeEventListener(touchstart, unlockHandler);};document.addEventListener(click, unlockHandler, { once: true });document.addEventListener(touchstart, unlockHandler, { once: true });});}}// 预加载并解锁音频上下文function unlockAudioContext() {const audioContext new (window.AudioContext || window.webkitAudioContext)();audioContext.resume().then(() {console.log( 音频上下文已解锁);}).catch(e {console.warn(音频上下文解锁失败:, e);});const sounds [jumpSound, correctSound, wrongSound, coinSound, successSound, failSound];sounds.forEach(sound {if (sound) {sound.volume 0;sound.play().then(() {sound.pause();sound.currentTime 0;sound.volume 1;}).catch(() {});}});}document.addEventListener(DOMContentLoaded, () {document.addEventListener(click, unlockAudioContext, { once: true });document.addEventListener(touchstart, unlockAudioContext, { once: true });});// // 主题应用函数彻底换装// function applyTheme(themeKey) {const theme themes[themeKey];if (!theme) return;document.body.style.background theme.background;ground.style.cssText theme.groundStyle;questionArea.style.background theme.questionBg;character.innerHTML theme.character;decorationContainer.innerHTML theme.decorations || ;const existingStyle document.getElementById(theme-block-style);if (existingStyle) existingStyle.remove();const blockStyle document.createElement(style);blockStyle.id theme-block-style;blockStyle.textContent theme.blockStyle;document.head.appendChild(blockStyle);const existingAnimations document.getElementById(theme-animations);if (existingAnimations) existingAnimations.remove();if (theme.animations) {const animStyle document.createElement(style);animStyle.id theme-animations;animStyle.textContent theme.animations;document.head.appendChild(animStyle);}gameState.currentTheme themeKey;character.style.transform translateY(0);character.classList.remove(die);}// // 游戏逻辑// function initGame() {startScreen.style.display none;gameState {score: 0,rewards: 0,lives: 3,currentQuestion: 0,currentBlockIndex: 0,isJumping: false,isAnswering: false,gameStarted: true,currentTheme: null,awaitingAction: false};updateHUD();loadQuestion();moveToBlock(0);playSound(jumpSound); // 播放开始音效}function loadQuestion() {if (gameState.currentQuestion questions.length) {playSound(successSound);endGame(true);return;}const q questions[gameState.currentQuestion];if (q.theme) {applyTheme(q.theme);}questionText.textContent q.question;optionsContainer.innerHTML ;q.options.forEach((opt, i) {const block document.createElement(div);block.className optionBlock;block.innerHTML div classlabel${String.fromCharCode(65 i)}/divdiv classtext${opt}/div;optionsContainer.appendChild(block);});gameState.isAnswering true;answerScreen.style.display none; // 隐藏答案层}function moveToBlock(index) {if (index 0 || index 3 || gameState.isJumping || gameState.awaitingAction) return;gameState.currentBlockIndex index;const centerX getBlockCenterX(index);character.style.left (centerX - 20) px;}function getBlockCenterX(index) {const containerWidth 4 * BLOCK_WIDTH 3 * BLOCK_SPACING;const startX (window.innerWidth - containerWidth) / 2;return startX index * (BLOCK_WIDTH BLOCK_SPACING) BLOCK_WIDTH / 2;}function jump() {if (!gameState.gameStarted || gameState.isJumping || !gameState.isAnswering || gameState.awaitingAction) return;gameState.isJumping true;character.classList.add(jump);playSound(jumpSound);setTimeout(() {checkAnswer();}, 400);setTimeout(() {character.classList.remove(jump);gameState.isJumping false;}, 800);}function checkAnswer() {const currentIndex gameState.currentBlockIndex;const selectedOption String.fromCharCode(65 currentIndex);const currentQ questions[gameState.currentQuestion];const blocks document.querySelectorAll(.optionBlock);const selectedBlock blocks[currentIndex];if (selectedOption currentQ.correct) {const theme themes[gameState.currentTheme];selectedBlock.style.animation 0.6s ease-out forwards;selectedBlock.style.transform theme.correctAnim;gameState.score 100;gameState.rewards 1;updateHUD();const rect selectedBlock.getBoundingClientRect();spawnThemeReward(rect.left rect.width/2, rect.top);playSound(correctSound);playSound(coinSound);showAnswerScreen(true,✓ 正确,${selectedOption} - ${currentQ.options[currentIndex]});} else {const theme themes[gameState.currentTheme];selectedBlock.style.animation 0.5s ease-out forwards;selectedBlock.style.transform theme.wrongAnim;selectedBlock.style.opacity 0.2;gameState.lives - 1;updateHUD();playSound(wrongSound);showAnswerScreen(false,✗ 答错了,正确答案${currentQ.correct} - ${currentQ.options[getCorrectIndex(currentQ)]});character.classList.add(die);if (gameState.lives 0) {setTimeout(() {playSound(failSound);endGame(false);}, 1000);return;}retryBtn.style.display inline-block;}gameState.awaitingAction true;gameState.isAnswering false;}// 显示答案反馈层function showAnswerScreen(isCorrect, title, detail) {answerTitle.textContent title;answerTitle.style.color isCorrect ? #00FF00 : #FF0000;answerDetail.textContent detail;retryBtn.style.display isCorrect ? none : inline-block;answerScreen.style.display flex;}function spawnThemeReward(x, y) {const theme themes[gameState.currentTheme];const reward document.createElement(div);reward.className reward;reward.style.left (x - 15) px;reward.style.top (y - 15) px;reward.innerHTML theme.reward.html;reward.style.animationName theme.reward.animation;document.getElementById(gameContainer).appendChild(reward);setTimeout(() {if (reward.parentNode) {reward.remove();}}, 1500);}function getCorrectIndex(q) {return q.correct.charCodeAt(0) - 65;}// 下一题function nextQuestion() {if (gameState.lives 0) {playSound(failSound);endGame(false);return;}gameState.awaitingAction false;character.classList.remove(die);gameState.currentQuestion;loadQuestion();moveToBlock(0);}// 重试当前题function retryQuestion() {gameState.awaitingAction false;character.classList.remove(die);loadQuestion();moveToBlock(0);}function updateHUD() {scoreElement.textContent gameState.score;rewardsElement.textContent gameState.rewards;livesElement.textContent ❤️.repeat(gameState.lives);}function endGame(isWin) {gameState.gameStarted false;const existing document.querySelector(.endScreen);if (existing) existing.remove();const endScreen document.createElement(div);endScreen.className endScreen;endScreen.innerHTML h1${isWin ? 终极冒险大师 : 冒险结束}/h1div classstats最终得分: ${gameState.score}br收集物品: ${gameState.rewards}br${isWin ? 你征服了所有世界 : 你坚持到了第 ${gameState.currentQuestion 1} 题}/divbutton classstartBtn onclicklocation.reload()重新开始/button;document.body.appendChild(endScreen);}// // ️ 事件绑定// startBtn.addEventListener(click, initGame);leftBtn.addEventListener(click, () {moveToBlock(gameState.currentBlockIndex - 1);});rightBtn.addEventListener(click, () {moveToBlock(gameState.currentBlockIndex 1);});jumpBtn.addEventListener(click, jump);// 绑定答案层按钮nextBtn.addEventListener(click, nextQuestion);retryBtn.addEventListener(click, retryQuestion);document.addEventListener(keydown, (e) {if (!gameState.gameStarted) return;if (gameState.awaitingAction) {if (e.key Enter || e.key ) {if (gameState.lives 0 retryBtn.style.display ! none) {retryQuestion();} else {nextQuestion();}}return;}switch(e.key) {case ArrowLeft:case a:case A:moveToBlock(gameState.currentBlockIndex - 1);break;case ArrowRight:case d:case D:moveToBlock(gameState.currentBlockIndex 1);break;case ArrowUp:case :case w:case W:jump();break;}});// 初始化 HUDupdateHUD();// 控制台署名console.log(终极主题答题冒险 - 开源项目
音效来源: Kenney.nl (公有领域)
许可证: MIT
);/script
/body
/html在线体验 https://share.htmlput.com/p/73mhzve0a0?langzh
快去修改题库打造属于你自己的知识冒险世界吧
