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