أحاول إنشاء لعبة Pong باستخدام عنصر قماش HTML. لقد قمت بالفعل بتحريك الكرة المرتدة عن الجدران، لكنني عالق في كيفية إضافة المجداف. ما أريده هو مستطيل أوسع قليلاً من الكرة. عندما يقوم المستخدم بتحريك الماوس الخاص به إلى اليسار أو اليمين، يجب أن يتحرك المجداف معه دون الحاجة إلى النقر فوق أي شيء. إليك ما لدي حتى الآن:

<النص البرمجي>
    فئة كذاب قماش {
        منشئ (وسائط) {
            Object.sign(this, args);
            this.canvas = document.getElementById(this.canvas_id);
            this.ball_x = this.ball_y = this.ball_radius;

            window.requestAnimationFrame(this.draw);
        }

        checkForBounce = () => {
            إذا (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;
            }

            إذا (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;
            }
        }

        رسم = () => {
            دع ctx = this.canvas.getContext("2d");

            ctx.fillStyle = "أزرق";
            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

            ctx.fillStyle = "أخضر";
            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>
أحاول إنشاء لعبة Pong باستخدام عنصر قماش HTML. لقد قمت بالفعل بتحريك الكرة المرتدة عن الجدران، لكنني عالق في كيفية إضافة المجداف. ما أريده هو مستطيل أوسع قليلاً من الكرة. عندما يقوم المستخدم بتحريك الماوس الخاص به إلى اليسار أو اليمين، يجب أن يتحرك المجداف معه دون الحاجة إلى النقر فوق أي شيء. إليك ما لدي حتى الآن:

<النص البرمجي>
    فئة كذاب قماش {
        منشئ (وسائط) {
            Object.sign(this, args);
            this.canvas = document.getElementById(this.canvas_id);
            this.ball_x = this.ball_y = this.ball_radius;

            window.requestAnimationFrame(this.draw);
        }

        checkForBounce = () => {
            إذا (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;
            }

            إذا (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;
            }
        }

        رسم = () => {
            دع ctx = this.canvas.getContext("2d");

            ctx.fillStyle = "أزرق";
            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

            ctx.fillStyle = "أخضر";
            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>
user
بالتأكيد! يمكنك القيام بذلك عن طريق إضافة مستمع حدث إلى عنصر اللوحة القماشية الذي سيتم تنشيطه في كل مرة يتحرك فيها ماوس المستخدم. بعد ذلك، يمكنك تخزين موضع الماوس الحالي من الحدث في متغير مثيل، واستخدام ذلك لرسم المجداف. إليك الإصدار الجديد من الكود:

  <النص البرمجي>
    فئة كذاب قماش {
        منشئ (وسائط) {
            Object.sign(this, 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 = () => {
            إذا (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;
            }

            إذا (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;
            }
        }

        رسم = () => {
            دع ctx = this.canvas.getContext("2d");

            // ارسم خلفية قماشية فارغة على الإطار الأخير
            ctx.fillStyle = "أزرق";
            ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

            // ارسم المجداف في موقع الماوس الحالي
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.fillStyle = 'أسود';
            ctx.fillRect(this.paddle_x - this.paddle_width/2, this.canvas.height - this.paddle_height, this.paddle_width, this.paddle_height);

            // حرك الكرة ثم ارسمها
            this.ball_x += this.x_movement_rate;
            this.ball_y += this.y_movement_rate;

            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.fillStyle = "أخضر";
            ctx.arc(this.ball_x, this.ball_y, this.ball_radius, 0, 2 * Math.PI);
            ctx.fill();

            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>
assistant