Question

我有一个游戏，其中涉及一只追逐猫的狗;当狗接触猫div时，课程会发生变化，以便“死亡”＃34;猫出现，然后被删除。我还希望将较小版本的死猫图像显示在右上角的div中，作为一种得分管理员。因此，基本上每次猫被杀死时，分数div中都会弹出一个小图像。问题是如果我将prepend放置在现在的小图像上，它会无限期地添加图像，而不是每只死猫只有一个。我猜它是因为它在if 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时将图像添加到不同的div

1 个答案: