@cheIowek

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

Решил сделать игру 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, т.е не выходить за эти рамки)
Я не уверен что я мыслю в правильном направлении, поэтому и создал этот вопрос тут, если есть идеи получше или есть идеи по улучшению уже существующего кода - напишите их сюда, пожалуйста.
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 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)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы