MDN学习区JavaScript入门：数字猜谜游戏实现解析

MDN学习区JavaScript入门：数字猜谜游戏实现解析

learning-area GitHub repo for the MDN Learning Area. 项目地址: https://gitcode.com/gh_mirrors/le/learning-area

游戏概述

这个数字猜谜游戏是一个经典的JavaScript入门练习项目，它展示了如何使用基础JavaScript与HTML DOM交互。游戏规则简单：系统随机生成1-100之间的数字，玩家有10次机会猜测这个数字，每次猜测后系统会提示"太高"或"太低"。

HTML结构分析

游戏的HTML结构简洁明了：

1. 包含一个标题<h1>展示游戏名称
2. 游戏说明段落<p>解释规则
3. 输入表单区域.form包含：
   • 数字输入框<input type="number">，限制输入1-100之间的数字
   • 提交按钮<input type="submit">
4. 结果显示区域.resultParas包含三个段落：
   • 显示历史猜测记录.guesses
   • 显示最近结果.lastResult
   • 显示高低提示.lowOrHi

CSS样式设计

样式设计采用了响应式布局：

• 使用sans-serif无衬线字体提高可读性
• 主体内容宽度设置为50%，同时设置最大宽度800px和最小宽度480px确保在各种设备上都有良好显示
• 数字输入框固定宽度200px
• 最后结果区域使用白色文字和3px内边距

JavaScript核心逻辑解析

1. 变量初始化

let randomNumber = Math.floor(Math.random() * 100) + 1;  // 生成1-100随机数
const guesses = document.querySelector('.guesses');  // 历史猜测显示元素
const lastResult = document.querySelector('.lastResult');  // 最后结果元素
const lowOrHi = document.querySelector('.lowOrHi');  // 高低提示元素
const guessSubmit = document.querySelector('.guessSubmit');  // 提交按钮
const guessField = document.querySelector('.guessField');  // 输入框
let guessCount = 1;  // 猜测次数计数器
let resetButton;  // 重置按钮引用

2. 核心检查函数checkGuess()

这个函数处理每次猜测的逻辑：

1. 获取用户输入并转换为数字
2. 首次猜测时初始化历史记录显示
3. 将当前猜测添加到历史记录
4. 检查猜测结果：
   • 猜中：显示祝贺信息，设置绿色背景，结束游戏
   • 10次未猜中：显示游戏结束，结束游戏
   • 其他情况：显示错误信息，设置红色背景，给出高低提示
5. 增加猜测计数，清空输入框并聚焦

3. 游戏结束处理setGameOver()

当游戏结束时：

1. 禁用输入框和提交按钮
2. 创建并添加"重新开始"按钮
3. 为按钮添加点击事件监听器

4. 重置游戏resetGame()

重新开始游戏时：

1. 重置猜测计数器
2. 清空所有结果显示段落
3. 移除重置按钮
4. 重新启用输入控件
5. 清空输入框并聚焦
6. 重置结果背景色
7. 生成新的随机数

技术要点总结

1. 随机数生成：使用Math.random()配合Math.floor()生成指定范围的随机整数
2. DOM操作：通过querySelector获取元素，修改textContent和样式属性
3. 事件处理：使用addEventListener为按钮添加点击事件
4. 表单验证：HTML5的required、min和max属性实现基础输入验证
5. 动态元素创建：使用document.createElement和appendChild动态添加重置按钮
6. 游戏状态管理：通过禁用/启用控件和计数器实现游戏流程控制

学习价值

这个项目虽然简单，但涵盖了JavaScript编程的多个基础概念：

• 变量声明与作用域
• 条件判断与循环
• 函数定义与调用
• DOM查询与操作
• 事件处理
• 基本算法(二分查找思想)

对于初学者来说，理解这个项目的每一行代码是掌握JavaScript基础的重要一步。建议读者可以尝试扩展这个游戏，比如添加难度选择、计时功能或高分记录等特性来巩固所学知识。

learning-area GitHub repo for the MDN Learning Area. 项目地址: https://gitcode.com/gh_mirrors/le/learning-area