如何在所有心形图标变为空心时显示重置按钮

本文详解如何通过 javascript 动态控制重置按钮的显隐逻辑，重点修复 `display = "visible"` 误用、正则匹配语法错误及条件判断失效等问题，并提供可立即运行的完整示例。

在开发小型网页游戏时，常需根据游戏状态（如生命值归零）动态显示或隐藏 UI 元素。本例中，目标是：仅当 foodHeart1 和 playHeart1 两个 元素的 src 均指向 "images/emptyheart.png" 时，才显示 #reset 按钮。但原代码存在多个关键问题，导致按钮始终不出现。

? 主要问题分析

1. display 属性值错误：
   style.display = "visible" 是无效值。CSS 中 display 控制元素的布局类型（如 block、inline、flex），而 visible 是 visibility 属性的取值。正确做法是设为 "inline"（适用于按钮）、"block" 或 "inline-block"。

2. .match() 语法错误：
   原代码 foodHeart1.src.match("images/emptyheart.png" && playHeart1.src.match(...)) 存在严重逻辑错误：

   • && 运算符不能用于字符串拼接或嵌套 match()；
   • match() 返回 null（未匹配）或匹配数组（如 ["images/emptyheart.png"]），直接与布尔值比较易出错。

3. 缺少实时监听机制：
   hideReset() 仅在页面加载时执行一次，未在心形图标更新后重新调用，因此状态变化无法触发按钮显示。

✅ 正确实现方案

以下为修复后的核心逻辑（含 HTML 结构与 JS 脚本）：

@@##@@
@@##@@
Reset Game

// index.js
const resetButton = document.getElementById("reset");
const foodHeart1 = document.getElementById("foodHeart1");
const playHeart1 = document.getElementById("playHeart1");

function reset() {
  location.reload();
}
resetButton.addEventListener("click", reset);

function hideReset(
) {
  // 安全检测：检查 src 是否包含目标路径（避免因绝对路径导致匹配失败）
  const isFoodEmpty = foodHeart1.src.includes("emptyheart.png");
  const isPlayEmpty = playHeart1.src.includes("emptyheart.png");

  // 仅当两个心形均为空心时显示按钮
  resetButton.style.display = isFoodEmpty && isPlayEmpty ? "inline" : "none";
}

// 初始隐藏
hideReset();

// 示例：模拟游戏中心形被清空的操作（实际项目中应由游戏逻辑调用）
function setHeartsToEmpty() {
  foodHeart1.src = "images/emptyheart.png";
  playHeart1.src = "images/emptyheart.png";
  hideReset(); // 关键！状态变更后必须重新校验
}

⚠️ 注意事项与最佳实践

• 优先使用 includes() 替代 match()：更简洁、无正则异常风险，且语义清晰（检查子串是否存在）；
• 避免硬编码路径：生产环境建议用 CSS 类（如 .heart--empty）或数据属性（data-state="empty"）标识状态，解耦样式与逻辑；
• 状态同步时机：每次修改心形 src 后，必须主动调用 hideReset() —— 它不是自动监听器，而是纯函数；
• 可扩展性优化：若心形数量增加，可将所有心形元素存入数组，用 every() 统一判断：

  const hearts = [foodHeart1, playHeart1];
  const allEmpty = hearts.every(heart => heart.src.includes("emptyheart.png"));
  resetButton.style.display = allEmpty ? "inline" : "none";

通过以上修正，按钮将严格遵循“双心归零即显现”的规则，逻辑健壮、易于维护，为后续添加动画、音效或关卡逻辑打下坚实基础。