Javascript球类编辑_Javascript_Html_C++_Function_Class

Javascript球类编辑

javascript html c++ function class

Javascript球类编辑,javascript,html,c++,function,class,Javascript,Html,C++,Function,Class,我一直在尝试在HTML文件中的Javascript中创建一个Ball类。查看我的代码，看看我的挂断是什么。我见过人们同时使用函数和类来实现这一点，但我似乎无法实现这一点。我觉得我做的是C++风格而不是JavaScript。有什么建议吗 class Ball { constructor(x, y, radius, dx, dy) { this.x = x; this.y = y;

我一直在尝试在HTML文件中的Javascript中创建一个Ball类。查看我的代码，看看我的挂断是什么。我见过人们同时使用

函数

和

类

来实现这一点，但我似乎无法实现这一点。我觉得我做的是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;

    }

班级舞会{
构造函数（x，y，半径，dx，dy）{
这个.x=x；
这个。y=y；
这个半径=半径；
this.dx=dx；
this.dy=dy；
}
得到X（）{
归还这个.x；
}
得到Y（）{
把这个还给我；
}
获取半径（）{
返回这个.radius；
}
获取Dx（）{
返回此.dx；
}
得到Dy（）{
把这个还给我；
}
塔威尔（）{
ctx.beginPath（）；
弧（得到X（），得到Y（），得到半径（），0，数学PI*2）；
ctx.fillStyle（）=“黑色”；
ctx.fill（）；
ctx.closePath（）；
}
};
var Ball1=新球（canvas.width/2，canvas.height-30,10,2，-2）；
函数{
ctx.beginPath（）；
弧（得到X（），得到Y（），得到半径（），0，数学PI*2）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
ctx.closePath（）；
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
牵引杆（）；
牵引杆2（）；
如果（（Ball1.get X（）+Ball1.get Dx（））>canvas.width-Ball1.get Radius（）| |（Ball1.get X（）+Ball1.get Dx（））canvas.height-Ball1.get Radius（）| | Y+Dycanvas.width-ballRadius | | x2+dx2canvas.height-ballRadius | | 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>


我的游戏
*{填充：0；边距：0；}
画布{背景：#eee；显示：块；边距：0自动；}
//Javascript就在这里
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var-ballRadius=10；
//球1
var x=canvas.width/2；
变量y=画布高度-30；
var-dx=2；
var-dy=-2；
//球2
var x2=画布宽度/3；
变量y2=画布高度-30；
var-dy2=-4；
var dx2=4；
函数{
ctx.beginPath（）；
弧（x，y，球半径，0，数学PI*2）；
ctx.fillStyle=“蓝色”；
ctx.fill（）；
ctx.closePath（）；
}
函数2（）{
ctx.beginPath（）；
ctx.弧（x2，y2，球半径，0，数学PI*2）；
ctx.fillStyle=“红色”；
ctx.fill（）；
ctx.closePath（）；
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
牵引杆（）；
牵引杆2（）；
如果（x+dx>canvas.width-ballRadius | | x+dxcanvas.width-ballRadius | | y+dycanvas.width-ballRadius | | x2+dx2canvas.height-ballRadius | | y2+dy2
我对你的代码做了一点修改，只是想给你一个想法。这仍然不是一个很好的代码设计。该示例仅适用于现代浏览器，因为您使用es6功能，如类。我认为您应该首先从一些javascript基础知识开始

“严格使用”；
班级舞会{
构造函数（x，y，半径，dx，dy）{
这个.x=x；
这个。y=y；
这个半径=半径；
this.dx=dx；
this.dy=dy；
}
得到X（）{
归还这个.x；
}
得到Y（）{
把这个还给我；
}
获取半径（）{
返回这个.radius；
}
获取Dx（）{
返回此.dx；
}
得到Dy（）{
把这个还给我；
}
抽签（ctx）{
ctx.beginPath（）；
ctx.arc（this.X，this.Y，this.Radius，0，Math.PI*2）；
ctx.fillStyle=“黑色”；
ctx.stroke（）；
}
};
var canvas=document.getElementById（“myCanvas”）；
var ctx=canvas.getContext（“2d”）；
var Ball1=新球（canvas.width/2，canvas.height-30,10,2，-2）；
球1.抽签（ctx）
一件事。如果您定义像get Dx（）这样的属性。你必须像属性一样调用它们。Ball1.Dx。ctx从哪里来？看起来您在使用es6 javascript时遇到了问题。ctx
来自这里的代码：var canvas=document.getElementById（“myCanvas”）；var ctx=canvas.getContext（“2d”）@Tylersong55运行代码时会发生什么？你会犯什么错误？或者它只是“感觉它不起作用了”？除了一个有画布的空白屏幕之外，什么也不会发生。之前我让它带着两个球运行，它们会从边界反弹出来，但是因为加入了类声明，所以它不起作用。变量是单独生成的，而不是第一次运行时就在类中。这个类的所有脚本是在html的主体中还是在头部？我试着在浏览器中运行这些代码，但没有任何改变。我应该怎么做才能开始做这件事？这不是一门课吗？有临时工吗