CODE EXAMPLE FOR JAVASCRIPT

collision javascript

let a = document.querySelector('.Div1')

let b = document.querySelector('.Div2')




setInterval(function(){

  let d1P = a.getBoundingClientRect()

  let d2P = b.getBoundingClientRect()

 let TopLeftCornerBoxA = d1P.x
 let TopRieghtCornerBoxA = d1P.x+d1P.width
 let TopLeftCornerBoxB = d2P.x
 let TopRieghtCornerBoxB = d2P.x+d2P.width


 let TopLeftCornerBoxHeightA = d1P.y
 let BottonLeftCornerBoxHeightA = d1P.y+d1P.height
 let TopLeftCornerBoxHeightB = d2P.y
 let BottonLeftCornerBoxHeightB = d2P.y+d2P.height


  // console.log('///////////////')
  // console.log(TopLeftCornerBoxA)
  // console.log(TopRieghtCornerBoxA)
  // console.log(TopLeftCornerBoxB)
  // console.log(TopRieghtCornerBoxB)

  // console.log('///////////////')
  // console.log(TopLeftCornerBoxHeightA)
  // console.log(BottonLeftCornerBoxHeightA)
  // console.log(TopLeftCornerBoxHeightB)
  // console.log(BottonLeftCornerBoxHeightB)
  // console.log('///////////////')
  
  if(

    TopRieghtCornerBoxA>=TopLeftCornerBoxB && TopLeftCornerBoxA<=TopRieghtCornerBoxB
    BottonLeftCornerBoxHeightA>=TopLeftCornerBoxHeightB && TopLeftCornerBoxHeightA<=BottonLeftCornerBoxHeightB


  ){
    a.style.backgroundColor = "#cf8"
    b.style.backgroundColor = "#cf8"
  }else{
    a.style.backgroundColor = "#red"
    b.style.backgroundColor = "#blue"
  }


},1)