collision detection with js div doesn't move

Viewed 43

I am trying to do a movable div with collision detection and if the div collides with another div it changes position but the div doesn't even move i can't use animate since i should check the collision let bubbleContainer = document.querySelectorAll(".bubble-container")

let bubbleContainer = document.querySelectorAll(".bubble-container")
var newq = makeNewPosition();
animateBubble(bubbleContainer)

function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 200;
    var w = $(window).width() - 200;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];

}

async function animateBubble(classobject){
  var array  = Array.from(classobject);
  for (var i = 0; i < array.length; i++){
    classobject[i].style.top = getComputedStyle(classobject[i]).top;
    classobject[i].style.left = getComputedStyle(classobject[i]).left;
  }
    var moving = setInterval(()=>{
      var array  = Array.from(classobject);
      for (var i = 0; i < array.length; i++){
        var array  = Array.from(classobject);
        classobject[i].style.top = Number(classobject[i].style.top) < this.newq[0] ? Number(classobject[i].style.top) + 1 + "px" : Number(classobject[i].style.top) - 1 + "px"
        classobject[i].style.left = Number(classobject[i].style.left) < this.newq[1] ? Number(classobject[i].style.left) + 1 + "px" : Number(classobject[i].style.left) - 1 + "px"
        console.log(classobject[i].style.top)
        console.log(classobject[i].style.left)
        var xi = Number(classobject[i].style.left);
        var yi = Number(classobject[i].style.top);
        var ri = Number(classobject[i].style.width)/2;
        if (classobject[i].style.top == this.newq[0] && classobject[i].style.left == this.newq[1]){
          this.newq = makeNewPosition();
        }
        array.splice(i,1);
        for (var j = 0; j < array.length; j++){
          var xj = Number(classobject[j].style.left);
          var yj = Number(classobject[j].style.top);
          var rj = Number(classobject[j].style.width)/2;
          var dx = Math.abs(xi - xj);
          var dy = Math.abs(yi - yj);
          var dist = Math.sqrt(dx**2 + dy**2);
          if (dist <= rj + ri) {
            this.newq = makeNewPosition();
          }
        }
      }
    },500)

};

logging classobject[i].style.top, and classobject[i].style.left it always says 1 px also if i put var newq = makeNewPosition(); outside the set interval (where it should be) the set interval function says it is undefined

0 Answers
Related