I'm trying to make a Pong game using the HTML canvas element. I already animated the ball bouncing off the walls, but I'm stuck on how to add the paddle. What I want is a rectangle that's a little wider than the ball. When the user moves their mouse left or right, the paddle should move with it without them having to click anything. Here's what I have so far:

<script>
    class BouncingCanvas {
        constructor(args) {
            Object.assign(this, args);
            this.canvas = document.getElementById(this.canvas_id);
            this.ball_x = this.ball_y = this.ball_radius;

            window.requestAnimationFrame(this.draw);
        }

        checkForBounce = () => {
            if (this.ball_x + this.ball_radius >= this.canvas.width || this.ball_x - this.ball_radius <= 0) {
                this.x_movement_rate = this.x_movement_rate * -1;
            }

            if (this.ball_y + this.ball_radius >= this.canvas.height || this.ball_y - this.ball_radius <= 0) {
                this.y_movement_rate = this.y_movement_rate * -1;
            }
        }

        draw = () => {
            let ctx = this.canvas.getContext("2d");

            ctx.fillStyle = "blue";
            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

            ctx.fillStyle = "green";
            ctx.translate(this.x_movement_rate, this.y_movement_rate);

            ctx.beginPath();
            ctx.arc(this.ball_radius, this.ball_radius, this.ball_radius, 0, 2 * Math.PI);
            ctx.fill();

            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            this.checkForBounce();

            window.requestAnimationFrame(this.draw);
        }
    }

    bc = new BouncingCanvas({'canvas_id': 'animation_canvas', 'ball_radius': 50, 'x_movement_rate': 4, 'y_movement_rate': 3});
  </script>
system
Estou tentando fazer um jogo de pong usando o elemento HTML Canvas.Eu já animei a bola pulando das paredes, mas estou preso em como adicionar a raquete.O que eu quero é um retângulo um pouco mais largo que a bola.Quando o usuário move o mouse para a esquerda ou para a direita, a raquete deve se mover com ele sem que eles tenham que clicar em qualquer coisa.Aqui está o que tenho até agora:

<Cript>
    classe BouncingCanvas {
        construtor (args) {
            Object.assign (isto, args);
            this.canvas = document.getElementById (this.canvas_id);
            this.ball_x = this.ball_y = this.ball_radius;

            window.requestanimationframe (this.draw);
        }

        checkForBounce = () => {
            if (this.ball_x + this.ball_radius> = this.canvas.width || this.ball_x - this.ball_radius <= 0) {
                this.x_movement_rate = this.x_movement_rate * -1;
            }

            if (this.ball_y + this.ball_radius> = this.canvas.Height || this.ball_y - this.ball_radius <= 0) {
                this.y_movement_rate = this.y_movement_rate * -1;
            }
        }

        draw = () => {
            Seja ctx = this.canvas.getContext ("2d");

            ctx.fillstyle = "azul";
            ctx.FillRect (0, 0, this.Canvas.Width, this.Canvas.Height);

            ctx.fillstyle = "verde";
            ctx.Translate (this.x_movement_rate, this.y_movement_rate);

            ctx.BeginPath ();
            ctx.arc (this.ball_radius, this.ball_radius, this.ball_radius, 0, 2 * math.pi);
            ctx.fill ();

            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            this.checkforbounce ();

            window.requestanimationframe (this.draw);
        }
    }

    bc = novo bouncingCanvas ({'canvas_id': 'animation_canvas', 'ball_radius': 50, 'x_movement_rate': 4, 'y_movement_rate': 3});
  </script>
user
Claro!Você pode fazer isso adicionando um ouvinte de evento ao elemento de tela que dispara sempre que o mouse do usuário se move.Em seguida, você pode armazenar a posição atual do mouse a partir do evento em uma variável de instância e usá -la para desenhar o paddle.Aqui está a nova versão do código:

  <Cript>
    classe BouncingCanvas {
        construtor (args) {
            Object.assign (isto, args);
            this.canvas = document.getElementById (this.canvas_id);
            this.Canvas.adDeventListener ('mousemove', (e) => {this.paddle_x = e.clientX;}, false);

            this.ball_x = this.ball_y = this.ball_radius;

            this.paddle_width = this.ball_radius * 4;
            this.paddle_height = 40;
            this.paddle_x = this.paddle_width / 2;

            window.requestanimationframe (this.draw);
        }

        checkForBounce = () => {
            if (this.ball_x + this.ball_radius> = this.canvas.width || this.ball_x - this.ball_radius <= 0) {
                this.x_movement_rate = this.x_movement_rate * -1;
            }

            if (this.ball_y + this.ball_radius> = this.canvas.Height - this.paddle_height || this.ball_y - this.ball_radius <= 0) {
                this.y_movement_rate = this.y_movement_rate * -1;
            }
        }

        draw = () => {
            Seja ctx = this.canvas.getContext ("2d");

            // Desenhe um fundo de tela em branco sobre o último quadro
            ctx.fillstyle = "azul";
            ctx.FillRect (0, 0, this.Canvas.Width, this.Canvas.Height);

            // Desenhe a raquete no local atual do mouse
            ctx.BeginPath ();
            ctx.moveto (0, 0);
            ctx.fillstyle = 'preto';
            ctx.fillrect (this.paddle_x - this.paddle_width/2, this.canvas.height - this.paddle_height, this.paddle_width, this.paddle_height);

            // mova a bola e depois desenhe -a
            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            ctx.BeginPath ();
            ctx.moveto (0, 0);
            ctx.fillstyle = "verde";
            ctx.arc (this.ball_x, this.ball_y, this.ball_radius, 0, 2 * math.pi);
            ctx.fill ();

            this.checkforbounce ();

            window.requestanimationframe (this.draw);
        }
    }

    bc = novo bouncingCanvas ({'canvas_id': 'animation_canvas', 'ball_radius': 50, 'x_movement_rate': 4, 'y_movement_rate': 3});
  </script>
