Почему этот результат вычисляется в NaN?

Question

var player = { 
    x : 10.0, 
    y : 10.0, 
    color : "blue", 
    v : 5.0, 
    size : 10, 
    render : function (c) { 
     c.fillStyle = this.color; 
     c.fillRect(Math.round(this.x), Math.round(this.y), this.size, this.size); 
    } 
}; 

function update(delta) { 
    player.x += player.v * (delta/1000); 
    console.log("px = " + player.x); 
} 

function mainLoop(timeStamp) { 
    delta = timeStamp - lastFrameTime; 
    lastFrameTime = timeStamp; 
    /* measure frame rate */ 
    curFps = Math.round((1/delta)*1000); 

    /* game logic */ 
    update(delta); 
    render(); 

    requestAnimationFrame(mainLoop); 
} 

Функция update() вызывается каждый кадр, когда необходимо обновить положение игрока. значение дельта ~ 16.00 (время в мс). Почему значение player.x отображается как NaN при печати?

Answer 1

Ваша первая итерация цикла не будет иметь lastFrameTime, инициализированной нулем, она будет не определена. Number - undefined = NaN. Объявить lastFrameTime в верхней части вашей программы, как 0:

var lastFrameTime = 0; 

Прямо сейчас это неявное глобальный, то есть, потому что вы никогда не определял его var, это случайная глобальная переменная, Javascript создает внутри цикла.

Answer 2

Моя догадка будет первый раз, когда код выполняется, lastFrameTime не определен, и поэтому дельта = метка времени - < неопределенными >, что приведет к дельта является NaN, которая будет приводить к player.x инкрементируется by NaN, превращая его в NaN, который он останется навсегда, так как мы продолжаем его увеличивать.

Я думаю, что ваше исправление либо инициализировать lastFrameTime, когда начинается ваш код (вероятно, к текущей метке времени), или изменить основной цикл константа выглядит

function mainLoop(timeStamp) { 
    delta = timeStamp - lastFrameTime; 
    lastFrameTime = timeStamp; 
    if (!isNaN(delta)) { 
     /* measure frame rate */ 
     curFps = Math.round((1/delta)*1000); 

     /* game logic */ 
     update(delta); 
     render(); 

     requestAnimationFrame(mainLoop); 
    } 
} 

Это будет пропускать первый, ошибочный, игровой цикл, где дельта NaN. Во втором прогоне lastFrameTime не будет неопределенным, дельта будет создана правильно, и все должно получиться.

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