JS如何实现仅点击启动按钮才触发网格游戏的启动函数

问题修复方案 #

你现在的核心问题是网格单元格的点击事件没有做运行状态拦截，不管游戏有没有启动都会响应点击逻辑，按以下步骤修改即可：

1. 补全基础代码问题 #

你当前贴出的JS代码中createBoard函数缺少闭合花括号，先在for循环结束后补全}，避免运行报错。

2. 给网格点击事件增加状态拦截 #

修改每个网格单元格的点击回调逻辑，游戏处于暂停/结束状态时不响应点击：

// 找到createBoard函数内的square点击绑定代码，替换为以下内容
square.addEventListener('click', function(e) {
  // 仅游戏运行状态下响应点击
  if (paused || isGameOver) return
  click(square)
})

3. 页面加载完成自动渲染游戏面板 #

在DOMContentLoaded回调的末尾（pauseBtn点击事件绑定之后）添加createBoard()调用，页面加载完成就自动渲染网格，无需等待用户操作触发：

pauseBtn.addEventListener('click', () => {
  pauseGame()
})

// 新增这一行，初始化渲染面板
createBoard()

4. （可选优化）启动按钮逻辑修复 #

你当前的启动按钮点击逻辑存在多余的分数自增逻辑，可根据需求调整为仅首次点击/重新开始时启动游戏：

startBtn.addEventListener('click', () => {
  // 游戏运行中点击启动按钮无反应
  if (paused === false) return
  // 游戏结束后点击启动，重置所有状态重新开一把
  if (isGameOver) {
    isGameOver = false
    score = 100
    time = startingMinutes * 60
    grid.innerHTML = ''
    squares.length = 0
    createBoard()
  }
  scoreDisplay.innerHTML = 'Score' + ': ' + score
  paused = false
  timerId = setInterval(countDown, 1000)
})

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