如何为小行星收集游戏添加正确的分数计数器并修复问题

核心问题梳理 #

1. 计数器逻辑混乱：同时维护asteroidsCollected和score两个变量，且updateBoard循环中错误累加score导致分数跳变；每次点击小行星后重绘整个棋盘，重置所有方块透明度，状态丢失。
2. 点击后状态未保留：点击方块后仅临时设置透明度，但重绘棋盘时所有方块被重新创建并设为透明，之前点击过的方块会再次隐藏。

修复后的完整代码 #

JavaScript

// 迷宫尺寸
const rows = 10;
const columns = 10;

// 小行星总数
const totalAsteroids = 17;

// 生成迷宫数组
const maze = Array.from({ length: rows }, () => Array(columns).fill(0));

// 随机放置小行星
let asteroidsPlaced = 0;
while (asteroidsPlaced < totalAsteroids) {
  const randomRow = Math.floor(Math.random() * rows);
  const randomColumn = Math.floor(Math.random() * columns);

  if (maze[randomRow][randomColumn] === 0) {
    maze[randomRow][randomColumn] = 1;
    asteroidsPlaced++;
  }
}

// 游戏状态初始化
let asteroidsCollected = 0;

// 获取DOM元素
const boardElement = document.getElementById('board');
const messageElement = document.getElementById('message');
const scoreBoard = document.getElementById('counter');

messageElement.innerHTML = "Welcome! Start collecting asteroids!";
scoreBoard.innerHTML = "Score: 0";

// 初始化棋盘
function initBoard() {
  boardElement.innerHTML = '';

  for (let row = 0; row < rows; row++) {
    for (let column = 0; column < columns; column++) {
      const square = document.createElement('div');
      square.className = 'maze-square';
      // 初始隐藏
      square.style.opacity = 0;

      // 绑定行列坐标
      square.dataset.row = row;
      square.dataset.column = column;

      square.addEventListener('click', () => {
        square.style.opacity = 1;
        squareClicked(square);
      });
      
      boardElement.appendChild(square);
    }
  }
}

// 点击方块处理函数
function squareClicked(square) {
  const row = parseInt(square.dataset.row);
  const column = parseInt(square.dataset.column);
  const squareValue = maze[row][column];

  if (squareValue === 1) {
    // 修改迷宫状态
    maze[row][column] = 0;
    // 更新分数
    asteroidsCollected++;
    scoreBoard.innerHTML = "Score: " + asteroidsCollected;
    // 设置当前方块为星空图
    square.style.backgroundImage = "url('https://i.sstatic.net/Tu6uq.png')";

    // 检查是否收集完所有小行星
    if (asteroidsCollected === totalAsteroids) {
      messageElement.textContent = "Congratulations! You found all the asteroids!";
    }
  } else {
    // 点击星空方块，直接显示星空图
    square.style.backgroundImage = "url('https://i.sstatic.net/Tu6uq.png')";
  }
}

// 初始化棋盘
initBoard();

CSS

.maze-square {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-size: contain;
  cursor: pointer;
}
#board{
  width: 500px;
  height: 540px;
  position: relative;
  margin: auto;
  border: 1px solid black;
  box-shadow: 0px 0px 10px black;
  background-image: url(space.svg);
  background-size: cover;
  background-color: aquamarine;
}
#message{
  width: 600px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: aliceblue;
  text-shadow: 0px 0px 10px black;
  position:relative;
  background: rgba(0, 0, 0, 0.5);
  display: block;
  margin-left: 300px;
}
#counter{
  position:fixed;
  top: 20px;
  left: 20px;
}

HTML

<p id="message"></p>
<div id="board"></div>
<h1 id="counter"></h1>

关键修改说明 #

1. 移除冗余计数变量：删除score变量，统一使用asteroidsCollected记录收集数量，避免重复累加。
2. 取消重绘棋盘逻辑：点击方块后不再重新生成整个棋盘，直接修改当前点击方块的背景图和状态，保留已点击方块的显示状态。
3. 存储方块坐标：通过dataset给每个方块绑定行列坐标，点击时直接获取，无需闭包捕获。
4. 初始仅创建空方块：初始化时不设置背景图，点击后再根据当前迷宫状态设置对应图片，避免初始加载时泄露小行星位置。

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