加号等于两个变量返回 isNan( ) = true 当变量本身返回 isNan() = false - 已编辑

Question

I'm fairly new to Javascript and I'm running into an issue I can't explain. Two variables that are numbers, and isNaN() returns false for both, when added together using += the result is returning isNaN() = true. Is there some nuance that I'm missing here?

The code is to set fps on frame rate in a side-scrolling game. I'm trying to determine why this.frameTimer += deltaTime is equating to isNaN() = true, where the variables individually are equating to false. The end goal is to get a valid number to compare against another variable. Thanks for your help.

draw(context,deltaTime) {     
   if (this.frameTimer > this.frameInterval) {
       if (this.FrameX < this.maxFrame) { this.FrameX++
       this.frameTimer = 0 }
       else this.frameX = 0
   } else {
        this.frameTimer // isNaN(this.frameTimer) returns false
        deltaTime // isNaN(deltaTime) returns false
        this.frameTimer += deltaTime // isNaN(this.frameTimer) returns true
   }
   context.drawImage(this.image, this.width * this.frameX, this.height * this.frameY, this.width, this.height, this.x, this.y, this.width, this.height)
}

deltaTime is passed to the draw method, under the Player class, from an animate function in a separate module:

function animate(timeStamp) {
    const deltaTime = timeStamp - lastTime
    lastTime = timeStamp
    ctx.clearRect(0,0,canvas.width, canvas.height)
    gameObjects.forEach(object => {
        object.update()
        object.draw()
    })  
    player.update(input.lastKey)
    player.draw(ctx, deltaTime)
    drawStatusText(ctx, input, player)
    requestAnimationFrame(animate)
    
}

The variables for frameTimer, fps and frameInterval are set in a Player class:

export class Player {
constructor(gameWidth, gameHeight) {
    this.gameWidth = gameWidth - 200
    this.gameHeight = gameHeight
    this.states = [new StandingLeft(this), new StandingRight(this), new SittingLeft(this), new SittingRight(this), new RunningLeft(this), new RunningRight(this), new JumpingLeft(this), new JumpingRight(this), new FallingLeft(this), new FallingRight(this)]
    this.currentState = this.states[1]
    this.image = document.getElementById("player")
    this.width = 100
    this.height = 104
    this.x = this.gameWidth/2 - this.width/2
    this.y = gameHeight - this.height - 25
    this.vy = 0 
    this.weight = 0.5
    this.frameX = 0
    this.frameY = 0
    this.maxFrame = 0
    this.speed = 0
    this.maxSpeed = 5
    this.fps = 15
    this.frameTimer = 0
    this.frameInterval = 1000/this.fps
}

Answer 1

You are missing keyword this before .deltaTime, the parameter may not have been given a value and thats why its giving true , here is an expample:

draw(a, b){
        console.log(isNaN(b)) //Return true if b is left without value
        console.log(isNaN(this.c)) //Returns true if this.c is undefined too
    }

Your mistake is right here:

draw(context,deltaTime) {     
   if (this.frameTimer > this.frameInterval) {
       if (this.FrameX < this.maxFrame) { this.FrameX++
       this.frameTimer = 0 }
       else this.frameX = 0
   } else {
        this.frameTimer // isNaN(this.frameTimer) returns false
        this.deltaTime // isNaN(this.deltaTime) returns false
        this.frameTimer += ------> deltaTime <-------// isNaN(this.frameTimer)returns true
   }
   context.drawImage(this.image, this.width * this.frameX, this.height * this.frameY, this.width, this.height, this.x, this.y, this.width, this.height)
}