传统乐器知识答题游戏
by GlitchFlare80196 lines5.8 KB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>传统乐器知识答题游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: SimHei, sans-serif;
}
body {
background: #f8f2e4;
padding: 20px;
}
.head-title {
text-align: center;
color: #a0522d;
font-size: 24px;
margin-bottom: 15px;
}
.info-bar {
display: flex;
justify-content: space-around;
background: #fff;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
font-weight: bold;
}
.q-box {
background: #ffffff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px #ccc;
}
.question-text {
font-size: 17px;
line-height: 1.7;
margin-bottom: 20px;
text-align: center;
}
.answer-item {
display: block;
width: 100%;
padding: 13px;
margin: 8px 0;
border: 1px solid #deb887;
border-radius: 8px;
background: #fffaf0;
font-size: 16px;
cursor: pointer;
}
.answer-item.right {
background: #d4edda;
border-color: #28a745;
}
.answer-item.error {
background: #f8d7da;
border-color: #dc3545;
}
.explain {
margin-top: 15px;
padding: 10px;
background: #fff3cd;
border-radius: 6px;
display: none;
font-size: 15px;
}
.btn-group {
text-align: center;
margin-top: 25px;
}
.oper-btn {
padding: 10px 25px;
border: none;
background: #a0522d;
color: #fff;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
}
.oper-btn:disabled {
background: #b99680;
cursor: not-allowed;
}
.over-page {
text-align: center;
display: none;
padding: 40px 0;
}
</style>
</head>
<body>
<h2 class="head-title">传统乐器文化答题闯关</h2>
<div class="info-bar">
<span>题号：<span id="nowNum">1</span>/10</span>
<span>得分：<span id="userScore">0</span></span>
</div>
<div class="q-box" id="gameMain">
<p class="question-text" id="showQ"></p>
<div id="optionBox"></div>
<div class="explain" id="explainText"></div>
</div>
<div class="btn-group">
<button class="oper-btn" id="nextBtn" disabled onclick="goNext()">下一题</button>
</div>
<div class="over-page" id="endPage">
<h3>答题完成！</h3>
<p style="margin:20px 0;font-size:18px">最终成绩：<span id="lastScore">0</span> 分</p>
<button class="oper-btn" onclick="restartGame()">重新游玩</button>
</div>
<script>
// 题库固定内置，杜绝加载失败
var dataList = [
{
q:"古筝属于哪一类传统乐器？",
a:["吹管乐器","弹拨乐器","拉弦乐器","打击乐器"],
correct:1,
desc:"古筝是经典弹拨弦鸣乐器，音色清雅悠扬。"
},
{
q:"二胡一共有几根琴弦？",
a:["一根","两根","三根","四根"],
correct:1,
desc:"二胡名称由来就是拥有两根琴弦，是主流民乐。"
},
{
q:"名曲《十面埋伏》主要用什么乐器演奏？",
a:["古筝","琵琶","笛子","古琴"],
correct:1,
desc:"《十面埋伏》是琵琶代表大曲，气势磅礴。"
},
{
q:"竹笛属于什么乐器类别？",
a:["吹管","弹拨","拉弦","敲击"],
correct:0,
desc:"竹笛依靠吹气发声，属于传统吹管乐器。"
},
{
q:"编钟最早盛行于哪个朝代？",
a:["唐朝","周朝","宋朝","明朝"],
correct:1,
desc:"编钟在商周时期极为盛行，是宫廷重器。"
},
{
q:"《高山流水》是哪种乐器经典曲目？",
a:["唢呐","古琴","马头琴","扬琴"],
correct:1,
desc:"高山流水为古琴十大名曲之一。"
},
{
q:"葫芦丝是哪里特色民族乐器？",
a:["东北","云南","西北","江南"],
correct:1,
desc:"葫芦丝流行于云南傣族、彝族等少数民族地区。"
},
{
q:"下列属于打击乐器的是？",
a:["鼓","阮","箫","京胡"],
correct:0,
desc:"鼓依靠敲击发声，属于传统打击乐器。"
},
{
q:"扬琴属于？",
a:["弹拨乐器","打击弦鸣乐器","吹管乐器","拉弦乐器"],
correct:1,
desc:"扬琴依靠琴槌敲击琴弦发声。"
},
{
q:"被称为民乐之王的乐器是？",
a:["二胡","琵琶","古筝","笙"],
correct:1,
desc:"琵琶历史悠久，表现力极强，被誉为民乐之王。"
}
];
let nowIndex = 0;
let score = 0;
// 页面元素提前获取
let showQ = document.getElementById("showQ");
let optionBox = document.getElementById("optionBox");
let explainText = document.getElementById("explainText");
let nextBtn = document.getElementById("nextBtn");
let nowNum = document.getElementById("nowNum");
let userScore = document.getElementById("userScore");
let gameMain = document.getElementById("gameMain");
let endPage = document.getElementById("endPage");
let lastScore = doGame Source: 传统乐器知识答题游戏
Creator: GlitchFlare80
Libraries: none
Complexity: moderate (196 lines, 5.8 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: -glitchflare80-mpcs12dt" to link back to the original. Then publish at arcadelab.ai/publish.