setInterval внутри gameloop, не работает по назначению

Я делаю небольшую игру на холсте, но я не могу получить setInterval, чтобы хорошо работать внутри игрового ядра.setInterval внутри gameloop, не работает по назначению

С помощью этого кода интервал запускается один раз, а затем gameloop, похоже, захватывает и работает все время.

<html> 
<head> 

<script type="text/javascript"> 
    //Gameloop 
    function gameLoop(){ 
     update(); 
     draw(); 
     requestAnimationFrame(gameLoop); 
    } 

    var x=50; 
    var y=50; 

    // update values 
    function update(){ 
     x++; 
     //timer to increase speed once every 2 seconds 
     function timer(){ 
     x = x +5; 
     } 
     var interval = setInterval(timer, 2000); 
    } 

    //Draw onto canvas 
    function draw(){ 
     var canvas = document.getElementById('canvas'); 
     if (canvas.getContext) { 
      var ctx = canvas.getContext('2d'); 
     } 
     ctx.clearRect(0,0,800,800); 
     ctx.beginPath(); 
     ctx.rect(x,y,25,25); 
     ctx.fill(); 
    } 
</script> 
</head> 

<body onload=gameLoop()> 
<canvas id="canvas" width="800" height="800"></canvas> 
</body> 
</html>

источник

2015-09-04 Björn Carlsson

вэй .. вам нужно сделать 'clearInterval (intervalid)', чтобы очистить интервал. поэтому вам нужно где-то сохранить ссылку и решить, когда вы хотите их очистить. – Tschallacka

Вы начинаете интервал для каждой итерации в игровом цикле, поэтому к тому моменту, когда первый интервал перемещается в поле, выполняется еще около 30 интервалов, которые начнут перемещать поле сразу после, и появятся новые интервалы, начиная все время. Запустите функцию «update» один раз, а не в игровом цикле. – Guffa

Спасибо за азерсеров, тоже подумал об этом, жесткая, это не настоящая игра, просто тестовая проблема для решения моей проблемы, поэтому функция обновления передает ALOT информации в реальной игре, поэтому она необходима. И если я очищаю интервал после каждой итерации gameloop, тогда он не работал бы с момента его запуска и получал canceld много раз в течение одной секунды? –

Каждый gameloop стрелял в другой интервал. Вместо этого попробуйте использовать время кадра для интервала. Также вы можете получить холст и контекст один раз в глобальном масштабе для увеличения кадров в секунду.

var elFps = document.getElementById("fps"); 
 
var fps = 0; 
 
var fpsInterval = setInterval(function(){ 
 
    elFps.innerHTML = 'fps='+fps; 
 
    fps = 0; 
 
}, 1000); 
 

 

 
var speed = 1; 
 
var gameStart = Date.now(); 
 
var speedUpTime = gameStart + 2000; 
 

 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); 
 

 
    //Gameloop 
 
    function gameLoop(){ 
 
     var frameTime = Date.now(); 
 
     if (frameTime >= speedUpTime) { 
 
      speed+=1; 
 
      speedUpTime += 2000; 
 
     } 
 
     fps++; 
 
     update(); 
 
     draw(); 
 
     requestAnimationFrame(gameLoop); // This is your looper 
 
    } 
 

 
    var x=50; 
 
    var y=50; 
 

 
    // update values 
 
    function update(){ 
 
     x+=speed; 
 
    } 
 

 
    //Draw onto canvas 
 
    function draw(){ 
 
     ctx.clearRect(0,0,800,800); 
 
     ctx.beginPath(); 
 
     ctx.rect(x,y,25,25); 
 
     ctx.fill(); 
 
    } 
 

 
gameLoop();

<div id="fps"> - </div> 
 
<canvas id="canvas" width="800" height="800"></canvas>

источник

2015-09-06 03:26:10 wolfhammer

setInterval внутри gameloop, не работает по назначению

ответ

Смежные вопросы