Soy bastante nuevo en Javascript y me encuentro con un problema que no puedo explicar. Dos variables que son números, e isNaN() devuelve falso para ambas, cuando se suman usando += el resultado devuelve isNaN() = verdadero. ¿Hay algún matiz que me estoy perdiendo aquí?
El código es para establecer fps en la velocidad de fotogramas en un juego de desplazamiento lateral. Estoy tratando de determinar por qué this.frameTimer += deltaTime equivale a isNaN() = true, donde las variables individualmente equivalen a false. El objetivo final es obtener un número válido para compararlo con otra variable. Gracias por tu ayuda.
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 se pasa al método de dibujo, en la clase Player, desde una función de animación en un módulo separado:
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) }Las variables para frameTimer, fps y frameInterval se establecen en una clase Player:
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 }Le falta la palabra clave this antes de .deltaTime, es posible que no se le haya dado un valor al parámetro y es por eso que está dando true , aquí hay un ejemplo:
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 }Tu error está aquí:
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) }