Почему поведение моего кода непоследовательно? Нет никакой рандомизации или чего-либо еще

#javascript #function #variables

#javascript #функция #переменные

Вопрос:

Я пытаюсь сделать маленький квадрат на моем экране «прыгающим». Все шло гладко, пока я не попытался добавить переменную «fallSpeed», которая изменяла бы скорость, с которой он медленно падает, чтобы имитировать реальную гравитацию (да, я понимаю, что это не самое реалистичное представление гравитации, но я просто пытаюсь упростить.) Внезапно, когда эта переменная установлена, примерно половину времени мой код будет работать, но затем в половине случаев он будет сбиваться с толку (да, я знаю, что это произойдет, если вы удерживаете или спамите пробел, но это не то, о чем я говорю, это происходит просто при нажатии пробела.) Что может быть настолько непоследовательным и странным, что никакой рандомизации ничего нет?

 <script>
  document.addEventListener("keydown", function(event) {
    jump(event);
  })
  var posX = 500;
  var posY = 500;
  var fallSpeed = 3;
  function moveUp() {
    if (posY > 250) {
      posY -= 3;
      document.getElementById('player').style.marginTop = posY   "px"
      fallSpeed  = 0.005;
      setTimeout(() => {moveUp();}, 1);
      }
    else {
      return true;
      }
    }
  function moveDown() {
    if (posY < 500) {
      posY  = fallSpeed;
      document.getElementById('player').style.marginTop = posY   "px"
      fallSpeed  = 0.02;
      setTimeout(() => {moveDown();}, 1);
    }
    else {
      fallSpeed = 3;
      return;
    }
  }
  function jump(event) {
    if (event.key === " ") {
      moveUp();
      setTimeout(() => {if (moveUp) {
        moveDown();
      }}, 399)
    }
    }
  </script>
  

Ответ №1:

Я только что понял это! Мне нужно было изменить задержку во втором setTimeout(), потому что она была слишком короткой, потому что теперь блок падал быстрее.

Комментарии:

1. Рассмотрите возможность использования requestAnimationFrame вместо setTimeout для плавной и последовательной анимации.