Change Color by moving the div

Question

I have a question. So, I have 3 divs with background and another 3 divs with borders. I have to move div #1 with red background to the divs without backgrounds. If the div with red background matches with the divs with red borders it should be colored in red background. Please see the code. I am stuck as I am not able to make the div change the color.

let allDivs = document.querySelectorAll("#dd")
dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
  })
})

 #dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

You wrote: If the div with red background matches with the divs with red borders it should be colored in red background. **the nackground is red and you want to change it to red** — , Dec 15 '20 at 09:46

score 0 · Answer 1 · answered Dec 15 '20 at 10:07

Here is a simple way to do it, based on this:

let allDivs = document.querySelectorAll("#dd")
let red1rect = document.getElementById("red1").getBoundingClientRect();
let blue1rect = document.getElementById("blue1").getBoundingClientRect();
let green1rect = document.getElementById("green1").getBoundingClientRect();

dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
    checkMatch(red);
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
    checkMatch(blue);
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
    checkMatch(green);
  })
})

function checkMatch(moving) {
   let movingrect = moving.getBoundingClientRect();
   
   if(!(movingrect.right < red1rect.left || 
        movingrect.left > red1rect.right || 
        movingrect.bottom < red1rect.top || 
        movingrect.top > red1rect.bottom)) {
      moving.style.backgroundColor = "red";
      return;
   } else if(!(movingrect.right < blue1rect.left || 
        movingrect.left > blue1rect.right || 
        movingrect.bottom < blue1rect.top || 
        movingrect.top > blue1rect.bottom)) {
      moving.style.backgroundColor = "blue";
      return;
   } else if(!(movingrect.right < green1rect.left || 
        movingrect.left > green1rect.right || 
        movingrect.bottom < green1rect.top || 
        movingrect.top > green1rect.bottom)) {
      moving.style.backgroundColor = "green";
      return;
   } else {
      moving.style.backgroundColor = null;
   };   
};

#dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

When each element moves, you use getBoundingClientRect() to get the element's position and compare that to the other div's position to find out if it's overlapping, then change colour if so, change back if not.

score 0 · Answer 2 · answered Dec 15 '20 at 10:46

You can use below function to check collision -

function getDistance(obj1,obj2){
   Obj1Center=[obj1.left+obj1.width/2,obj1.top+obj1.height/2];
   Obj2Center=[obj2.left+obj2.width/2,obj2.top+obj2.height/2];

   var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

function hasCollision(div1,div2){  
 var obj1 = div1.getBoundingClientRect();
 var obj2 = div2.getBoundingClientRect();
 return getDistance(obj1,obj2)<obj1.width/2+obj2.width/2;
}

Final code -

let allDivs = document.querySelectorAll("#dd")
dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
        var red1 =document.getElementById("red1");
    var isColliding = hasCollision(red, red1);
    if (isColliding) {
        red1.style.backgroundColor = "red";
    }
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
    var blue1 =document.getElementById("blue1");
    var isColliding = hasCollision(blue, blue1);
    if (isColliding) {
        blue1.style.backgroundColor = "blue";
    }
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
    var green1 =document.getElementById("green1");
    var isColliding = hasCollision(green, green1);
    if (isColliding) {
        green1.style.backgroundColor = "green";
    }
  })
});

function getDistance(obj1,obj2){
    Obj1Center=[obj1.left+obj1.width/2,obj1.top+obj1.height/2];
    Obj2Center=[obj2.left+obj2.width/2,obj2.top+obj2.height/2];

    var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

function hasCollision(div1,div2){  
    var obj1 = div1.getBoundingClientRect();
var obj2 = div2.getBoundingClientRect();
    return getDistance(obj1,obj2)<obj1.width/2+obj2.width/2;
}

#dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

Change Color by moving the div

2 Answers2