JavaScript animations

Question

How do I get an object to move and then change directions as it’s moving

Answer 1

https://code.sololearn.com/WJlsWhpFOHEn/?ref=app

Answer 2

I want the green square to move over to the edge of the small blue square and then straight down then over to the left.

Answer 3

I added a bit to make the square move down.
You should be able to add the third and fourth bit to finish it.

//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var hpos = 0;
var vpos = 0;
var st = 1;
var box = document.getElementById('box');
var t = setInterval(move, 5);

function move() {
if (st==1){
if(hpos <100) {
hpos += 1;
box.style.left = hpos+'px';
}

else {
st=2;
}
}
if (st==2){
if(vpos <100) {
vpos += 1;
box.style.top = vpos+'px';
}

else {
st=3;
}
}

}
}

Answer 4

function move() {
if(pos >= 150) {
clearInterval(t);
}
else {
pos += 1;
box.style.left = pos+"px";
}
}

Answer 5

please post your code.