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
}
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)
}