Div 使用 jquery 不尊重 jquery 函数

Question

我正在尝试制作一个简单的游戏，这是我目前所拥有的 http://codepen.io/akshay-7/pen/Ggjxwb 我在使 div 与 class .blt 与 .enmy class 发生冲突时遇到问题。 div blt 是使用 jquery 创建的。我可以使飞机与敌人相撞（尝试通过按箭头键使飞机与敌人相撞）但无法使用 'blt'

 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();
}

希望对您有所帮助。

Div 使用 jquery 不尊重 jquery 函数

Div made using jquery not respecting jquery functions

html

css

jquery