成语验证游戏

原创已于 2025-06-27 15:44:09 修改 · 357 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-23 13:49:39 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成语验证游戏</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #f5f5f5;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.game-container {
background-color: white;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
padding: 30px;
width: 80%;
max-width: 600px;
margin-bottom: 20px;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 30px;
}
.idiom-display {
font-size: 24px;
text-align: center;
margin: 20px 0;
padding: 15px;
background-color: #f9f9f9;
border-radius: 5px;
min-height: 40px;
}
.options-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
.option {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s;
}
.option:hover {
background-color: #45a049;
transform: translateY(-2px);
}
.result {
text-align: center;
font-size: 18px;
min-height: 27px;
margin: 15px 0;
}
.correct {
color: #4CAF50;
}
.incorrect {
color: #f44336;
}
.next-btn {
background-color: #2196F3;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
display: block;
margin: 0 auto;
transition: all 0.3s;
}
.next-btn:hover {
background-color: #0b7dda;
}
.hidden {
display: none;
}
.score {
font-size: 18px;
text-align: center;
margin: 10px 0;
}
.footer {
margin-top: 30px;
text-align: center;
color: #666;
font-size: 14px;
}
.footer a {
color: #2196F3;
text-decoration: none;
}
</style>
</head>
<body>
<div class="game-container">
<h1>成语验证游戏</h1>
<div class="score">得分: <span id="score">0</span></div>
<div class="idiom-display" id="current-idiom"></div>
<div class="result" id="result"></div>
<div class="options-container" id="options"></div>
<button class="next-btn hidden" id="next-btn">下一题</button>
</div>

// 错误解释选项
const wrongMeanings = [
"比喻勤奋努力终有回报",
"形容绘画技艺高超",
"表示放弃已经失去的东西",
"形容非常专注地做某事",
"形容看到美好的事物就忘记口渴",
"形容音乐才能高超",
"形容饮酒过量产生的幻觉",
"形容对植物的热爱"
];

let currentIdiom = null;
let score = 0;
let options = [];

// 初始化游戏
function initGame() {
$("#next-btn").addClass("hidden");
$("#result").text("");
$("#result").removeClass("correct incorrect");

// 随机选择一个成语
currentIdiom = idioms[Math.floor(Math.random() * idioms.length)];
$("#current-idiom").text(currentIdiom.idiom);

// 准备选项
options = [
{ text: currentIdiom.meaning, correct: true },
{ text: wrongMeanings[Math.floor(Math.random() * wrongMeanings.length)], correct: false },
{ text: wrongMeanings[Math.floor(Math.random() * wrongMeanings.length)], correct: false }
];

// 打乱选项顺序
options = shuffleArray(options);

// 显示选项
$("#options").empty();
options.forEach((option, index) => {
$("#options").append(`<button class="option" data-correct="${option.correct}">${option.text}</button>`);
});
}

// 打乱数组顺序
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}

// 点击选项
$(document).on("click", ".option", function() {
const isCorrect = $(this).data("correct");
$(".option").prop("disabled", true);

if (isCorrect) {
$("#result").text("回答正确!").addClass("correct");
score++;
$("#score").text(score);
} else {
$("#result").text(`回答错误! 正确答案是: ${currentIdiom.meaning}`).addClass("incorrect");
}

$("#next-btn").removeClass("hidden");
});

// 下一题
$("#next-btn").click(function() {
initGame();
});

// 开始游戏
initGame();
});
</script>
</body>
</html>