Question

我一直在尝试在HTML文件中使用Javascript中的Ball类。看看我的代码，看看我的挂机是什么。我看到人们同时使用function和class来完成此操作，但我似乎无法将其发挥作用。我觉得我做的更多的是C ++风格而不是Javascript。有什么建议吗？

    class Ball {
            constructor(x, y, radius, dx, dy) {
                this.x      = x;
                this.y      = y;
                this.radius = radius;
                this.dx     = dx;
                this.dy     = dy;
                }

            get X() {
                return this.x;
                }

            get Y() {
                return this.y;
                }

            get Radius() {
                return this.radius;
                }

            get Dx() {
                return this.dx;
                }

            get Dy() {
                return this.dy;
                }

            drawBall() {
                ctx.beginPath();
                ctx.arc(get X(), get Y(), get Radius(), 0, Math.PI*2);
                ctx.fillStyle() = "black";
                ctx.fill();
                ctx.closePath();
                }

        };

    var Ball1 = new Ball(canvas.width/2, canvas.height-30, 10, 2, -2);

        function drawBall() {
            ctx.beginPath();
            ctx.arc(get X(), get Y(), get Radius(), 0, Math.PI*2);
            ctx.fillStyle = "blue";
            ctx.fill();
            ctx.closePath();
        }

function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBall();
        drawBall2();

        if((Ball1.get X() + Ball1.get Dx()) > canvas.width-Ball1.get Radius() || (Ball1.get X() + Ball1.get Dx()) < Ball1.get Radius()) {
            Ball1.set Dx(-(Ball1.get Dx()));
        }
        if(Ball1.get Y() + Ball1.get Dy() > canvas.height-Ball1.get Radius() || y + dy < ballRadius) {
            dy = -dy;
        }
        if(x2 + dx2 > canvas.width-ballRadius || x2 + dx2 < ballRadius) {
            dx2 = -dx2;
        }
        if(y2 + dy2 > canvas.height-ballRadius || y2 + dy2 < ballRadius) {
            dy2 = -dy2;
        }

        x += dx;
        y += dy;
        x2 += dx2;
        y2 += dy2;

    }

我知道我的代码中存在差异，例如不匹配的内容，但我不认为我走在正确的轨道上。提前谢谢！

修改<！/强> 这是我开始使用的代码到目前为止：

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>My Game</title> <style> * { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; } </style> </head> <body> <canvas id="myCanvas" width="600" height="580"></canvas> <script> //Javascript goes here var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var ballRadius = 10; //ball 1 var x = canvas.width/2; var y = canvas.height-30; var dx = 2; var dy = -2; //ball 2 var x2 = canvas.width/3; var y2 = canvas.height-30; var dy2 = -4; var dx2 = 4; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI*2); ctx.fillStyle = "blue"; ctx.fill(); ctx.closePath(); } function drawBall2() { ctx.beginPath(); ctx.arc(x2, y2, ballRadius, 0, Math.PI*2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); drawBall(); drawBall2(); if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { dx = -dx; } if(y + dy > canvas.width-ballRadius || y + dy < ballRadius) { dy = -dy; } if(x2 + dx2 > canvas.width-ballRadius || x2 + dx2 < ballRadius) { dx2 = -dx2; } if(y2 + dy2 > canvas.height-ballRadius || y2 + dy2 < ballRadius) { dy2 = -dy2; } x += dx; y += dy; x2 += dx2; y2 += dy2; } setInterval(draw, 10); </script> </body> </html>

Answer 1

我修改了你的代码只是为了给你一个想法。这仍然不是一个非常好的代码设计。该示例仅适用于现代浏览器，因为您使用类等es6功能。我认为你应该先从一些javascript基础知识开始。

"use strict";

class Ball {
  constructor(x, y, radius, dx, dy) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    this.dx = dx;
    this.dy = dy;
  }

  get X() {
    return this.x;
  }

  get Y() {
    return this.y;
  }

  get Radius() {
    return this.radius;
  }

  get Dx() {
    return this.dx;
  }

  get Dy() {
    return this.dy;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.X, this.Y, this.Radius, 0, Math.PI * 2);
    ctx.fillStyle = "black";
    ctx.stroke();
  }
};

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var Ball1 = new Ball(canvas.width / 2, canvas.height - 30, 10, 2, -2);
Ball1.draw(ctx);

<canvas id="myCanvas" width="200" height="200"></canvas>

简单的Javascript

  var canvas = document.getElementById("my-canvas");
  var ctx = canvas.getContext("2d");

  function drawBall(ctx, x, y, r) {
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.fillStyle = "black";
    ctx.stroke();
  }


  drawBall(ctx, canvas.width / 2, canvas.height - 30, 10, 2, -2);

Javascript Ball Class？ - 编辑

1 个答案: