Question

我想在这里做一个简单的游戏就是我到目前为止http://codepen.io/akshay-7/pen/Ggjxwb 我在使用.blt类的div与.enmy类冲突时遇到问题。 div blt是使用jquery创建的。我可以让飞机与敌人发生碰撞（尝试通过按箭头键与敌人碰撞飞机）但是无法用飞机碰撞＆＃39; blt＆＃39;

 function collision() { 
  var $div1=$('#plane'); //the .blt class is appended to this div
  var $div2=$('.enmy');
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;

  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
     var col=$('.enmy').hide();
  return  col;
}

我尝试将var $div1更改为bullet，因为这是用于存储使用jquery创建的div的变量

次要问题

为什么我必须输入此代码

window.setInterval(function() {
$('').text(collision($(''), $('')));
}, 200);

为了使其发挥作用

Answer 1

请检查fiddle，我已修复了一些小问题，现在可以了。

问题不在于碰撞方法（实际上，它工作正常）。问题在于，当您检查是否发生了碰撞时，子弹位置与飞机相同。子弹正在移动是，但是当你实际检查它时，它与飞机相同。您需要添加和间隔并检查子弹是否在其当前位置发生碰撞。

$(document).click(function () {
    var plane = $('#plane');
    var bull_to_append = $('<div class="blt"/>');
    var bullet = bull_to_append.appendTo(plane);

    var i = setInterval(function () {
        collision(bull_to_append);
    }, 10);

    setTimeout(function () {
        bullet.fadeOut(1200, function () {
            bullet.remove();
            clearInterval(i);
        })
    }, 300);
});

此外，一旦用户按下一个键，你必须检查飞机的新位置是否与敌人发生碰撞：

$(document).keydown(function (key) {

  switch (parseInt(key.which, 10)) {
    case 38:
        $('#plane').animate({
            top: "-=10px"
        }, 10);
        break;

    case 39:
        $('#plane').animate({
            left: "+=10px"
        }, 10);
        break;

    case 37:
        $('#plane').animate({
            left: "-=10px"
        }, 10);
        break;


    case 40:
        $('#plane').animate({
            top: "+=10px"
        }, 10);
        break;

  }

  collision($('#plane'));
});

我只修改了一下碰撞方法，以便通过哪个元素检查碰撞：

function collision($div1) {
    var $div2 = $('.enmy');
    var x1 = $div1.offset().left;
    var y1 = $div1.offset().top;
    var h1 = $div1.outerHeight(true);
    var w1 = $div1.outerWidth(true);
    var b1 = y1 + h1;
    var r1 = x1 + w1;
    var x2 = $div2.offset().left;
    var y2 = $div2.offset().top;
    var h2 = $div2.outerHeight(true);
    var w2 = $div2.outerWidth(true);
    var b2 = y2 + h2;
    var r2 = x2 + w2;

    if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
        //console.log("not collide");
        return;
    }

    //console.log("collide");
    $div2.hide();
}

希望它有所帮助。

使用jquery制作的div不尊重jquery函数

1 个答案: