Почему скорость моего игрового персонажа различна на разных компьютерах?

Question

Я разрабатываю онлайн-игру с использованием Java Script. Я использую метод setInterval (movimage, 10) для перемещения персонажа игры. Но я видел, что скорость движения игрового персонажа не такая же, как и все компьютер. Пожалуйста, предложите мне.

Answer 1

Вместо setInterval вы должны, вероятно, использовать requestAnimationFrame (https://developer.mozilla.org/en-US/docs/DOM/window.requestAnimationFrame).

Нет смысла пытаться обновить что-то быстрее, чем может рисовать экран. Вы нацелены на 60 кадров в секунду, что составляет около 16 мс на фрейм.

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ содержит дополнительную информацию о том, как это сделать.

Поддержка браузера довольно хороша (http://caniuse.com/#feat=requestanimationframe), вкратце, все текущие браузеры, кроме браузера Android Stock.

Если у вас это работает в IE9 и ниже, https://gist.github.com/paulirish/1579671 выполняет достойную работу по моделированию поведения в этих браузерах. (Хотя, честно говоря, я подозреваю, что это будет последним из ваших забот, особенно в связи с отсутствием canvas ...)

Answer 2

Даже когда сценарий не делает почти ничего, что занимает больше времени, чем 10 мкс для каждого интервала:

function interval(){ 
var i=0 
intervalID= setInterval(function(){ 
    console.log("called",new Date().getTime()); 
    i++; 
    if(i>=10){ 
    clearInterval(intervalID); 
    } 
},10); 

} 
interval() 

Вы начинаете замечать разницу, когда компьютер работает медленнее или браузер работает медленнее.

Answer 3

Если вы делаете игру, следующий gameloop минимизирует проблему, что она работает с разной скоростью на разных компьютерах:

var loopTime = 33; // 1000ms/30fps (what we want) = 33ms per loop 
var startTime, endTime, executionTime; 

function gameLoop(){ 

    startTime = new Date().getTime(); 
    doGameMechanics(); 
    drawGame(); 
    endTime = new Date().getTime(); 
    executionTime = endTime - startTime; 

    if(executionTime < loopTime) { // we were faster than maximum allowed 
     // sleep the remaining time so the game does not go too fast 
     setTimeout(function(){ gameLoop(); }, loopTime - executionTime); 
    }else{ // we were slower than maximum allowed 
     setTimeout(function(){ gameLoop(); }, 0); 
    } 
} 

Вы должны иметь в виду, что ваша логика игры doGameMechanics() и рисование drawGame() принять некоторые время тоже. Это может привести к более медленному и более быстрому поведению на разных компьютерах.

В этой игре мы проверяем, как быстро они были выполнены. После измерения времени мы знаем, как долго мы должны ждать (используя setTimeout). Если мы были «слишком медленными», мы вызываем setTimeout с 0 миллисекундами в качестве второго параметра. Это необходимо, так что другие Threads (например, ввод пользователя) выполняются, потому что Javascript является однопоточным.