Как зациклить анимацию в JavaScript?

Question

[cheIowek]

Решил сделать игру Space Invaders на JavaScript.
Суть вопроса такая:
написал код, но он работает не так как хотелось бы (блок invaders должен перемещаться то влево, то вправо плавно, а он мигает, пропадает, и вообще ведет себя неподобающим образом если увеличить его скорость или увеличить частоту вызова функции)
сам код вот:

let timer;
let direction = 'left';
function moving() {

 	if(direction == 'left'){
 		let start = Date.now();

      	timer = setInterval(function() {
        let timePassed = Date.now() - start;

        invaders.style.marginLeft = timePassed / 4 + 'px';

        if (invaders.style.marginLeft.slice(0,invaders.style.marginLeft.indexOf('p')-1) > 670) {clearInterval(timer); direction = 'right'};

      }, 20);
 	}
 	else{
 		start = Date.now();

       	timer = setInterval(function() {
        let timePassed = Date.now() - start;

        invaders.style.marginLeft = (685 - timePassed / 4) + 'px';

        if (invaders.style.marginLeft.slice(0,invaders.style.marginLeft.indexOf('p')-1) < 10) {clearInterval(timer); direction = 'left'};

      }, 20);
      }
      	}

      window.onload = setInterval(moving, 3000);

У меня была идея такая: создать функцию, которая перемещает то влево, то вправо, в зависимости от переменной (в будущем это все будет метод и св-во объекта), функция вызывается циклически (или сама функция бесконечна) когда необходимо сменить направление (ширина блока внутри котором будет перемещение равна 670-680, т.е не выходить за эти рамки)
Я не уверен что я мыслю в правильном направлении, поэтому и создал этот вопрос тут, если есть идеи получше или есть идеи по улучшению уже существующего кода - напишите их сюда, пожалуйста.

Comments

[RAX7]

https://learn.javascript.ru/js-animation

Answer 1

[cheIowek]

Дико затупил, все можно реализовать намного проще:

let direction = 'left';
let invaders = document.getElementById("invaders");
let i = 0;
function move() {
if(i > 677) {
	direction = 'right'
}

else if (i < 5){
	direction = 'left'
}

if(direction == 'left'){
	invaders.style.left = i + 'px';
	i++;
}

else if(direction == 'right'){
	invaders.style.left = i + 'px';
	i--;
}

}
window.onload = setInterval(move, 10)