Блог

Я ценю, что вы более подробно объяснили мне свой вопрос! Я считаю, что теперь я могу правильно ответить на вопрос. Я ценю ваше терпение.

Итак, то, что вы, кажется, имеете в виду, когда говорите «обновить», заключается в том, что в видео в правом верхнем углу экрана появляется небольшой GIF, и можно увидеть, как мяч движется вниз, а затем внезапно возвращается в исходное положение и повторяет падение. Если это то, что вы хотите воспроизвести, то этот ответ должен помочь.

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

Я действительно надеюсь, что это поможет…

Ниже вы можете найти мой предыдущий ответ, прежде чем OP объяснил, что именно ей нужно. (Произошло недоразумение с обеих сторон.)

Хорошо, я думаю, мне есть что сказать здесь:

1. setInterval() Функция принимает два параметра. Функция и «таймер интервала», который измеряется в миллисекундах. Теперь любой код, находящийся внутри переданной функции, будет запускаться каждый раз, когда проходит x миллисекунд. Возьмем этот пример:

 setInterval(() => {console.log("something")},15);
 

«что-то» будет регистрироваться в консоли каждые 15 миллисекунд.

Хорошо, теперь, когда мы с этим разобрались, я вижу, как вы говорите в одном из своих комментариев выше, что «В следующем руководстве предполагалось, что «10» — это частота обновления, но я думаю, что это не так. Это 10 каким-то образом заставляет мяч двигаться медленнее или быстрее при движении вниз. » 10 — это частота обновления. 10 — это количество миллисекунд, которое разрешено проходить между вызовами функции, которая «перемещает игрока вниз», и чем меньше число 10, тем быстрее игрок будет двигаться вниз, поскольку код, который заставляет игрока двигаться вниз, выполняется чаще… Так что это имеет смысл.

Теперь второе, что я хочу сказать: зачем создавать игру с использованием HTML-элементов, управляемых CSS через JavaScript, вместо того, чтобы просто создавать игру с использованием HTML <canvas> -элемента? Манипулирование CSS элементов DOM, как правило, ненадежно в области разработки игр, а также медленнее (поскольку движку приходится постоянно пересчитывать «поток» страницы) и сложнее… В этом нет никакой пользы. (Он использует больше кода, работает более неэффективно, он менее читабелен, менее надежен и т. Д.) Так почему бы вам просто не использовать <canvas> тег и не манипулировать им, используя 2D контекст или используя библиотеку, например p5.js или что-то подобное? Есть ли какая-то особая причина, по которой вы делаете это так, как вы это делаете?

Repl не работает.

 setInterval(function(){
  const previewTop = window.getComputedStyle(character).getPropertyValue("top");
  const oldTop = parseInt(previewTop);

  console.log({ previewTop, oldTop })

  character.style.top = `${previewTop   3}px`;  
},10);
 

Можете ли вы попробовать записать это и посмотреть, что вы получите?

Хорошо, я думаю, я понял, о чем вы спрашиваете.

Работает:

Во setInterval(function, time) -первых, используется для рендеринга мяча каждые 10 мс, так что каждые 10 мс мяч перемещается на 3 очка вниз. Итак, как вы сказали, похоже, что это влияет на скорость, но на самом деле это влияет на скорость рендеринга, что ускоряет ее.

Решение:

Теперь, что вы могли бы сделать, так это дождаться n-го рендеринга, когда мяч перемещается за пределы экрана, т.е. Тогда вы могли бы сбросить положение мяча character.style.top = '250px' до того места, где он был запущен в первый раз.

JS

 setInterval(function(){
  var characterTop = 
  parseInt(window.getComputedStyle(character).getPropertyValue("top"));
  character.style.top=(characterTop 3) "px";
  if(character.offsetTop > game.offsetHeight){
    // Game over
    setTimeout(() => {
      // Reset the ball after 1s
      character.style.top= "250px";
    },1000)
  }else{
    
  }
  },10);```