Objects Going Out Of Container While Rotation In Javascript?

I have an animation like there are some boxes (actually they are divs) that are moving randomly and if any box hits with the walls of the parent container they bounce back and chan

Solution 1:

Remove position:relative; from .box class. It will contain the boxes within the parent, however because rect is used outside of move function it contains non-rotated dimensions of the box which does not properly render box collision:

document.addEventListener("DOMContentLoaded", e => {

  const test = document.querySelectorAll(".test")
  
  test.forEach(function(many) {

    let rect = many.getBoundingClientRect(),
      rectBox = many.parentNode.getBoundingClientRect(),
      xMax = rectBox.width + rectBox.x - rect.width,
      yMax = rectBox.height + rectBox.y - rect.height,
      maxSpeed = 1;
//dotted boxconst boundBox = document.createElement("div");
boundBox.className = "boundBox";
boundBox.addEventListener("click", setSpeed);
document.body.appendChild(boundBox);

    let x = rect.x,
      y = rect.y,
      xDelta,
      yDelta;

    setSpeed();
    many.addEventListener("click", setSpeed);
    window.requestAnimationFrame(move);
    many.classList.toggle("move", true);

    functionmove(timestamp) {
      x = x + xDelta;
      y = y + yDelta;
      if (x < rectBox.x || x > xMax) {
        xDelta = -xDelta;
        x = x < rectBox.x ? rectBox.x : xMax;
      }
      if (y < rectBox.y || y > yMax) {
        yDelta = -yDelta;
        y = y < rectBox.y ? rectBox.y : yMax;
      }
      many.style.transform = `rotate(${x/2}deg)`
      many.style.left = x + "px";
      many.style.top = y + "px";

boundBox.style.left = x + "px";
boundBox.style.top = y + "px";
boundBox.style.width = rect.width + "px";
boundBox.style.height = rect.height + "px";

      window.requestAnimationFrame(move);
    };
    //console.log(xDelta)functionsetSpeed() {
      xDelta = rand(-maxSpeed, maxSpeed);
      yDelta = rand(-maxSpeed, maxSpeed);
    }

    functionrand(min, max) {
      returnMath.random() * (max - min + 1) + min;
    }

  })

});

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
}

.box {
  width: 500px;
  height: 500px;
  border: 2px solid red;
  margin: 0 auto;
/*  position: relative;*/margin-top: 50px;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #fff;
  text-align: center;
}

.bgcolor {
  background-color: black;
  color: rgba(255, 255, 255, 0.8);
}

.test {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  background-color: #FCD757;
}

.move {
  margin: 0;
  position: absolute;
}

.check {
  border: 2px solid black;
  width: 50px;
  height: 105px;
}

.big {
  width: 120px;
}

.boundBox
{
  position: absolute;
  border: 1px dotted black;
}

<divclass="box"><divid="test"class="test"></div><divclass="test"></div><divclass="test"></div><divclass="test big"></div><divclass="test big"></div><divclass="test big"></div><divclass="test"></div></div>

To fix that, we need to get box rect for each frame and for both before and after it was rotated:

document.addEventListener("DOMContentLoaded", e =>
{
  const test = document.querySelectorAll(".test");

  test.forEach(function(many){
    
    
    const rectBox = many.parentNode.getBoundingClientRect(),
          rect = many.getBoundingClientRect(),
          maxSpeed = 1;

//dotted boxconst boundBox = document.createElement("div");
boundBox.className = "boundBox";
boundBox.addEventListener("click", setSpeed);
document.body.appendChild(boundBox);

    let x = rect.x,
        y = rect.y,
        xDelta,
        yDelta;

    setSpeed();
    many.addEventListener("click", setSpeed);
    window.requestAnimationFrame(move);
    many.parentNode.classList.toggle("move", true);
    functionmove(timestamp)
    {
      x = x + xDelta;
      y = y + yDelta;

      many.style.transform = "";
      const rectInit = many.getBoundingClientRect();

      many.style.transform = `rotate(${x/2}deg)`;
      const rectBox = many.parentNode.getBoundingClientRect(),
            rect = many.getBoundingClientRect(),
            xDif = rect.x - rectInit.x,
            yDif = rect.y - rectInit.y,
            xMin = rectBox.x - xDif,
            yMin = rectBox.y - yDif,
            xMax = rectBox.width + rectBox.x - rect.width - xDif,
            yMax = rectBox.height + rectBox.y - rect.height - yDif;

      if (x < xMin || x > xMax)
      {
        xDelta = -xDelta;
        x = x < xMin ? xMin : xMax;
      }
      if (y < yMin || y > yMax)
      {
        yDelta = -yDelta;
        y = y < yMin ? yMin : yMax;
      }
      many.style.left = x + "px";
      many.style.top = y + "px";

boundBox.style.left = x + xDif + "px";
boundBox.style.top = y + yDif + "px";
boundBox.style.width = rect.width + "px";
boundBox.style.height = rect.height + "px";

      window.requestAnimationFrame(move);
    } //move()//console.log(xDelta)functionsetSpeed()
    {
      xDelta = rand(-maxSpeed, maxSpeed);
      yDelta = rand(-maxSpeed, maxSpeed);
    }
    functionrand(min, max)
    {
      returnMath.random() * (max - min + 1) + min;
    }

  }) //forEach
    
});

html, body
{
  height: 100%;
  margin: 0;
  padding: 0;
  user-select: none;
}
.box
{
  width: 500px;
  height: 500px;
  border:2px solid red;
  margin: 0 auto;
/*  position:relative;*/margin-top: 50px;

}
*{
  box-sizing:border-box;
}
body {
  background-color: #fff;
  text-align: center;
}
.bgcolor {
  background-color: black;
  color: rgba(255, 255, 255, 0.8);
}
.test
{
  width:100px;
  height:100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  background-color: #FCD757;
  
}
.move.test
{
  margin: 0;
  position: absolute;
}
.check{
  border:2px solid black;
  width:50px;
  height:105px;
}
.big{
  width:120px;
}

.boundBox
{
  position: absolute;
  border: 1px dotted black;
}

<divclass="box"><divid="test"class="test"></div><divclass="test"></div><divclass="test"></div><divclass="test big"></div><divclass="test big"></div><divclass="test big"></div><divclass="test"></div></div>