成语验证游戏-优快云博客

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/147632613

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>成语验证游戏</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}

.container {
background-color: white;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 90%;
max-width: 800px;
text-align: center;
margin-top: 20px;
}

h1 {
color: #333;
margin-bottom: 30px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.idiom-display {
font-size: 24px;
margin: 20px 0;
min-height: 60px;
display: flex;
justify-content: center;
align-items: center;
}

.character-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
margin: 20px 0;
}

.character {
background-color: #4a69bd;
color: white;
border-radius: 5px;
padding: 15px;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
user-select: none;
}

.character:hover {
background-color: #3c58b0;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.character.selected {
background-color: #e55039;
transform: translateY(0);
box-shadow: none;
}

.character.correct {
background-color: #78e08f;
}

.character.wrong {
background-color: #e55039;
animation: shake 0.5s;
}

@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}

.controls {
margin-top: 30px;
}

button {
background-color: #4a69bd;
color: white;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s;
margin: 0 10px;
}

button:hover {
background-color: #3c58b0;
transform: translateY(-2px);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

button:disabled {
background-color: #ccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}

.message {
margin-top: 20px;
font-size: 18px;
min-height: 27px;
}

.success {
color: #78e08f;
font-weight: bold;
animation: zoom 0.5s;
}

.error {
color: #e55039;
font-weight: bold;
}

@keyframes zoom {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.score {
font-size: 18px;
margin-top: 20px;
color: #333;
}

.footer {
margin-top: 40px;
font-size: 14px;
color: #666;
}

.footer a {
color: #4a69bd;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}

.explanation {
margin-top: 20px;
padding: 15px;
background-color: #f8f9fa;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>成语验证游戏</h1>

<div class="score">得分: <span id="score">0</span></div>

<div class="idiom-display" id="idiomDisplay"></div>

<div class="character-grid" id="characterGrid"></div>

<div class="message" id="message"></div>

<div class="explanation" id="explanation"></div>

<div class="controls">
<button id="checkBtn">验证</button>
<button id="nextBtn" disabled>下一个</button>
<button id="hintBtn">提示</button>
</div>
</div>

<div class="footer">

</div>

<script>
// 成语数据
const idioms = [
{ idiom: "一帆风顺", explanation: "比喻非常顺利，没有任何阻碍。" },
{ idiom: "画龙点睛", explanation: "比喻在关键地方简明扼要地点明要旨，使内容生动传神。" },
{ idiom: "守株待兔", explanation: "比喻希望不经过努力而得到成功的侥幸心理。" },
{ idiom: "望梅止渴", explanation: "比喻用空想安慰自己。" },
{ idiom: "亡羊补牢", explanation: "比喻出了问题以后想办法补救，可以防止继续受损失。" },
{ idiom: "掩耳盗铃", explanation: "比喻自己欺骗自己，明明掩盖不住的事情偏要想法子掩盖。" },
{ idiom: "对牛弹琴", explanation: "比喻对不懂道理的人讲道理，对外行人说内行话。" },
{ idiom: "杯弓蛇影", explanation: "比喻疑神疑鬼，自相惊扰。" },
{ idiom: "拔苗助长", explanation: "比喻违反事物发展的客观规律，急于求成，反而坏事。" },
{ idiom: "狐假虎威", explanation: "比喻依仗别人的势力欺压人。" }
];

// 游戏变量
let currentIdiom = "";
let selectedCharacters = [];
let score = 0;
let shuffledCharacters = [];

// DOM元素
const idiomDisplay = document.getElementById("idiomDisplay");
const characterGrid = document.getElementById("characterGrid");
const messageEl = document.getElementById("message");
const scoreEl = document.getElementById("score");
const checkBtn = document.getElementById("checkBtn");
const nextBtn = document.getElementById("nextBtn");
const hintBtn = document.getElementById("hintBtn");
const explanationEl = document.getElementById("explanation");

// 初始化游戏
function initGame() {
// 随机选择一个成语
const randomIndex = Math.floor(Math.random() * idioms.length);
currentIdiom = idioms[randomIndex].idiom;
explanationEl.textContent = "解释: " + idioms[randomIndex].explanation;
explanationEl.style.display = "none";

// 清空显示
idiomDisplay.textContent = "";
characterGrid.innerHTML = "";
messageEl.textContent = "";
messageEl.className = "message";
selectedCharacters = [];

// 创建打乱的字符数组
shuffledCharacters = shuffleArray([...currentIdiom, ...getRandomCharacters(10 - currentIdiom.length)]);

// 显示打乱的字符
shuffledCharacters.forEach((char, index) => {
const charElement = document.createElement("div");
charElement.className = "character";
charElement.textContent = char;
charElement.dataset.index = index;
charElement.addEventListener("click", () => selectCharacter(charElement));
characterGrid.appendChild(charElement);
});

// 重置按钮状态
checkBtn.disabled = false;
nextBtn.disabled = true;
}

// 选择字符
function selectCharacter(element) {
const index = element.dataset.index;
const char = element.textContent;

// 如果已经选中，则取消选择
if (element.classList.contains("selected")) {
element.classList.remove("selected");
selectedCharacters = selectedCharacters.filter(c => c.index !== index);
return;
}

// 最多选择4个字符
if (selectedCharacters.length >= 4) {
showMessage("最多只能选择4个字符！", "error");
return;
}

// 选中字符
element.classList.add("selected");
selectedCharacters.push({ char, index });

// 更新显示的成语
updateIdiomDisplay();
}

// 更新显示的成语
function updateIdiomDisplay() {
let displayText = "";
for (let i = 0; i < selectedCharacters.length; i++) {
displayText += selectedCharacters[i].char;
}
idiomDisplay.textContent = displayText;
}

// 验证成语
function checkIdiom() {
if (selectedCharacters.length !== 4) {
showMessage("请选择4个字符组成成语！", "error");
return;
}

const userAnswer = selectedCharacters.map(c => c.char).join("");

if (userAnswer === currentIdiom) {
// 正确答案
score += 10;
scoreEl.textContent = score;

// 标记正确的字符
selectedCharacters.forEach(c => {
const element = document.querySelector(`.character[data-index="${c.index}"]`);
element.classList.remove("selected");
element.classList.add("correct");
});

showMessage("恭喜你，答对了！", "success");
explanationEl.style.display = "block";

// 禁用验证按钮，启用下一个按钮
checkBtn.disabled = true;
nextBtn.disabled = false;
} else {
// 错误答案
selectedCharacters.forEach(c => {
const element = document.querySelector(`.character[data-index="${c.index}"]`);
element.classList.remove("selected");
element.classList.add("wrong");
});

showMessage("答案不正确，请再试一次！", "error");

// 0.5秒后移除错误样式
setTimeout(() => {
selectedCharacters.forEach(c => {
const element = document.querySelector(`.character[data-index="${c.index}"]`);
element.classList.remove("wrong");
});
selectedCharacters = [];
idiomDisplay.textContent = "";
}, 500);
}
}

// 显示提示
function showHint() {
// 随机显示一个正确字符
const correctChars = [...currentIdiom];
const displayedChars = selectedCharacters.map(c => c.char);

// 找出还未被选中的正确字符
const remainingChars = correctChars.filter(char => !displayedChars.includes(char));

if (remainingChars.length > 0) {
const hintChar = remainingChars[0];

// 找到对应的元素并高亮
for (let i = 0; i < shuffledCharacters.length; i++) {
if (shuffledCharacters[i] === hintChar) {
const element = document.querySelector(`.character[data-index="${i}"]`);
element.style.backgroundColor = "#f6b93b";
element.style.color = "#fff";

// 2秒后恢复原样
setTimeout(() => {
if (!element.classList.contains("selected") && !element.classList.contains("correct")) {
element.style.backgroundColor = "";
element.style.color = "";
}
}, 2000);
break;
}
}

showMessage(`提示: 成语中包含"${hintChar}"`, "success");
} else {
showMessage("你已经选择了所有正确的字符！", "success");
}
}

// 显示消息
function showMessage(text, type) {
messageEl.textContent = text;
messageEl.className = "message";
if (type) {
messageEl.classList.add(type);
}
}

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

// 获取随机汉字
function getRandomCharacters(count) {
const characters = [];
for (let i = 0; i < count; i++) {
// 随机生成汉字 (0x4e00-0x9fa5)
const charCode = Math.floor(Math.random() * (0x9fa5 - 0x4e00 + 1)) + 0x4e00;
characters.push(String.fromCharCode(charCode));
}
return characters;
}

// 事件监听
checkBtn.addEventListener("click", checkIdiom);
nextBtn.addEventListener("click", initGame);
hintBtn.addEventListener("click", showHint);

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