在改變/刪除另一個div時將圖像添加到不同的div

Question

我有一款遊戲涉及一隻狗追逐貓;在狗接觸貓div時，班級發生變化，以便出現「死」貓，然後將其移除。我還想在右上角的div中顯示一個較小版本的死貓圖像，作爲一種得分守護者。 因此，基本上每當一隻貓死亡時，一個小圖像就會彈出div的分數。 問題是如果我的prepend放置在現在的小圖像上，它會無限期地添加圖像，而不是每隻死貓只添加一張圖像。我猜這是因爲它是在這個if語句中用於碰撞檢測，但我無法找出解決方法。 我試過把它作爲一個函數，把它移到getCollision函數之外，試圖附加一個觸發器......我所做的沒有任何事情似乎可以解決我認爲是一個相對簡單的問題。

如果任何人都可以幫助或指引我正確的方向，我將不勝感激！下面是代碼：

"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

我認爲這個問題是一個死貓仍然可以死 - 碰撞檢測，去除死的貓被觸發的setTimeout之前發生的另一次迭代。在預先評分圖像之前，您可以檢查當前的貓是否已經死亡。

我們只需要檢查它是否已經死了避免這種情況：

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

甚至更​​好 - 你能避免死貓碰撞檢測完全：除了

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