assistant
<|system|>
</s>
<|user|>
Estou tentando fazer um jogo de pong usando o elemento HTML Canvas.Eu já animei a bola pulando das paredes, mas estou preso em como adicionar a raquete.O que eu quero é um retângulo um pouco mais largo que a bola.Quando o usuário move o mouse para a esquerda ou para a direita, a raquete deve se mover com ele sem que eles tenham que clicar em qualquer coisa.Aqui está o que tenho até agora:

<Cript>
    classe BouncingCanvas {
        construtor (args) {
            Object.assign (isto, args);
            this.canvas = document.getElementById (this.canvas_id);
            this.ball_x = this.ball_y = this.ball_radius;

            window.requestanimationframe (this.draw);
        }

        checkForBounce = () => {
            if (this.ball_x + this.ball_radius> = this.canvas.width || this.ball_x - this.ball_radius <= 0) {
                this.x_movement_rate = this.x_movement_rate * -1;
            }

            if (this.ball_y + this.ball_radius> = this.canvas.Height || this.ball_y - this.ball_radius <= 0) {
                this.y_movement_rate = this.y_movement_rate * -1;
            }
        }

        draw = () => {
            Seja ctx = this.canvas.getContext ("2d");

            ctx.fillstyle = "azul";
            ctx.FillRect (0, 0, this.Canvas.Width, this.Canvas.Height);

            ctx.fillstyle = "verde";
            ctx.Translate (this.x_movement_rate, this.y_movement_rate);

            ctx.BeginPath ();
            ctx.arc (this.ball_radius, this.ball_radius, this.ball_radius, 0, 2 * math.pi);
            ctx.fill ();

            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            this.checkforbounce ();

            window.requestanimationframe (this.draw);
        }
    }

    bc = novo bouncingCanvas ({'canvas_id': 'animation_canvas', 'ball_radius': 50, 'x_movement_rate': 4, 'y_movement_rate': 3});
  </script></s>
<|assistant|>
Claro!Você pode fazer isso adicionando um ouvinte de evento ao elemento de tela que dispara sempre que o mouse do usuário se move.Em seguida, você pode armazenar a posição atual do mouse a partir do evento em uma variável de instância e usá -la para desenhar o paddle.Aqui está a nova versão do código:

  <Cript>
    classe BouncingCanvas {
        construtor (args) {
            Object.assign (isto, args);
            this.canvas = document.getElementById (this.canvas_id);
            this.Canvas.adDeventListener ('mousemove', (e) => {this.paddle_x = e.clientX;}, false);

            this.ball_x = this.ball_y = this.ball_radius;

            this.paddle_width = this.ball_radius * 4;
            this.paddle_height = 40;
            this.paddle_x = this.paddle_width / 2;

            window.requestanimationframe (this.draw);
        }

        checkForBounce = () => {
            if (this.ball_x + this.ball_radius> = this.canvas.width || this.ball_x - this.ball_radius <= 0) {
                this.x_movement_rate = this.x_movement_rate * -1;
            }

            if (this.ball_y + this.ball_radius> = this.canvas.Height - this.paddle_height || this.ball_y - this.ball_radius <= 0) {
                this.y_movement_rate = this.y_movement_rate * -1;
            }
        }

        draw = () => {
            Seja ctx = this.canvas.getContext ("2d");

            // Desenhe um fundo de tela em branco sobre o último quadro
            ctx.fillstyle = "azul";
            ctx.FillRect (0, 0, this.Canvas.Width, this.Canvas.Height);

            // Desenhe a raquete no local atual do mouse
            ctx.BeginPath ();
            ctx.moveto (0, 0);
            ctx.fillstyle = 'preto';
            ctx.fillrect (this.paddle_x - this.paddle_width/2, this.canvas.height - this.paddle_height, this.paddle_width, this.paddle_height);

            // mova a bola e depois desenhe -a
            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            ctx.BeginPath ();
            ctx.moveto (0, 0);
            ctx.fillstyle = "verde";
            ctx.arc (this.ball_x, this.ball_y, this.ball_radius, 0, 2 * math.pi);
            ctx.fill ();

            this.checkforbounce ();

            window.requestanimationframe (this.draw);
        }
    }

    bc = novo bouncingCanvas ({'canvas_id': 'animation_canvas', 'ball_radius': 50, 'x_movement_rate': 4, 'y_movement_rate': 3});
  </script></s>
