原生JS开发打地鼠游戏如何在随机网格格子中展示随机地鼠图片

问题原因 #

• 你的随机图片选中逻辑写在全局作用域，页面加载时只会执行一次，游戏全程只会用第一次生成的随机图片，不会每次出现地鼠都重新随机。
• 不需要额外查询.mole元素，直接给当前选中的随机格子设置背景即可，还能减少不必要的DOM查询开销。

修复方案 #

只需要调整JS代码里的随机图片生成位置，把选图逻辑移到randomSquare函数内部，每次生成地鼠时重新随机选图即可，修改后的核心代码如下：

const squares = document.querySelectorAll('.square');
const mole = document.querySelector('.mole');
const timeLeft = document.querySelector('#time-left');
const score = document.querySelector('#score');
const bgColorArray = ['https://res.cloudinary.com/dkwiijqr0/image/upload/v1630402761/Whack-a-mole/sample-mole_in4rlk.png', 'https://res.cloudinary.com/dkwiijqr0/image/upload/v1630347923/Whack-a-mole/mole-img_antxud.png'];
// 删掉原全局位置的selectBG声明，移到randomSquare内部

let result = 0;
let hitPosition;
let currentTime = 60;
let timerId = null;

function randomSquare() {
  squares.forEach((square) => {
    square.classList.remove('mole');
  });
  
  let randomSquare = squares[Math.floor(Math.random() * 9)];
  randomSquare.classList.add('mole');

  hitPosition = randomSquare.id;

  // 每次生成地鼠时重新随机选图
  const selectBG = bgColorArray[Math.floor(Math.random() * bgColorArray.length)];
  // 直接给当前选中的格子设置背景
  randomSquare.style.backgroundImage = 'url(' + selectBG + ')';
}

squares.forEach((square) => {
  square.addEventListener('mousedown', () => {
    if (square.id == hitPosition) {
      result++;
      score.textContent = result;
      hitPosition = null;
    }
  });
});

function moveMole() {
  timerId = setInterval(randomSquare, 500);
}

moveMole();

function countDown() {
  currentTime--;
  timeLeft.textContent = currentTime;

  if (currentTime == 0) {
    clearInterval(countDownTimerId);
    clearInterval(timerId);
    alert('GAME OVER! Your final score is ' + result);
  }
}

let countDownTimerId = setInterval(countDown, 1000);

修改完成后每次地鼠出现都会随机选择一张图片展示，符合需求。

内容的提问来源于stack exchange，提问作者Jimeblue