JavaScript 基础实战：猜数字游戏与模态框开发

JavaScript 基础实战：猜数字游戏与模态框开发

本文深入探讨了JavaScript在现代Web开发中的核心应用，通过Guess My Number猜数字游戏和模态框组件两个实战项目，系统讲解了DOM操作、事件处理、状态管理、CSS与JavaScript交互整合等关键技术。文章详细分析了游戏核心逻辑实现、DOM操作基础、模态框设计与实现，以及样式与交互的完美结合，为开发者提供了完整的JavaScript实战开发指南。

Guess My Number 游戏核心逻辑实现

在现代Web开发中，游戏开发是检验JavaScript基础知识的绝佳实践。Guess My Number游戏不仅涵盖了DOM操作、事件处理、条件判断等核心概念，更展示了如何构建一个完整的交互式应用。本文将深入剖析该游戏的核心逻辑实现，帮助你掌握JavaScript编程的精髓。

游戏状态管理

游戏的核心在于状态管理，Guess My Number游戏通过三个关键变量来维护游戏状态：

let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

这三个变量构成了游戏的核心状态机：

变量名	类型	描述	初始值
secretNumber	Number	随机生成的秘密数字	1-20之间的随机整数
score	Number	当前玩家得分	20
highscore	Number	历史最高分	0

核心游戏逻辑流程

游戏的核心逻辑遵循一个清晰的决策树结构，通过条件判断来处理不同的游戏场景：

输入验证与错误处理

游戏首先需要对用户输入进行验证，确保输入的有效性：

document.querySelector('.check').addEventListener('click', function () {
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);

  // 输入验证
  if (!guess) {
    displayMessage('⛔️ No number!');
    return;
  }
  // ... 其他逻辑
});

获胜条件处理

当玩家猜中数字时，游戏需要进行一系列的状态更新和UI变化：

} else if (guess === secretNumber) {
  displayMessage('🎉 Correct Number!');
  document.querySelector('.number').textContent = secretNumber;
  
  // UI变化
  document.querySelector('body').style.backgroundColor = '#60b347';
  document.querySelector('.number').style.width = '30rem';
  
  // 更新最高分
  if (score > highscore) {
    highscore = score;
    document.querySelector('.highscore').textContent = highscore;
  }
}

错误猜测处理逻辑

对于错误的猜测，游戏需要提供反馈并更新分数：

} else if (guess !== secretNumber) {
  if (score > 1) {
    displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');
    score--;
    document.querySelector('.score').textContent = score;
  } else {
    displayMessage('💥 You lost the game!');
    document.querySelector('.score').textContent = 0;
  }
}

游戏重置机制

完整的游戏需要提供重新开始的功能，Guess My Number通过以下逻辑实现：

