将图像添加到另一个 div 的 change/removal 上的不同 div

Question

我有一个狗追猫的游戏；当狗碰到猫 div 时，class 会发生变化，从而出现一只 "dead" 猫，然后消失。我还希望在右上角的 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);

将图像添加到另一个 div 的 change/removal 上的不同 div

adding image to different div upon change/removal of another div

javascript

jquery

collision-detection