前端开发实战：用HTML5+CSS3+JS打造响应式打地鼠游戏

1. 项目概述：从零打造一个趣味打地鼠游戏

十年前我刚入行前端时，第一个完整项目就是打地鼠游戏。这个经典小游戏看似简单，却涵盖了前端开发的三大核心技能：HTML结构搭建、CSS视觉呈现和JavaScript交互逻辑。本文将带你完整实现一个支持移动端适配、带有计分系统和难度调节的现代版打地鼠游戏。

游戏核心机制很简单：随机出现的地鼠需要在限定时间内点击，击中得分。但实现过程中会涉及：

• 使用CSS Grid构建响应式游戏面板
• requestAnimationFrame实现流畅动画
• 面向对象的游戏状态管理
• 移动端touch事件兼容处理
• 性能优化技巧等实战要点

2. 核心架构设计

2.1 游戏界面结构

采用经典的"三明治"结构：

html复制<div class="game-container">
  <header class="game-header">
    <!-- 分数和计时器 -->
  </header>
  <main class="game-board">
    <!-- 6x6的洞穴网格 --> 
    <div class="hole"></div>
    <!-- ...共36个洞穴 -->
  </main>
  <footer class="game-controls">
    <!-- 开始/难度按钮 -->
  </footer>
</div>

关键技巧：使用CSS变量控制洞穴尺寸，便于响应式适配：

css复制:root {
  --hole-size: min(15vw, 80px); 
}
.hole {
  width: var(--hole-size);
  height: var(--hole-size);
}

2.2 游戏状态机设计

用面向对象方式管理游戏状态：

javascript复制class GameState {
  constructor() {
    this.score = 0;
    this.timeLeft = 60;
    this.isPlaying = false;
    this.difficulty = 'normal'; // easy/normal/