document.querySelector('.again').addEventListener('click', function () {
  // 重置游戏状态
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  
  // 重置UI显示
  displayMessage('Start guessing...');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';
  
  // 恢复原始样式
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

代码优化与最佳实践

游戏代码展示了几个重要的JavaScript最佳实践：

1. 函数抽象：使用displayMessage函数统一处理消息显示
2. 事件委托：合理使用事件监听器处理用户交互
3. 状态管理：清晰的状态变量维护游戏逻辑
4. 条件判断优化：使用三元运算符简化代码

// 优化前的条件判断
if (guess > secretNumber) {
  displayMessage('📈 Too high!');
} else {
  displayMessage('📉 Too low!');
}

// 优化后的条件判断
displayMessage(guess > secretNumber ? '📈 Too high!' : '📉 Too low!');

游戏逻辑状态转换

通过状态图可以更清晰地理解游戏的状态转换过程：

Guess My Number游戏的核心逻辑展示了JavaScript在游戏开发中的强大能力。通过合理的状态管理、清晰的条件判断和优雅的代码组织，我们能够构建出既有趣又具教育意义的交互式应用。这种模式可以扩展到更复杂的游戏开发中，为学习更高级的JavaScript概念奠定坚实基础。

DOM 操作与事件处理基础

在现代 Web 开发中，DOM（文档对象模型）操作和事件处理是 JavaScript 最核心的功能之一。通过 DOM，我们可以动态地访问和修改网页内容、结构和样式，而事件处理则让网页能够响应用户的交互行为。本文将深入探讨这两个关键技术，并通过实际案例展示如何构建交互式 Web 应用。

DOM 选择器：精准定位页面元素

DOM 选择器是操作页面的第一步，JavaScript 提供了多种方式来选择页面元素：

querySelector 方法 - 使用 CSS 选择器语法选择单个元素：

// 选择类名为 message 的第一个元素
const messageEl = document.querySelector('.message');

// 选择 ID 为 main 的元素
const mainEl = document.querySelector('#main');

// 选择第一个 button 元素
const buttonEl = document.querySelector('button');

querySelectorAll 方法 - 选择所有匹配的元素，返回 NodeList：

// 选择所有按钮元素
const allButtons = document.querySelectorAll('button');

// 选择所有类名为 item 的元素
const items = document.querySelectorAll('.item');

传统选择方法 - 仍然可用的经典方法：

// 通过 ID 选择
const elementById = document.getElementById('myId');

// 通过类名选择（返回 HTMLCollection）
const elementsByClass = document.getElementsByClassName('myClass');

// 通过标签名选择
const elementsByTag = document.getElementsByTagName('div');

元素内容与属性的操作

掌握了选择器后，我们可以对元素的内容和属性进行各种操作：

文本内容操作：

// 获取元素文本内容
const currentText = messageEl.textContent;

// 设置元素文本内容
messageEl.textContent = '新的消息内容';

// 使用 innerHTML 操作 HTML 内容
const container = document.querySelector('.container');
container.innerHTML = '<div class="new-content">动态生成的内容</div>';

样式操作：

// 直接修改样式
document.querySelector('body').style.backgroundColor = '#60b347';
document.querySelector('.number').style.width = '30rem';

// 批量修改样式
const element = document.querySelector('.box');
Object.assign(element.style, {
  backgroundColor: 'blue',
  color: 'white',
  padding: '20px'
});

类名操作：

// 添加类
modal.classList.add('hidden');

// 移除类
modal.classList.remove('hidden');

// 切换类（存在则移除，不存在则添加）
modal.classList.toggle('active');

// 检查类是否存在
const isHidden = modal.classList.contains('hidden');

事件处理：响应用户交互

事件处理是创建交互式应用的核心，JavaScript 提供了强大的事件处理机制：

事件监听器基础：

// 为单个按钮添加点击事件
document.querySelector('.check').addEventListener('click', function() {
  const guess = Number(document.querySelector('.guess').value);
  console.log('用户猜测的数字:', guess);
});

// 为多个按钮添加相同的事件处理
const btnsOpenModal = document.querySelectorAll('.show-modal');
for (let i = 0; i < btnsOpenModal.length; i++) {
  btnsOpenModal[i].addEventListener('click', openModal);
}

事件处理函数：

// 命名函数作为事件处理器
const openModal = function() {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden');
};

const closeModal = function() {
  modal.classList.add('hidden');
  overlay.classList.add('hidden');
};

// 为关闭按钮和遮罩层添加点击事件
btnCloseModal.addEventListener('click', closeModal);
overlay.addEventListener('click', closeModal);

键盘事件处理：

document.addEventListener('keydown', function(e) {
  console.log('按下的键:', e.key);
  
  // 按 ESC 键关闭模态框
  if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
    closeModal();
  }
  
  // 按回车键提交表单
  if (e.key === 'Enter') {
    submitForm();
  }
});

表单处理与输入验证

表单是 Web 应用中常见的交互元素，正确处理表单输入至关重要：

获取表单值：

document.querySelector('.check').addEventListener('click', function() {
  // 获取输入框的值并转换为数字
  const guess = Number(document.querySelector('.guess').value);
  console.log(guess, typeof guess);
  
  // 输入验证
  if (!guess) {
    displayMessage('⛔️ 请输入数字!');
  } else if (guess < 1 || guess > 20) {
    displayMessage('⛔️ 请输入 1-20 之间的数字!');
  }
});

动态更新界面：

// 游戏状态更新函数
const updateGameState = function(message, backgroundColor, numberWidth) {
  displayMessage(message);
  document.querySelector('body').style.backgroundColor = backgroundColor;
  document.querySelector('.number').style.width = numberWidth;
};

// 游戏逻辑中的应用
if (guess === secretNumber) {
  updateGameState('🎉 猜对了!', '#60b347', '30rem');
  document.querySelector('.number').textContent = secretNumber;
}

事件传播与事件委托

理解事件传播机制对于处理复杂交互场景非常重要：

事件传播阶段：

事件委托模式：

// 使用事件委托处理动态生成的元素
document.querySelector('.container').addEventListener('click', function(e) {
  if (e.target.classList.contains('delete-btn')) {
    e.target.parentElement.remove();
  }
  
  if (e.target.classList.contains('edit-btn')) {
    startEditing(e.target.dataset.id);
  }
});

性能优化与最佳实践

在实际项目中，遵循最佳实践可以显著提升应用性能：

避免重复查询：

// 不佳的做法：多次查询相同元素
function updateScore() {
  document.querySelector('.score').textContent = score;
  document.querySelector('.highscore').textContent = highscore;
}

// 推荐的做法：缓存元素引用
const scoreEl = document.querySelector('.score');
const highscoreEl = document.querySelector('.highscore');

function updateScore() {
  scoreEl.textContent = score;
  highscoreEl.textContent = highscore;
}

批量 DOM 操作：

// 使用 DocumentFragment 进行批量操作
const fragment = document.createDocumentFragment();

for (let i = 0; i < 100; i++) {
  const li = document.createElement('li');
  li.textContent = `项目 ${i}`;
  fragment.appendChild(li);
}

document.querySelector('.list').appendChild(fragment);

综合实战：猜数字游戏中的 DOM 操作

让我们通过猜数字游戏的实际代码来理解这些概念的应用：

// 游戏状态变量
let secretNumber = Math.trunc(Math.random() * 20) + 1;
let score = 20;
let highscore = 0;

// 显示消息的辅助函数
const displayMessage = function(message) {
  document.querySelector('.message').textContent = message;
};

// 检查按钮点击事件
document.querySelector('.check').addEventListener('click', function() {
  const guess = Number(document.querySelector('.guess').value);
  
  // 无输入的情况
  if (!guess) {
    displayMessage('⛔️ 没有输入数字!');
    return;
  }
  
  // 猜中的情况
  if (guess === secretNumber) {
    displayMessage('🎉 猜对了!');
    document.querySelector('.number').textContent = secretNumber;
    document.querySelector('body').style.backgroundColor = '#60b347';
    document.querySelector('.number').style.width = '30rem';
    
    // 更新最高分
    if (score > highscore) {
      highscore = score;
      document.querySelector('.highscore').textContent = highscore;
    }
  } 
  // 猜错的情况
  else {
    if (score > 1) {
      displayMessage(guess > secretNumber ? '📈 太高了!' : '📉 太低了!');
      score--;
      document.querySelector('.score').textContent = score;
    } else {
      displayMessage('💥 游戏失败!');
      document.querySelector('.score').textContent = 0;
    }
  }
});

// 重新开始游戏
document.querySelector('.again').addEventListener('click', function() {
  score = 20;
  secretNumber = Math.trunc(Math.random() * 20) + 1;
  
  displayMessage('开始猜测...');
  document.querySelector('.score').textContent = score;
  document.querySelector('.number').textContent = '?';
  document.querySelector('.guess').value = '';
  
  // 恢复原始样式
  document.querySelector('body').style.backgroundColor = '#222';
  document.querySelector('.number').style.width = '15rem';
});

常见问题与解决方案

在实际开发中，可能会遇到一些常见问题：

事件处理器的内存泄漏：

// 添加事件监听器
const button = document.querySelector('.my-button');
const handler = function() { console.log('点击'); };
button.addEventListener('click', handler);

// 需要移除时
button.removeEventListener('click', handler);

动态内容的处理：

// 处理动态生成的元素
function setupDynamicElements() {
  const dynamicElements = document.querySelectorAll('.dynamic-element');
  dynamicElements.forEach(element => {
    element.addEventListener('click', handleDynamicClick);
  });
}

// 或者在父元素上使用事件委托
document.body.addEventListener('click', function(e) {
  if (e.target.matches('.dynamic-element')) {
    handleDynamicClick(e);
  }
});

通过掌握这些 DOM 操作和事件处理的基础知识，你将能够构建出丰富交互的 Web 应用程序。记住，良好的代码组织和性能优化习惯同样重要，它们会让你的应用更加健壮和高效。

模态框组件的设计与实现

在现代Web开发中，模态框（Modal）是一种常见的用户界面组件，用于在不离开当前页面的情况下展示重要信息、收集用户输入或确认操作。本文将深入探讨模态框组件的设计原理和实现细节，通过一个完整的示例展示如何构建功能完善、用户体验良好的模态框组件。

模态框的基本结构

一个典型的模态框由三个主要部分组成：模态内容容器、遮罩层和关闭控制。让我们先来看一下HTML结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal Window Example</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <!-- 触发按钮 -->
    <button class="show-modal">显示模态框 1</button>
    <button class="show-modal">显示模态框 2</button>
    <button class="show-modal">显示模态框 3</button>

    <!-- 模态框容器 -->
    <div class="modal hidden">
        <button class="close-modal">&times;</button>
        <h1>这是一个模态窗口 😍</h1>
        <p>这里是模态框的内容区域，可以放置任何需要展示的信息...</p>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay hidden"></div>

    <script src="script.js"></script>
</body>
</html>

CSS样式设计

模态框的视觉设计至关重要，它需要具有良好的视觉层次和用户体验。以下是核心的CSS样式实现：

/* 基础重置和全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
}

body {
    font-family: sans-serif;
    color: #333;
    line-height: 1.5;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: linear-gradient(to top left, #