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