JavaScript找物游戏开发：同步菜单物体及点击消失功能问题

核心问题分析 #

你之前直接把同一个img元素同时添加到游戏区域和菜单是行不通的——一个DOM元素只能挂载到一个父节点下，所以append到menu后，它会从main里被移走，导致游戏里看不到物体。必须为菜单创建独立的元素，同时建立游戏元素和菜单元素的关联。

解决方案代码实现 #

1. 修改生成循环，同步创建菜单元素 #

在循环中，每生成一个游戏内的物体，就创建一个对应独立元素添加到菜单，同时给两者加上相同的关联标识（比如data-figure-key），方便后续匹配：

// 提前获取DOM节点，避免循环内重复查询，提升性能
const gameArea = document.getElementById("main");
const menu = document.getElementById("menu");

for (let i = 0; i < figuresCount; i++) {
    // 生成游戏区域的物体
    const gameImg = document.createElement("img");
    const figureSrc = `figure${randomNumber(1,10)}.svg`;
    gameImg.src = figureSrc;
    gameImg.id = `figure${i}`;
    gameImg.dataset.figureKey = figureSrc; // 标记关联键
    // 设置样式
    gameImg.style.top = `${randomNumber(10, 95)}%`;
    gameImg.style.left = `${randomNumber(1, 90)}%`;
    gameImg.style.width = `${randomNumber(30, 60)}px`;
    gameImg.style.transform = `rotate(${randomNumber(0,360)}deg)`;
    gameImg.style.position = "fixed";
    gameImg.addEventListener("click", findFigure);
    gameArea.appendChild(gameImg);

    // 同步生成菜单中的物体
    const menuImg = document.createElement("img");
    menuImg.src = figureSrc;
    menuImg.dataset.figureKey = figureSrc; // 和游戏元素用相同的关联键
    // 菜单样式示例：固定大小、间距
    menuImg.style.width = "50px";
    menuImg.style.margin = "5px";
    menu.appendChild(menuImg);
}

2. 实现点击后菜单元素消失的逻辑 #

修改findFigure函数，点击游戏内物体时，根据关联键找到菜单中对应的元素并移除，同时处理游戏内物体的隐藏/移除：

function findFigure(e) {
    const clickedFigureKey = e.target.dataset.figureKey;
    // 移除游戏内的物体（可选择隐藏或直接删除）
    e.target.remove();
    // 找到菜单中对应元素并移除
    const menuFigure = menu.querySelector(`[data-figure-key="${clickedFigureKey}"]`);
    if (menuFigure) {
        menuFigure.remove();
    }
    // 可添加额外逻辑：比如计数、提示找到物体等
}

额外优化建议 #

• 封装随机物体生成逻辑为独立函数，减少重复代码
• 用容器元素包裹菜单内的物体，方便统一样式管理
• 若需支持重复物体（如多个相同src的物体），可改为计数模式：点击一次减少菜单中对应物体的显示数量，直到为0再移除元素

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