Es mi primera pregunta aquí. Acabo de aprender lienzo en JavaScript y encontré un problema al agregar la velocidad. Quiero detener el rectángulo si su x excede el ancho del lienzo. Solo soy un principiante, así que por favor ayúdame.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #canvas{ border: 1px solid black; } </style> </head> <body> <canvas id="canvas" width="400" height="400">Your browser doesn't support canvas</canvas> <script> var canvas = document.getElementById('canvas'); var cnxt = canvas.getContext('2d'); x = 0; y = 50; var t; function draw(){ cnxt.clearRect(0,0,400,400); cnxt.beginPath(); cnxt.rect(x,y,25,25); cnxt.fillStyle = 'red'; cnxt.fill(); var timePassed = (performance.now()-t)/1000; var fps = Math.round(1/ timePassed); let speed = 100; cnxt.font = '25px Arial'; cnxt.fillStyle = 'black'; cnxt.fillText("FPS: " + fps, 20,30); t = performance.now(); x += (speed * timePassed); if (x >= 400 - 25){ speed = 0; } window.requestAnimationFrame(draw); } draw(); </script> </body> </html>