Переменная конструктора Javascript NAN внутри функции

Question

Я попытался проследить все возможности того, что происходит, но я изучаю Javascript, поэтому это должно быть то, что я просто не знаю. Конкретная проблема заключается в конструкторе/функции pongGame; однако, я включил весь мой код просто в том, что это необходимо. Я бы предположил, что внутри моей функции gameLoop, объявленной в конструкторе pongGame, переменная pongGame.delta будет равна 10; Ибо я так и объявил. Однако он равен NaN. Что конкретно происходит в этой ситуации? Спасибо :)

var keys = [false, false, false, false]; 
var cavnas = document.getElementById("canvas"); 
var context = cavnas.getContext("2d"); 
(function() { 
    startUp(); 
})(); 

function startUp() { 
    resize(); 
    window.addEventListener("resize", resize); 
    var game = new pongGame(); 
    game.start(); 
} 

function resize() { 
    document.getElementById("canvas").width = window.innerWidth; 
    document.getElementById("canvas").height = window.innerHeight; 
} 

function pongGame() { 

    this.delta = 10; 
    this.lastTime = 0; 
    this.ball = new ball(); 
    this.start = function() { 
    this.gameLoop(); 
    } 
    this.update = function() { 
    this.ball.update(); 
    } 
    this.render = function() { 
    context.clearRect(0, 0, window.innerWidth, window.innerHeight); 
    this.ball.render(); 
    } 

    var pongGame = this; 
    this.gameLoop = function(timestamp) { 
    console.log(pongGame.delta);  // 10 
    pongGame.delta += timestamp - pongGame.lastTime; 
    while (pongGame.delta > (1000/60)) { 
     pongGame.update(); 
     pongGame.delta -= (1000/60); 
    } 
    pongGame.render(); 
    pongGame.lastTime = timestamp; 
    requestAnimationFrame(pongGame.gameLoop); 
    } 

} 

function paddle() { 

} 

function ball() { 
    this.x = 1; 
    this.y = 1; 
    this.xspeed = 1; 
    this.yspeed = 1; 
    this.size = 10; 
    this.update = function() { 
    if (this.x == 0 || this.x == window.innerWidth - this.size) { 
     this.xspeed = -this.xspeed; 
    } 
    if (this.y == 0 || this.y == window.innerHeight - this.size) { 
     this.yspeed = -this.yspeed; 
    } 
    this.x += this.xspeed; 
    this.y += this.yspeed; 
    } 
    this.render = function() { 
    context.beginPath(); 
    context.arc(this.x, this.y, this.size, 0, Math.PI * 2); 
    context.fill(); 
    } 
} 

Answer 1

Первый раз, когда вы звоните gameLoop вы не сдадите метку времени, так это выражение pongGame.delta += timestamp - pongGame.lastTime; наборы delta к NAN в первый раз его бегала, а затем все последующие пробеги (которые имеют метку времени) с момента его уже NAN ,
Может назвать это с 0 в первый раз

this.start = function() { 
    this.gameLoop(0); 
}