即时可玩web小游戏（三）：打地鼠、时刻保持敏捷的反应- 看看可得多少分吧 - 集成InsCode快来阅读并即时体验吧~顺便教教如何创建InsCode项目

本文链接：https://blog.csdn.net/m0_38015699/article/details/143932438

啦啦啦啦~第三个小游戏终于来了，今早没啥灵感，看到了这个坑，于是填一下。已完成游戏快捷链接：

背景说明

为了让大家都能体验到游戏，边玩边写，于是使用了csdn提供的InsCode功能，以便在线运行项目，同时也是为了展示项目代码的可用性！

技术选型

使用 html+css+js来实现，没有采用任何框架，因为打地鼠的核心体验是测试反应速度，逻辑并不是很复杂 - 当然想要做的很复杂也是可以的，但目前没有必要吧，毕竟摸鱼太久也会累的，框架纯纯的前端技术，对于新人来说也会更友好

游戏设计

为了精简游戏，更早完成，采用了如下的规格标准进行设计

地洞数量 2x3，也就是两行三列
积分规则为打中一个积分1
游戏手动开始、可暂停

功能说明

随机地鼠：getRandomHole 函数用于随机生成地鼠洞。
点击计分：点击地鼠时增加分数并更新显示。
游戏循环：setInterval 定时器控制地鼠的显示和消失。
开始游戏：点击按钮开始游戏，重置分数并启动地鼠循环。
暂停游戏：点击暂停游戏。

项目模板选择和创建

从web版首页最顶端的inscode进入功能主页，点击开始一个新项目，选择最火的那个模板。html+js+css模板，
在这里插入图片描述
然后就进入了网页版的ide节点，可以简单查看目录结构，不用更改的，一般把三个类型的文件分开就可以了

核心界面布局

头-内容-脚注结构

头部显示游戏名+积分情况
内容区域显示打地鼠游戏交互区域
脚注放置操作按钮

布局代码

<h1>打地鼠游戏</h1>
  <p>得分: <span id="score">0</span></p>
  <div class="game-container">
    <div class="grid">
      <div class="hole" id="hole-1"></div>
      <div class="hole" id="hole-2"></div>
      <div class="hole" id="hole-3"></div>
      <div class="hole" id="hole-4"></div>
      <div class="hole" id="hole-5"></div>
      <div class="hole" id="hole-6"></div>
    </div>
  </div>
  <button id="start-game">开始游戏</button>
  <button id="pause-game">暂停游戏</button>

说明：

地洞使用grid布局，方便快速的二维布局（一维的就可以用flex，二维首选grid/table）
每个地洞相似所以使用了相同的class，但交互结果不一样，所以需要区别，用不同id实现

游戏核心逻辑解析和实现

1. 核心功能概述

打地鼠游戏的核心逻辑包括以下功能：

随机地鼠生成：地鼠需要从多个洞中随机出现。
点击交互：玩家点击地鼠后得分，并更新分数显示。
时间管理：地鼠在固定时间内出现并消失，形成动态效果。
游戏控制：通过按钮控制游戏的启动和暂停。

JavaScript 是实现游戏逻辑的核心工具，以下是代码的具体功能解析和实现方式。

2. 核心功能实现

（1）随机地鼠生成

地鼠从随机洞中出现，逻辑通过以下代码实现：

function getRandomHole() {
  const holes = document.querySelectorAll('.hole'); // 获取所有洞元素
  const randomIndex = Math.floor(Math.random() * holes.length); // 随机选择洞的索引
  return holes[randomIndex]; // 返回随机的洞
}

解析：

querySelectorAll 获取所有洞的 DOM 节点。
Math.random() 生成 0 到 1 的随机数，通过乘以洞的数量并取整，获取随机洞的索引。
随机性保证了地鼠每次出现位置都不同，增加游戏的趣味性。

（2）地鼠显示与点击

随机地鼠显示在洞口，玩家点击地鼠后得分。

function showMole() {
  if (currentMole) {
    currentMole.classList.remove('show'); // 移除上一个地鼠
  }

  const randomHole = getRandomHole(); // 随机选择一个洞
  const mole = document.createElement('div'); // 创建地鼠元素
  mole.classList.add('mole', 'show'); // 添加样式使地鼠显示
  randomHole.appendChild(mole); // 将地鼠添加到随机洞中
  currentMole = mole; // 保存当前地鼠

  mole.addEventListener('click', () => {
    score++; // 点击得分
    document.getElementById('score').textContent = score; // 更新分数显示
    mole.classList.remove('show'); // 点击后地鼠消失
  });

  setTimeout(() => {
    mole.classList.remove('show'); // 定时让地鼠消失
    if (!isPaused) {
      showMole(); // 循环显示下一个地鼠
    }
  }, 1000); // 地鼠显示的持续时间为 1 秒
}

解析：

地鼠显示：
- createElement 创建地鼠元素，classList.add 添加样式控制显示效果。
- 将地鼠插入到随机洞中。
点击事件：
- 使用 addEventListener 绑定点击事件，点击后分数加 1。
- 地鼠点击后立即移除显示，防止重复得分。
地鼠生命周期：
- setTimeout 在 1 秒后移除地鼠显示。
- 如果游戏未暂停，则递归调用 showMole，形成循环。

（3）游戏控制：开始与暂停

通过两个按钮实现游戏的开始和暂停。

开始游戏

document.getElementById('start-game').addEventListener('click', () => {
  if (!gameInterval) {
    score = 0; // 重置分数
    document.getElementById('score').textContent = score; // 更新显示
    isPaused = false; // 解除暂停
    showMole(); // 开始显示地鼠
    gameInterval = setInterval(() => {
      if (isPaused) {
        clearInterval(gameInterval); // 暂停时清除循环
        gameInterval = null;
      }
    }, 1000);
  }
});

解析：

状态重置：游戏开始时，分数重置为 0，地鼠显示开始。
逻辑控制：通过 gameInterval 确保游戏循环只启动一次，避免重复显示地鼠。
暂停检查：在间隔检查中清理定时器，响应暂停状态。

暂停游戏

document.getElementById('pause-game').addEventListener('click', () => {
  isPaused = true; // 标记暂停
  if (currentMole) {
    currentMole.classList.remove('show'); // 移除当前地鼠
  }
  clearInterval(gameInterval); // 停止定时器
  gameInterval = null; // 清空循环状态
});