Перемещение квадрата через экран и на другую сторону

Question

Мне нужно переместить квадрат по экрану.Когда он дойдет до конца, он должен снова появиться в начальной точке непрерывного цикла.

Я могу сделать это с помощью setInterval.Но я хотел бы вызвать функцию, используя requestAnimationFrame.В настоящее время квадрат продолжает двигаться в одном направлении и за пределами экрана.Я использую jquery для своего кода.

  let block = document.getElementById('mydiv');
  let startPos = 0;
  function moveStone(timestamp){
    startPos += 5;
    block.style.left = startPos + 'px';
    requestAnimationFrame(moveStone);
  }`enter code here`
  requestAnimationFrame(moveStone);

Я ожидаю, что квадрат снова появится в начальной точке, но он продолжается и продолжается в одном направлении.

Answer 1

Зацикливание в коде может быть достигнуто несколькими способами. Вот подход модуля (предупреждение! Непроверенный!);

  let block = document.getElementById('mydiv');
  let startPos = 0;
  const maxPos = 100;
  function moveStone(timestamp){
    startPos += 5;
    block.style.left = (startPos % maxPos) + 'px';
    requestAnimationFrame(moveStone);
  }
  requestAnimationFrame(moveStone);