const canvas = document.querySelector('#canvas') const context = canvas.getContext('2d') let rectX = 0 ; let rectY = 0; let secondsPassed = 0; let timeStamp = 0 let oldTimeStamp = 0; let movingSpeed = 50; gameLoop() function draw() { context.fillStyle = 'red'; context.fillRect(rectX, rectY, 150, 100); } function gameLoop(timeStamp) { // Calculate how much time has passed secondsPassed = (timeStamp - oldTimeStamp) / 1000; oldTimeStamp = timeStamp; update(secondsPassed); draw(); window.requestAnimationFrame(gameLoop); } function update(secondsPassed) { rectX += (movingSpeed * secondsPassed); rectY += (movingSpeed * secondsPassed); }rectX y rectY inicialmente tienen un valor numérico, la velocidad de movimiento también tiene un valor numérico, también los segundos pasados. Mi pregunta es ¿por qué la función "actualizar" da NaN a las variables rectX y rectY? No se muestran errores en la consola. Traté de iniciar sesión y usé typeof para verificar si cada variable tenía un valor con un número de tipo y noté que rectX alguna vez se consideró una cadena, traté de parseFloat the rectX pero aún así me estaba dando NaN. Normalmente, usamos timeStamp para devolver un valor que puede ayudarnos a calcular los fps. En este caso, estoy usando timeStamp para ver cuántos segundos han pasado antes de ejecutar la función gameLoop. Estoy haciendo esto porque ya no es la velocidad de fotogramas (y el hardware) lo que decide la velocidad del juego, sino que es el momento.
Actualización: se soluciona gracias a @epascarello, @James y @Kaiido. Ahí está el código actualizado para ustedes:
const canvas = document.querySelector('#canvas') const context = canvas.getContext('2d') let rectX = 0; let rectY = 0; let secondsPassed = 0; let oldTimeStamp = 0; let timeStamp = 0 let movingSpeed = 50; let timePassed = 0 function draw() { context.fillStyle = 'red'; context.fillRect(rectX, rectY, 150, 100); } function gameLoop(timeStamp) { // Calculate how much time has passed secondsPassed = (timeStamp - oldTimeStamp) / 1000; oldTimeStamp = timeStamp; // Pass the time to the update update(secondsPassed); draw(); window.requestAnimationFrame(function(timeStamp){gameLoop(timeStamp)}); } function update(secondsPassed) { // Use time to calculate new position rectX += (movingSpeed * secondsPassed); rectY += (movingSpeed * secondsPassed); } window.requestAnimationFrame(function(timeStamp){gameLoop(timeStamp)});tu problema es let rectX; en la línea 3 crea un "indefinido"
si usa rectX += 1 js intenta agregar indefinido + 1 (conversión automática de cadenas de indefinido)
picadura + int = NaN
let rectX = 0; let rectY = 0; let speed = 1; function update(seconds){ rectX += (speed * seconds); rectY += (speed * seconds); } // test: update(5); console.log(rectX, rectY); // output is 5 5El problema es que no está pasando timeStamp a la función gameLoop cuando la llama inicialmente. dentro de gameLoop, timeStamp no está definido, lo que rompe las otras variables.
Puede pasar la marca de tiempo actual cuando lo llame por primera vez. En lugar de gameLoop() intente
gameLoop(Date.now().getTime())iniciar la variable rectX y rectY podría ayudar.
prueba esto:
rectX = 0; rectY = 0;