猜地名挑战

当前得分
0
总倒计时
02:00
题目进度
0/10

点击「开始游戏」挑战100个城市！

1. 游戏玩法介绍

欢迎来到《猜地名挑战》！这是一个考验你地理知识的快节奏游戏。

  1. 开始游戏：点击"开始游戏"按钮，挑战即刻开始。
  2. 查看线索：屏幕中央会显示一条关于某个城市的线索。
  3. 快速作答：你需要在10秒内输入你猜测的城市名，并点击"提交答案"或按回车键。
  4. 计分规则：
    • 答对一题，加1分。
    • 答错一题或超时未答，扣1分。
  5. 游戏结束：游戏有两种结束方式：
    • 在2分钟的总倒计时结束时。
    • 在你完成设定的题目数量时（默认为10题）。
  6. 查看结果：游戏结束后，你将看到自己的最终得分、答题进度和总用时。

祝你好运，地理大师！

2. 开发技术点

开发这个增强版游戏需要掌握以下核心技术：

3. 开发步骤

按照以下步骤，可以有条不紊地开发出这个游戏：

  1. 需求分析与规划：明确游戏的核心功能（双倒计时、计分、随机出题）、UI设计风格和用户体验流程。
  2. 数据准备：创建一个包含大量城市名称和对应线索的JavaScript数组。
  3. HTML结构搭建：编写HTML代码，创建游戏容器、信息显示区、线索区、输入区、按钮区以及用于展示文档的区域。
  4. CSS样式设计：
    • 为页面整体和各个组件编写CSS样式。
    • 实现响应式布局，确保在不同设备上都有良好表现。
    • 添加动画和过渡效果，提升用户体验。
  5. JavaScript逻辑实现：
    • 初始化：获取所有需要操作的DOM元素，定义游戏状态变量。
    • 工具函数：编写格式化时间、生成随机数等辅助函数。
    • 核心函数：
      • startGame()：重置游戏状态，开始倒计时，显示第一题。
      • displayNextQuestion()：随机选择并显示下一题。
      • checkAnswer()：验证用户答案，更新分数，并处理后续逻辑。
      • endGame()：结束游戏，显示最终结果。
    • 倒计时管理：分别实现每题倒计时和总倒计时的启动、重置和清除逻辑。
  6. 事件绑定：为"开始游戏"和"提交答案"按钮绑定点击事件，为输入框绑定回车事件。
  7. 测试与调试：在浏览器中运行游戏，测试所有功能，修复bug，优化性能和用户体验。
  8. 文档整合：将玩法介绍、技术点、开发步骤等文档内容添加到页面中，并使用CSS实现可折叠的代码块。

4. 完整代码示例

以下是构成此页面的完整HTML、CSS和JavaScript代码。点击标题可展开/折叠查看。

HTML (完整结构)
<!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>
        /* --- 此处省略了完整的CSS样式，实际代码中包含 --- */
    </style>
</head>
<body>

    <div class="container">
        <!-- 此处省略了游戏区域的HTML，实际代码中包含 -->
    </div>

    <div class="container">
        <!-- 此处省略了文档区域的HTML，实际代码中包含 -->
    </div>

    <script>
        // --- 此处省略了完整的JavaScript代码，实际代码中包含 ---
    </script>

</body>
</html>
CSS (完整样式)
/* --- 游戏和页面共用样式 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background-color: #f0f2f5;
    color: #333;
    padding: 20px;
    line-height: 1.6;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px;
}

h1, h2, h3 {
    color: #1a73e8;
    margin-bottom: 20px;
}

/* --- 此处省略了大量CSS样式，实际代码中包含 --- */

/* --- 代码块样式 --- */
.code-section {
    background-color: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px 0;
}

.code-header {
    background-color: #e8f0fe;
    padding: 12px 15px;
    font-weight: bold;
    color: #1a73e8;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.code-header::after {
    content: "+ 显示代码";
    font-size: 0.9em;
    color: #5f6368;
}

.code-header.open::after {
    content: "- 隐藏代码";
}

.code-content {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.code-section.open .code-content {
    padding: 15px;
    max-height: 2000px;
}

pre {
    white-space: pre-wrap;
    word-break: break-all;
    color: #24292e;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.95em;
}
JavaScript (完整逻辑)
// 1. 100个城市题库（涵盖国内外主要城市）
const cities = [
    { name: "北京", clue: "中国首都，拥有故宫、长城，2008年奥运会举办地" },
    { name: "上海", clue: "中国第一大城市，东方明珠塔是其标志性建筑" },
    // ... (此处省略了98个城市的数据)
    { name: "惠灵顿", clue: "新西兰首都，风之城" }
];

// 2. 游戏状态变量
let score = 0;
let currentQuestionIndex = 0;
let isPlaying = false;
let totalTimeLeft = 120; // 总游戏时间：2分钟（120秒）
let questionTimeLeft = 10; // 每题答题时间：10秒
let totalTimer; // 总倒计时定时器
let questionTimer; // 每题倒计时定时器
let usedQuestions = []; // 已使用的题目索引（避免重复）
let totalQuestions = 10; // 每轮游戏题目数

// 3. 获取 DOM 元素
const clueElement = document.getElementById('clue');
const answerInputElement = document.getElementById('answer-input');
const startButtonElement = document.getElementById('start-btn');
const submitButtonElement = document.getElementById('submit-btn');
const feedbackElement = document.getElementById('feedback');
const scoreElement = document.getElementById('score');
const totalTimeElement = document.getElementById('total-time');
const questionProgressElement = document.getElementById('question-progress');
const gameOverElement = document.getElementById('game-over');

// 4. 工具函数
function formatTime(seconds) { /* ... */ }
function getRandomQuestion() { /* ... */ }

// 5. 游戏核心函数
function startGame() { /* ... */ }
function displayNextQuestion() { /* ... */ }
function resetQuestionTimer() { /* ... */ }
function startTotalTimer() { /* ... */ }
function handleTimeout() { /* ... */ }
function getCurrentQuestion() { /* ... */ }
function checkAnswer() { /* ... */ }
function endGame(message) { /* ... */ }

// 6. 绑定事件监听器
startButtonElement.addEventListener('click', startGame);
submitButtonElement.addEventListener('click', checkAnswer);
answerInputElement.addEventListener('keydown', function(event) { /* ... */ });

// 初始化页面显示
totalTimeElement.textContent = formatTime(totalTimeLeft);
questionProgressElement.textContent = `0/${totalQuestions}`;