Reset div to its original position-CodePudding

I am trying to reset an element to its original position. The ball div is positions at the kick line and then when shot, moves towards the mouse click, however it does not rest back to its position after the shot has been taken.

I am using the getBoundingClientRect to get the original postion when the JS file is loaded and then created a JS method called restoreBallPosition() which sets the top and left of the ball div back to the saved ballRect positions after a timeout but its not working and I am struggling to understand why.

const ball = document.getElementById('ball');
const ballRect = ball.getBoundingClientRect();
console.log(ballRect);

function goal() {
  var score = getScore();
  increaseDifficulty(score)
  document.getElementById("score").innerHTML = score   1;
  var b = getShotCordinates();
  moveBall(b[0], b[1]);
  restoreBallPositions();
}

function save() {
  resetScore();
  resetDifficulty();
  restoreBallPositions();
}

function resetScore() {
  document.getElementById("score").innerHTML = 0;
}

function getScore() {
  return parseInt(document.getElementById("score").innerHTML);
}

function increaseDifficulty(score) {

  switch (score) {
    case 5:
      document.getElementById("goalkeeper").style.animation = "protect 8s infinite";
      break;
    case 10:
      document.getElementById("goalkeeper").style.animation = "protect 6s infinite";
      break;
    case 15:
      document.getElementById("goalkeeper").style.animation = "protect 4s infinite";
      break;
    case 20:
      document.getElementById("goalkeeper").style.animation = "protect 3s infinite";
      break;
    case 25:
      document.getElementById("goalkeeper").style.animation = "protect 2s infinite";
      break;
    case 30:
      document.getElementById("goalkeeper").style.animation = "protect 1s infinite";
      break;
    default:
  }
}

function resetDifficulty() {
  document.getElementById("goalkeeper").style.animation = "protect 10s infinite";
}

function moveBall(x, y) {
  var x = x - 150;
  var y = y - 450;
  document.getElementById("ball").style.transform = "translate("   x   "px,"   y   "px)";
  document.getElementById("ball").style.transition = "0.2s";
}

function getShotCordinates() {
  var e = window.event;
  var Cordinates = [e.clientX, e.clientY];
  console.log(Cordinates[0]   " - "   Cordinates[1])
  return Cordinates;
}


function restoreBallPositions() {
  setTimeout(function() {
    ball.style.top = ballRect.y;
    ball.style.top = ballRect.x;
  }, 2000);
}

<HTML lang="en">

<HEAD>
  <title>Soccor Game</title>

  <link rel='stylesheet' href='css/styles.css'>

</HEAD>

<BODY>
  <div id="canvas"  onl oad="savePositions()">
    <div id="goals"  onclick="goal()">

    </div>
    <div id="goalkeeper" onclick="save()">
    </div>

    <div id="kick-off">
      <div id="ball" >
      </div>
    </div>

    <div id="score-container">
      <div id="counter">
        <h1 >Score</h1>
        <h1  id="score">0</h1>
      </div>
    </div>
  </div>

  <script src='js/script.js'></script>
</BODY>

</html>

CodePudding user response：

Using transform instead position-top worked for me.

The updated **restoreBallPosition** function will looks something like this:

function restoreBallPositions() {
console.log('restoring')
  setTimeout(function() {
    console.log('restore timeout', ballRect);
ball.style.transform = "translate("   ballRect.x   "px,"   ballRect.y   "px)";
    ball.style.transition = "0.2s";
  }, 2000);
}

Attached is a minimal reproducible example.

const ball = document.querySelector('.ball');
const ballRect = ball.getBoundingClientRect();
console.log(ballRect);

function getShotCordinates(){
    var e = window.event;
    var Cordinates = [e.clientX, e.clientY];
    console.log(Cordinates[0]   " - "   Cordinates[1])
    return Cordinates;
}

function restoreBallPositions() {
console.log('restoring')
  setTimeout(function() {
    console.log('restore timeout', ballRect);
ball.style.transform = "translate("   ballRect.x   "px,"   ballRect.y   "px)";
    ball.style.transition = "0.2s";
  }, 2000);
}

function moveBall() {
    const [a, b] = getShotCordinates();
  var x = a - 150;
  var y = b - 450;
  document.querySelector(".ball").style.transform = "translate("   a   "px,"   b   "px)";
  document.querySelector(".ball").style.transition = "0.2s";
  
  restoreBallPositions()
  
}

window.addEventListener('click', moveBall);

.ball {
  background: red;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  top: 20%;
  left: 10%;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div >
  </div>
</body>
</html>