Простой цикл Javascript, который повторяется каждую секунду

ProgramBox

Простой цикл Javascript, который повторяется каждую секунду

Post author:admin
Запись опубликована:8 мая, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

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

pxsecx — это количество пикселей, которые он должен перемещать по горизонтали в секунду, pxsecy то же самое, но по вертикали

В принципе, это должно = их к текущему горизонтальному и вертикальному положению.

Мне нужно, чтобы цикл повторялся каждую секунду, пока позиция элемента не встретится с новой позицией (newx).

Это все, что я сделал:

 <body onmousedown="showCoords(event)">
<script type="text/javascript">
function showCoords(evt){
  oldx = parseInt(document.getElementById("character").style.left);
  oldy = parseInt(document.getElementById("character").style.top);

  width = parseInt(document.getElementById("character").style.width);
  height = parseInt(document.getElementById("character").style.height);

  newx = evt.pageX - width/2;
  newy = evt.pageY - height/2;

  disx = newx - oldx;
  disy = newy - oldy;

  diag = parseInt(Math.sqrt(disx*disx   disy*disy));

  speed = 50;

  secs = diag/speed;

  pxsecx = disx/secs;
  pxsecy = disy/secs;

     while(document.getElementById("character").style.left<newx)
      {
      document.getElementById("character").style.left  = pxsecx;
      document.getElementById("character").style.top  = pxsecy;
      }
}
</script>

Все работает до тех пор, пока я понятия не имею, как заставить это работать каждую секунду. Я тестирую его здесь: http://chusmix.com/game/movechar.php

Как мне заставить его повторять это раз в секунду, чтобы это работало?

Спасибо

Ответ №1:

JavaScript в основном асинхронный, поэтому вам нужно будет немного переписать это. setTimeout выполняет функцию через определенное количество времени. Следовательно, вы можете сделать это:

 (function move() {
    var character=document.getElementById("character");
    if(character.style.left<newx) {
        character.style.left  = pxsecx;
        character.style.top  = pxsecy;
        setTimeout(move, 1000);
    }
})();

1. Спасибо за ваш ответ, не могли бы вы, пожалуйста, сказать мне, как включить его в мой скрипт. Я пытался, но я ужасен в javascript. Не могли бы вы просто вставить окончательный код? Я не знаю, как включить это в него. Большое спасибо

2. Просто замените им ваш текущий while цикл.

3. Имеет ли значение, что значения, которые вы сравниваете в своем операторе if, не одного и того же типа. if("100px" < 432) кажется, всегда возвращает false . Похоже, что это не рабочий код, хотя он близок. Можете ли вы перепроверить? Я думаю, что как только ваши типы совпадут, это сработает, но не в этом текущем формате.

4. @jmort253: Если бы они были обоими числами, но одно было в строке, это сработало бы. Это просто "px" из-за того, что оно не распознается как число. Я понял, что это не совсем сработает, когда я опубликовал это, но и исходный код OP тоже не сработал; Я думал, что это просто псевдокод, и они добавят другие переменные или исправят синтаксический анализ чисел позже.

5. Отличный ответ. 1. На самом деле я потратил достаточно времени на работу с тем, что вы опубликовали, чтобы знать, что это сработает, если OP обработает часть удаления «px». Поскольку он принял ваш ответ, я предполагаю, что он действительно понял это 🙂

Ответ №2:

Вы можете использовать функцию setInterval(function, interval)

 // To start the loop
var mainLoopId = setInterval(function(){
    // Do your update stuff...
    move();
}, 40);

// To stop the loop
clearInterval(mainLoopId);`

Ответ №3:

Вам нужна функция JavaScript setTimeout() . Он вызывает функцию каждые n миллисекунд.

1. Миллисекунды, а не микросекунды.

2. Хотя вы можете использовать setTimeout для выполнения этого небольшого кодирования, вы должны искать setInterval, который сделает это за вас.

3. Это неверно. setTimeout вызывает функцию только один раз . Для повторного вызова используйте setInterval .

Ответ №4:

Я создал класс coffescript для обработки временных циклов, возможно, это будет кому-то полезно.

 # Classe TimeLoop, execute a function every x miliseconds
#
# @example How o create a loop
#   myLoop = new TimeLoop((-> alert("loop"),1000)
#   myLoop.start()
#
class window.TimeLoop
  constructor: (@function,@miliseconds) ->

  # Start loop.
  #
  start: -> @loop = setInterval @function, @miliseconds

  # Stop loop.
  #
  stop: -> clearInterval(@loop)

ссылка на суть:https://gist.github.com/germanotm/6ee68f804860e2e77df0

Ответ №5:

чтобы повторять что-то каждую секунду, вам придется использовать установленный интервал:

 let before = new Date();

setInterval(() => {
    console.log(Math.round((new Date() - before) / 1000));
}, 1000);

этот код получает дату выполнения и вычитается из даты каждой секунды. (кстати, он начинается с единицы, а не с нуля, так что вам придется делать это вручную, если хотите)