Saya membuat game 'whack-a-mole' sederhana di mana gambar yang sama muncul di ruang permainan dalam posisi acak dan waktu acak dan jika Anda mengklik gambar itu menghilang, tidak masalah. Untuk membuat permainan lebih sulit, saya menambahkan peta gambar sehingga Anda harus mengklik bagian tertentu dari gambar dan sekarang saya tidak tahu cara menghapus gambar terkait setelah klik. Saya telah membaca banyak pertanyaan terkait di situs ini dan yang paling dekat yang saya temukan adalah jawaban oleh FiLeVeR10 yang menggunakan arahkan kursor tetapi terlalu lambat dan hanya berfungsi untuk sekitar 20% klik saat memainkan game dengan kecepatan tinggi.

Cara terdekat lainnya yang berhasil adalah menambahkan .on click ke area peta gambar. Metode ini menjalankan fungsi IncrementScore() saya dengan baik, tetapi apa yang dapat saya gunakan pada baris berikutnya untuk menghapus gambar terkait? Saya telah mencoba setidaknya seratus hal berbeda dan tidak ada yang berhasil. Menambahkan atribut onclick ke area berperilaku sama dan akan menambah skor, tetapi saya masih memiliki masalah yang sama menghapus gambar yang mendasarinya.

Satu-satunya tempat saya bahkan dapat melihat gambar adalah di offsetParent, tetapi semua gambar di ruang permainan juga ada di sana dan bukan hanya yang ingin saya hapus, jadi saya tidak tahu cara memilih yang benar satu. Setelah membaca beberapa jawaban untuk pertanyaan terkait, saya mulai berpikir bahwa itu tidak dapat dilakukan dengan cukup cepat untuk sebuah game, dan beberapa jam yang saya habiskan dengan sia-sia untuk mencoba berbagai hal hanya menambah kecurigaan saya, tetapi saya membuat akun di sini dan saya memposting pertanyaan pertama saya untuk mencari tahu secara pasti apakah itu bisa atau tidak bisa dilakukan. Kode yang relevan di bawah ini. Terima kasih.

$(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
Paystar5000 18 April 2020, 01:52

1 menjawab

Jawaban Terbaik

Anda harus membuat peta yang berbeda untuk setiap gambar, jika tidak, Anda tidak akan dapat mengetahui gambar mana yang diklik.

Markup ini menetapkan atribut data-mole ke area, sehingga Anda dapat mengaitkannya dengan gambar yang cocok saat diklik:

<!-- 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;" />

Contoh kerja dengan 3 gambar.

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>
1
terrymorse 18 April 2020, 15:50