在JavaScript(jQuery)中单击图像映射区域时如何删除关联图像？

Question

我创建了一个简单的 'whack-a-mole' 游戏，其中相同的图像随机出现在游戏空间中的随机位置和时间，如果您单击该图像它就会消失，没问题。为了让游戏更难，我添加了一个图像映射，这样你就必须点击图像的特定部分，现在我不知道如何在点击后删除相关图像。我在这个网站上阅读了很多相关问题，我找到的最接近的问题是 the answer by FiLeVeR10 that used hover，但它太慢了，只对大约 20% 的快速玩游戏的点击有效。

最接近的其他方法是在图像映射区域添加 .on click。这个方法是运行我的 IncrementScore() 函数很好，但是我可以在下一行使用什么来删除关联的图像？我尝试了至少一百种不同的方法，其中 none 行得通。向该区域添加一个 onclick 属性的行为相同并且会增加分数，但我在删除底层图像时仍然遇到同样的问题。

我什至可以看到图像的唯一位置是在 offsetParent 中，但游戏空间中的所有图像也都在那里，而不仅仅是我想删除的图像，所以我无法弄清楚如何 select 正确的。相关代码如下。

$(document).ready(function() {
  $('#molemap').on('click', function(e) {
    incrementScore(); //This works perfectly
    $(this).I.have.tried.hundreds.of.things.here; //And I can't figure it out
  });
});

function addMole() {
  $('#gamespace').append('<img src="img/simole.png" class="mole" usemap="#molemap" id="mole-image" style="left: ' + imgXPos + 'px; top: ' + imgYPos + 'px;" />');
}

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<div id="content">
  <map name="molemap">
          <area id="molemap" coords="25,163,56,139,48,125,44,108,45,92,8,82,4,100,5,118,9,133,15,146" shape="poly"/>
      </map>
  <div id="gamespace">

  </div>
</div>

Answer 1

您需要为每张图片创建不同的地图，否则您将无法判断点击了哪张图片。

此标记为该区域分配了一个 data-mole 属性，因此您可以在单击时将其与匹配的图像相关联：

<!-- map for mole 1 -->
<map name="mm1">
  <area shape="rect" data-mole="1" coords="20, 20, 60, 60" href="#" />
</map>
<!-- image for mole 1 -->
<img id="mole1" src="your/mole/img.png" usemap="#mm1"
  style="left: 10px; top: 20px;" />

一个包含 3 张图像的工作示例。

const gameSpace = document.getElementById('gamespace');

// listen for clicks within the gamespace
gamespace.addEventListener('click', evt => {
  const area = evt.target;
  const map = area.parentElement;

  // determine if click was within a mole's area
  const iMole = area.dataset.mole;
  if (iMole) {
    let moleImg = document.getElementById(`mole${iMole}`);
    // remove image, area, map
    moleImg.remove();
    area.remove();
    map.remove();
  } else {
    alert('you missed!');
  }
});

#gamespace {
  background-color: green;
  width: 400px;
  height: 180px;
}

img {
  height: 80px;
  width: 80px;
  position: absolute;
}

<div id="gamespace">
  <map name="mm1">
     <area shape="rect" data-mole="1"
       coords="20, 20, 60, 60" href="#" />
    </map>
  <img id="mole1" src="https://picsum.photos/80/80" usemap="#mm1" style="left: 10px; top: 20px;" />

  <map name="mm2">
     <area shape="rect" data-mole="2"
       coords="20, 20, 60, 60" href="#" />
    </map>
  <img id="mole2" src="https://picsum.photos/80/80" usemap="#mm2" style="left: 100px; top: 40px;" />

  <map name="mm3">
     <area shape="rect" data-mole="3"
       coords="20, 20, 60, 60" href="#" />
    </map>
  <img id="mole3" src="https://picsum.photos/80/80" usemap="#mm3" style="left: 200px; top: 18px;" />
</div>

在JavaScript(jQuery)中单击图像映射区域时如何删除关联图像？

How can I remove the associated image when an image map area is clicked in JavaScript (jQuery)?

html

javascript

jquery

image

imagemap