<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Python 保留字记忆游戏</title>
<style>
body {
font-family: 'Roboto', sans-serif;
background-color: #f5f5f7;
color: #333;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background-color: #ffffff;
padding: 40px;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
font-size: 28px;
color: #1a1a1a;
margin-bottom: 40px;
}
.quiz-container {
padding: 25px;
background-color: #fafafa;
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
p {
font-size: 18px;
line-height: 1.6;
color: #333;
}
.answer-input {
width: 100%;
padding: 14px 20px;
margin-top: 20px;
font-size: 16px;
border-radius: 8px;
border: 2px solid #ddd;
background-color: #fff;
color: #333;
box-sizing: border-box;
transition: border-color 0.3s ease;
}
.answer-input:focus {
border-color: #4e9bff;
outline: none;
}
.feedback {
margin-top: 20px;
padding: 15px;
border-radius: 8px;
font-weight: bold;
text-align: center;
transition: background-color 0.3s ease;
}
.correct {
background-color: #4CAF50;
color: white;
}
.incorrect {
background-color: #f44336;
color: white;
}
.score {
font-size: 20px;
color: #333;
margin-top: 25px;
text-align: center;
}
.button {
background-color: #4e9bff;
color: white;
font-size: 16px;
padding: 12px 25px;
border: none;
border-radius: 30px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 20px;
display: block;
width: 100%;
}
.button:hover {
background-color: #007aff;
}
.exit-btn {
background-color: #ff3b30;
margin-top: 15px;
display: inline-block;
padding: 10px 20px;
border-radius: 30px;
font-size: 16px;
cursor: pointer;
color: white;
border: none;
}
.exit-btn:hover {
background-color: #d32f2f;
}
/* 手机端和小屏幕的响应式设计 */
@media (max-width: 600px) {
.container {
padding: 15px;
}
.answer-input {
padding: 12px;
font-size: 14px;
}
.button {
font-size: 18px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Python 保留字记忆游戏</h1>
<div class="quiz-container">
<p id="word-placeholder">单词填空: ____</p>
<p id="translation">中文翻译: </p>
<p id="usage">用途翻译: </p>
<p id="pronunciation">发音提示: </p>
<input type="text" id="answer-input" class="answer-input" placeholder="请输入完整的单词">
<div id="feedback" class="feedback"></div>
</div>
<div class="score" id="score">
当前得分: <span id="current-score">0</span> 分
</div>
<button class="button" onclick="nextQuestion()">下一题</button>
<button class="exit-btn" onclick="exitGame()">退出游戏</button>
</div>
<script>
const wordsData = [
{ word: "and", translation: "和", usage: "逻辑运算符，表示两个条件都为真时返回真。", pronunciation: "安的" },
{ word: "as", translation: "作为", usage: "用于别名赋值，例如 `import module as m`。", pronunciation: "啊思" },
{ word: "assert", translation: "断言", usage: "用于调试时检查条件是否成立，如果不成立则抛出异常。", pronunciation: "啊色特" },
{ word: "break", translation: "跳出", usage: "用于终止循环（`for` 或 `while`）的执行。", pronunciation: "布瑞克" },
{ word: "class", translation: "类", usage: "用于定义一个类。", pronunciation: "克拉斯" },
{ word: "continue", translation: "继续", usage: "用于跳过当前循环的剩余部分，直接开始下一次循环。", pronunciation: "康提纽" },
{ word: "def", translation: "定义函数", usage: "用于定义函数。", pronunciation: "迪夫" },
{ word: "del", translation: "删除", usage: "用于删除对象或变量。", pronunciation: "德尔" },
{ word: "elif", translation: "否则如果", usage: "与 `if` 一起使用，检查多个条件。", pronunciation: "艾利夫" },
{ word: "else", translation: "否则", usage: "用于 `if` 语句后，表示所有条件不满足时执行的代码。", pronunciation: "艾尔思" },
{ word: "except", translation: "异常处理", usage: "与 `try` 一起使用，捕捉并处理异常。", pronunciation: "艾克塞普特" },
{ word: "finally", translation: "最终执行", usage: "与 `try` 一起使用，确保无论是否发生异常都执行的代码。", pronunciation: "菲纳利" },
{ word: "for", translation: "循环", usage: "用于循环结构，迭代对象中的元素。", pronunciation: "佛尔" },
{ word: "from", translation: "从...导入", usage: "用于导入模块或包中的特定部分。", pronunciation: "弗罗姆" },
{ word: "global", translation: "全局变量", usage: "用于声明变量为全局作用域。", pronunciation: "格罗巴尔" },
{ word: "if", translation: "如果", usage: "用于条件判断语句。", pronunciation: "伊夫" },
{ word: "import", translation: "导入", usage: "用于导入模块或包。", pronunciation: "因波特" },
{ word: "in", translation: "在...中", usage: "用于检查元素是否在集合中，或在 `for` 循环中遍历元素。", pronunciation: "因" },
{ word: "is", translation: "是", usage: "用于比较两个对象是否是同一个对象（引用相同）。", pronunciation: "伊斯" },
{ word: "lambda", translation: "匿名函数", usage: "用于定义小的匿名函数。", pronunciation: "蓝达" },
{ word: "nonlocal", translation: "非局部变量", usage: "用于在嵌套函数中引用外层函数的变量。", pronunciation: "诺恩洛卡尔" },
{ word: "not", translation: "非", usage: "逻辑运算符，表示条件是否不成立。", pronunciation: "诺特" },
{ word: "or", translation: "或", usage: "逻辑运算符，表示两个条件中至少一个为真时返回真。", pronunciation: "哦尔" },
{ word: "pass", translation: "占位符", usage: "用于空代码块中，作为占位符，不做任何操作。", pronunciation: "帕斯" },
{ word: "raise", translation: "抛出异常", usage: "用于显式抛出异常，通常与 `try` 和 `except` 一起使用。", pronunciation: "瑞斯" },
{ word: "return", translation: "返回值", usage: "用于从函数中返回结果。", pronunciation: "瑞特恩" },
{ word: "try", translation: "捕获异常", usage: "用于捕获可能发生的异常，并处理。", pronunciation: "崔" },
{ word: "while", translation: "当...时", usage: "用于循环结构，直到条件为假时停止循环。", pronunciation: "瓦尔" },
{ word: "with", translation: "上下文管理器", usage: "用于资源管理（如文件处理），确保资源使用后被正确释放。", pronunciation: "威斯" },
{ word: "yield", translation: "生成器", usage: "用于生成器函数，逐步生成数据，而不是一次性返回所有数据。", pronunciation: "耶尔德" },
{ word: "True", translation: "布尔值真", usage: "表示布尔值中的“真”，在条件判断中使用。", pronunciation: "图如" },
{ word: "False", translation: "布尔值假", usage: "表示布尔值中的“假”，在条件判断中使用。", pronunciation: "法尔斯" },
{ word: "None", translation: "空值", usage: "表示没有值，用于初始化变量或函数返回值为空。", pronunciation: "嫩" }
];
let score = 0;
let wrongAnswers = []; // 错题本
let questionCount = 0;
const maxQuestions = 10; // 总题数
// 检查是否是特殊词 (True, False, None)，且首字母大写
function checkCase(word, input) {
if (["true", "false", "none"].includes(input.toLowerCase()) && input !== input[0].toUpperCase() + input.slice(1)) {
return false; // 如果是 True, False, None，且首字母不大写，返回 false
}
return word.toLowerCase() === input.toLowerCase();
}
// 显示随机单词
function nextQuestion() {
if (questionCount >= maxQuestions) {
displaySummary();
return;
}
let selectedWord = wordsData[Math.floor(Math.random() * wordsData.length)];
let word = selectedWord.word;
let translation = selectedWord.translation;
let usage = selectedWord.usage;
let pronunciation = selectedWord.pronunciation;
// 更新填空和翻译
document.getElementById("word-placeholder").textContent = `单词填空: ${"_".repeat(word.length)}`;
document.getElementById("translation").textContent = `中文翻译: ${translation}`;
document.getElementById("usage").textContent = `用途翻译: ${usage}`;
document.getElementById("pronunciation").textContent = `发音提示: ${pronunciation}（但不作为记忆考核标准）`;
// 获取用户输入并检查答案
document.getElementById("answer-input").value = "";
document.getElementById("answer-input").addEventListener("keydown", function(event) {
if (event.key === "Enter") { // 只有按回车才检查答案
let userInput = this.value.trim();
if (checkCase(word, userInput)) {
score += 10; // 每答对一个加 10 分
questionCount++;
document.getElementById("feedback").innerHTML = `<span style="color: green;">恭喜你答对了！当前得分: ${score}</span>`;
nextQuestion(); // 自动进入下一题
} else {
if (!wrongAnswers.includes(word)) {
wrongAnswers.push(word); // 错题加入错题本
}
document.getElementById("feedback").innerHTML = `<span style="color: red;">错了！正确答案是：${word}</span>`;
document.getElementById("feedback").innerHTML += `<br>中文翻译: ${translation}<br>用途翻译: ${usage}<br>发音提示: ${pronunciation}`;
}
}
});
}
// 初始化加载
nextQuestion();
// 游戏退出时显示总结
function displaySummary() {
let summary = `
<h3>学习总结</h3>
<p>本次学习的错题汇总：</p>
<ul>
`;
// 仅展示错误的单词
wrongAnswers.forEach((word) => {
let selectedWord = wordsData.find(w => w.word === word);
summary += `
<li><strong>${selectedWord.word}</strong> - 中文翻译: ${selectedWord.translation} | 用途翻译: ${selectedWord.usage}</li>
`;
});
summary += `</ul><br>`;
summary += `
<h3>所有保留字和翻译</h3>
<ul>
`;
wordsData.forEach((word) => {
summary += `
<li><strong>${word.word}</strong> - 中文翻译: ${word.translation} | 用途翻译: ${word.usage}</li>
`;
});
summary += `</ul>`;
document.body.innerHTML = summary; // 显示总览和错题统计
}
// 退出游戏
function exitGame() {
displaySummary();
}
</script>
</body>
</html>
index.html
style.css
index.js
index.html