点击重启按钮后无法关闭模态框问题求助

AI 小北

2026-5-21

解决重启按钮无法关闭模态框的问题

看起来你漏掉了重启流程里最关键的一步——关闭游戏结束的模态框！你的restart函数目前只处理了卡片状态、步数和星星的重置，但完全没涉及模态框的隐藏逻辑，这就是为什么点击重启后它还停在页面上。

具体修复方案

你需要在restart函数开头添加关闭模态框的代码，具体实现取决于你项目里模态框的显示控制方式：

方案1：通过CSS display属性控制

如果你的模态框是用display属性控制显示/隐藏的，添加这段代码：

// 获取模态框元素（替换成你项目里实际的选择器）
const modal = document.querySelector(".modal");
// 隐藏模态框
modal.style.display = "none";

方案2：通过CSS类控制（更推荐）

如果你的模态框是通过添加/移除类（比如active或show）来控制显示的，用这段代码：

const modal = document.querySelector(".modal");
// 移除显示类，隐藏模态框
modal.classList.remove("show"); // 替换成你项目里的实际类名

修改后的完整restart函数

//游戏结束后重置所有进度的函数
function restart() {
  // 第一步：关闭模态框
  const modal = document.querySelector(".modal"); 
  modal.style.display = "none"; // 或用类控制的写法：modal.classList.remove("show");

  // 原有的重置逻辑
  card1 = "";
  card2 = "";
  document.querySelector(".moves").innerText = "0";
  returnStars();
  
  // 重置卡片状态与顺序
  let cards = Array.prototype.slice.call(document.querySelectorAll('.card'));
  cards = shuffle(cards);
  const deck = document.querySelector(".deck");
  
  for (let i = 0; i < cards.length; i++) {
    deck.appendChild(cards[i]);
    // 额外：重置卡片的样式类，确保回到初始未翻开状态
    cards[i].classList.remove('match', 'open', 'show');
  }
}