Untitled

<!DOCTYPE html>
<html>
<style>
#myContainer {
  width: 400px;
  height: 400px;
  position: relative;
  background: black;
}
#myAnimation {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: violet;
}
</style>
<body>

<p>
<button onclick="runAnimation()">Click Me</button>
</p>

<div id ="myContainer">
<div id ="myAnimation"></div>
</div>
<script>

var intervalId = 0;
const elem = document.getElementById("myAnimation");
var currentMoveIndex = 0;
const moves = [
{x: 350, y: 350},
{x: 0, y: 350},
{x: 350, y: 0},
{x: 150, y: 150},
{x: 10, y: 260}
]

function moveElement() {
    var elemX = elem.offsetLeft;
    var elemY = elem.offsetTop;
    var currentMove = moves[currentMoveIndex];

    if (moves.length === currentMoveIndex) {
        clearInterval(intervalId);
        return;
    }
    else if (currentMove.x === elemX && currentMove.y === elemY) {
        currentMoveIndex++;
    }
    else {
        var xOffset = 0;
        if (currentMove.x > elemX)  {
            xOffset = 1;
        }
        else if (currentMove.x < elemX) {
            xOffset = -1;
        }

        var yOffset = 0;
        if (currentMove.y > elemY)  {
            yOffset = 1;
        }
        else if (currentMove.y < elemY) {
            yOffset = -1;
        }

        elem.style.left = (elemX + xOffset) + 'px';
        elem.style.top = (elemY + yOffset) + 'px';
    }
}

function runAnimation() {
    intervalId = setInterval(moveElement, 5);
}

</script>
</body>
</html>