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