別のdivの変更/削除時に別のdivに画像を追加

Question

私は猫を追う犬を含むゲームを持っています。犬が猫divに触れると、クラスが変化して「死んだ」猫が現れ、その後削除されます。私はまた、死んだ猫の画像のより小さいバージョンを右上隅のdivに表示させて、スコアキーパーのようにしたいと思います。 本質的に猫が殺されるたびに、小さな画像がスコアdivにポップアップします。 問題は、小さな画像用にprependを配置した場合、それぞれの死んだ猫のために1枚だけではなく、無期限に画像を追加し続けることです。私はそれが衝突検出のためのif文の中にあるので推測していますが、私はそれを回避する方法を見つけられません。 私はそれを関数getCollisionの外に移動させようと試みましたが、トリガーを付けようとしました...私がやったことは、私が比較的単純な問題であると思うものを解決するために働くようには見えません。

誰かが正しい方向に私を助けたり指摘したりすることができれば、私は大いに感謝しています！ - 死んだ猫がトリガされる削除のsetTimeout前に発生する可能性がある衝突検出の別の反復

"use strict"; 
$(document).ready(function() { 

console.log("linked"); 

var $dog = $('.dog'); //global variables 
var body = $('body'); 
var $cat = $('.cat'); 

function newCat() { //creates a div w/ class cat, appends to body 
    var cat = $('<div class="cat"></div>'); 
    body.append(cat); 
    setInterval(function() { //moves cats randomly 
     cat.css("top", Math.random() * window.innerHeight); 
     cat.css("left", Math.random() * window.innerWidth); 
    }, 1500) 
} 

    for(var i=0; i<10; i++) { //create multiple cats 
     newCat(); 
    } 

function getCollision(cat) { //collision detection for elements 
    $(cat).each(function(index, cat) { //loops through each cat div 
     var $dogH = $dog.outerHeight(true); 
     var $dogW = $dog.outerWidth(true); 
     var $dogX = $dog.position(); 
     var $dogY = $dog.position(); 

     var $catH = parseInt($(cat).css('height').replace('px', '')) 
     var $catW = parseInt($(cat).css('width').replace('px', '')) 
     var $catX = parseInt($(cat).css('left').replace('px', '')) 
     var $catY = parseInt($(cat).css('top').replace('px', '')) 


     if ($dogX.left < $catX + $catW && 
      $dogY.top < $catY + $catH && 
      $catX < $dogX.left + $dogW && 
      $catY < $dogY.top + $dogW) { 
      $(cat).addClass('dead'); 
      $('.score').prepend('<img src="images/cat_dead_sm.png" />'); 
      setTimeout(function() { 
       $('.dead').remove(); //removes dead cat 
      }, 2500); 
      console.log('boom'); 
     }; 
    }); 
}; 


$(document).mousemove(function(event) { //moves dog div to follow cursor 
    $('.dog').css({ 
     'top': event.pageY, 
     'bottom': event.pageX, 
     'left': event.pageX, 
     'right': event.pageY 
    }); 
    $cat = $('.cat') 
    getCollision($cat); //calls getcollision to check distance 
})(); 


// function keepScore() { 
//  $('.score').prepend('<img src="images/cat_dead_sm.png" />'); 
// } 
// }; 

}); 

Answer 1

私は問題が死んだ猫はまだ死ぬことができるということだと思う：以下のコードです。スコア画像を追加する前に、現在の猫が死んでいるかどうかを確認することができます。

$cat = $('.cat:not(.dead)'); 
getCollision($cat);