Написал код с анимацией, хотел чисто на js без css вообщем квадрат стоит по центру экрана потом двигается на верх до конца экрана, потом на права до конца, потом вниз до конца потом налево и вверх обратно на свое место. И проблема у меня такая получилась вверх и направо он у меня идет, а вот вниз не хочет, точнее начинает идти потом проскакивает часть экрана и все, на лево вообще стоит на месте. не знаю что делать помогите
let box=document.getElementById(`red`);
let delay=10; //скорость
let coords=box.getBoundingClientRect(); //координаты в начальной точке
let windowWidth=document.documentElement.clientWidth;//размер экрана
let windowHeight=document.documentElement.clientHeight;//размер экрана
let count=0; //
let countLeft=0; //
let countBottom=0;// Счетчики
let countRight=0; //
function edge()
{
let coords2=box.getBoundingClientRect(); // отслеживаю координаты
if(coords2.y!=0) //двигаюсь вверх пока координата х не станет 0
{
setTimeout(edge,delay);
box.style.bottom= count+'px';
count++;
}else
if(coords2.x!=windowWidth-box.offsetWidth) //на право
{
setTimeout(edge,delay);
box.style.left= countLeft+'px';
countLeft++;
}
/* else
if(coords2.y!=windowHeight-box.offsetHeight) //вниз не работает как надо
{
setTimeout(edge,delay);
box.style.top = countBottom +'px';
countBottom++;
} */
/* else
if(coords2.x==coords.x) //на лево вообще не срабатывает
{
setTimeout(edge,delay);
box.style.right= countRight+'px';
countRight++;
} */
/*Это чисто проверки для себя не влияет на работу кода*/
console.log(coords2.x);
console.log(coords2.y);
console.log('*******');
}
//edge();
console.log(windowWidth,windowHeight);
console.log(coords.x,coords.y);