Actualmente estoy tratando de crear un juego de tenis de mesa digital y tengo mucho en marcha hasta ahora, pero cada vez que ejecuto el programa, el bate del jugador que no es de IA (el rectángulo verde) no aparece. No parece estar allí en absoluto. ¿Hay algún error en mi código? También asegúrese de prestar atención principalmente a la parte inferior del código, donde se declara la función animate(). El resultado hasta ahora está aquí: https://Digital-Table-Tennis.programprodigy.repl.co . ¡AYUDA POR FAVOR!

 let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); canvas.width = innerWidth; canvas.height = innerHeight; let mouse = { x: null } window.onmousemove = e => { mouse.x = ex; } class Ball { constructor() { this.dx = Math.random() * 4 - 2; this.dy = Math.random() * 4 - 2; this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height; } draw() { ctx.fillStyle = 'orange'; ctx.beginPath(); ctx.arc(this.x, this.y, 10, 0, Math.PI * 2); ctx.fill(); } update() { this.x += this.dx; this.y += this.dy; if ( this.x >= mouse.x && this.x <= mouse.x + 50 && this.y >= canvas.height - 5 && this.y <= canvas.height ) { this.dx = -this.dx; this.dy = -this.dy; } if ( this.x <= 0 || this.x >= canvas.width || this.y <= 0 || this.y >= canvas.height ) { this.dx = -this.dx; this.dy = -this.dy; } this.draw(); } } let ball = new Ball(); class AI { constructor(lvl) { this.x = 0; this.color = 'red'; this.speed = lvl * 5; } draw() { ctx.fillStyle = this.color; ctx.fillRect(this.x, 0, 50, 5); } update() { if (ball.y < canvas.height / 2) { let distance = ball.x - this.x; this.x += distance / this.speed; } if ( ball.x >= this.x && ball.x <= this.x + 50 && ball.y >= 0 && ball.y <= 5 ) { ball.dx = -ball.dx; ball.dy = -ball.dy; } this.draw(); } } let ai_player = new AI(5); function animate() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'red'; ctx.fillRect(mouse.x - 25, canvas.height - 5, 50, 5); ball.update(); ai_player.update(); requestAnimationFrame(animate); } animate();