Удалить связанное изображение при щелчке области карты изображения в javascript (jQuery) - PullRequest
Новая
       52

Удалить связанное изображение при щелчке области карты изображения в javascript (jQuery)

1 голос
/ 18 апреля 2020

Я создал простую игру «бей-моль», в которой одно и то же изображение появляется в игровом пространстве в случайных положениях и в случайное время, и если вы щелкаете изображение, оно исчезает, нет проблем. Чтобы сделать игру более сложной, я добавил карту изображений, чтобы вам приходилось щелкать определенную часть изображения, и теперь я не могу понять, как удалить соответствующее изображение после щелчка. Я прочитал много связанных с этим вопросов на этом сайте, и самым близким, что я нашел, был ответ FiLeVeR10, который использовал hover , но он был слишком медленным и работал только для примерно 20% кликов, играющих в игру на скорости. .

Самый близкий другой способ, который работал, - это добавление .on click в область карты изображения. Этот метод прекрасно выполняет мою функцию IncrementScore (), но что я могу использовать в следующей строке, чтобы удалить связанное изображение? Я пробовал по крайней мере сотню разных вещей, и ни одна из них не работает. Добавление атрибута onclick к области ведет себя так же и приведет к увеличению оценки, но у меня все еще была та же проблема при удалении базового изображения.

Единственное место, где я могу даже видеть изображение, находится в offsetParent, но все там были и изображения в игровом пространстве, а не только то, которое я хочу удалить, поэтому я не мог понять, как выбрать правильное. Прочитав некоторые ответы на связанные вопросы, я начинаю думать, что это не может быть сделано достаточно быстро для игры, и несколько часов, которые я провел безрезультатно, пробуя разные вещи, только усиливают мои подозрения, но я создал здесь учетную запись и я публикую свой первый вопрос, чтобы выяснить окончательно, можно ли это сделать или нет. Соответствующий код ниже. Спасибо. 

$(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>

1 Ответ

1 голос
/ 18 апреля 2020

Вам нужно будет создать отдельную карту для каждого изображения, иначе вы не сможете определить, какое изображение было нажато.

Эта разметка назначает атрибут 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>
...