detecting "collision" between 2 divs javascript

by

I want to detect a collision between two divs and I’ve tried to do that using the offsetLeft and offsetTop of each one of the divs and by using getBoundingClientRect(). but none of these work

Is there a way I can get the exact coordinates in which these two elements touch?

How can I do this?

codepen -> https://codepen.io/mullerz/pen/vYNjXWQ

<button type="button">Start Game</button>
    <div class="big">
        <div class="blue"></div>
        <div class="red"></div>
    </div>

.big{
        width:400px;
        height:400px;
        outline : 1px solid red;
        margin: 0 auto;
        position: relative;
    }

    .blue{
        width:20px;
        height:20px;
        background:blue;
        position:absolute;
    }
    .red{
        width:20px;
        height:20px;
        background:red;
        position:absolute;
    }

const bigDiv = document.querySelector(".big")
        const blue = document.querySelector(".blue")
        const startBtn = document.querySelector("button")
        const red = document.querySelector(".red")
        const bigDivDimensions = bigDiv.getBoundingClientRect();
        let speed = 5;
        //let counter = 0;


        let bigDivLeft = bigDivDimensions.left;

        startGame();
function random(){return Math.floor(Math.random()*(bigDivDimensions.width-40));}

function startGame(){
    //let randomSnake = Math.floor(Math.random()*(bigDivDimensions.width-40));
    //let randomApple = Math.ceil(Math.random()*(bigDivDimensions.width -40));
    blue.style.left = random() + "px"
    blue.style.top = random() + "px"
    red.style.left = random()+ "px"
    red.style.top = random() + "px"
    }

function move(e){
    let blueX = blue.offsetLeft;
    let blueY = blue.offsetTop;
    let key = e.keyCode;

    if(key !== 37 && key !== 38 && key !== 39 && key !== 40 ){return}   
    else if(key === 37 && blueX > 3){ blueX -= speed; }
    else if(key === 38 && blueY > 3){ blueY -= speed; }
    else if(key === 39 &&  blueX < (bigDivDimensions.width - 25) ){ blueX  += speed; }  
    else if(key === 40 && blueY < (bigDivDimensions.height -23)){ blueY += speed; }

    blue.style.left = blueX + "px";
    blue.style.top = blueY + "px";
    colision(blueX, blueY)
}

function colision(blueX,blueY){
    /* let redX = red.offsetLeft;
       let redY = red.offsetTop; 
       if(redY === blueY || redX == blueX){console.log("hit")}  */

       let redRect = red.getBoundingClientRect();
       let blueRect = blue.getBoundingClientRect();

      if((redRect.top < blueRect.bottom) ||(redRect.bottom < blueRect.top) || (redRect.right > blueRect.left) || (redRect.left < blueRect.right)){
        console.log("hit")
      } 
}

startBtn.addEventListener("click", startGame)
document.addEventListener("keydown", move)

42 thoughts on “detecting "collision" between 2 divs javascript”

  25. Unquestionably consider that that you said. Your favourite reason seemed to be on the web the
    easiest thing to bear in mind of. I say to you, I definitely get
    irked while other people think about issues that they just
    don’t recognise about. You managed to hit the nail upon the highest
    as well as outlined out the whole thing with no need side-effects ,
    other folks can take a signal. Will probably be again to get more.
    Thanks

    Reply