CODEWITHSUNDEEP
jqueryhtmlcss
Akshay
Akshay

Reputation: 14348

Div made using jquery not respecting jquery functions

I am trying to make a simple game here is what i have so far http://codepen.io/akshay-7/pen/Ggjxwb I am having a problem in making the div with class .blt collide with the .enmy class. The div blt is created using jquery. I can make the plane collide with the enemy(try colliding the plane with the enemy by pressing the arrow keys) but unable to do it with '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;
}

i tried changing the var $div1 to bullet since that is the variable that is used to store the div created using jquery

Secondary Question

why do i have to type this code

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

in order to make it work

Upvotes: 0

Views: 87

Answers (1)

acontell
acontell

Reputation: 6922

Please check this fiddle, I've fixed some minor problems and now it works.

The problem doesn't lie in the collision method (actually, it works fine). The problem lies in that when you check if there's been a collision or not, the bullet position is the same as the plane. The bullet is moving yes, but when you actually check it, is the same as the plane. You need to add and interval and check if the bullet collides or not in its current position.

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

Also, once the user has pressed a key you have to check if the new position of the plane collides with the enemy:

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

I only modified a bit the collision method in order to pass which element check for a collision:

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

Hope it helps.

Upvotes: 2

Related Questions