在改变/删除另一个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);