每次运行此代码时都会有不同的结果，为什么会这样？

I'm working on code that is supposed to make 10 balls different colors and bounce off of the walls, however i keep getting either one or two different colored balls when i run the code or it will work perfectly every 1/10 times. Any ideas why? Canvas Animation

我正在研究应该制作10个球不同颜色并从墙壁上反弹的代码,但是当我运行代码时我会不断获得一个或两个不同颜色的球,或者每1/10次它将完美运行。有什么想法吗?画布动画

<body>
<canvas id = "canvas" width="600"  height = "500"> </canvas>

<script>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var width = 300 //changes canvas size
var height = 400
width = canvas.width
height = canvas.height
    /* In this constructor, the starting position
    of the ball is set to this.x and this.y 
    */
var Ball = function () {
    this.x = Math.random() * canvas.width;
    this.y = Math.random() * canvas.height;
    this.xSpeed = -2; // -2 means 2 pixels left for every step of animation.
    this.ySpeed = 3;
    var circle = function (x, y, radius, color, fill) { //function to make drawing circles faster
            ctx.strokeStyle = color
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2, false);
            if (fill === true) {
                ctx.fillStyle = color;
                ctx.fill()
            }
            ctx.stroke();
        }
        // The Ball maker
    x = Math.floor(Math.random() * 10)
    myColors = ["Green", "Red", "Orange", "Yellow", "Chocolate", "Brown", "Silver", "Black", "Purple", "Blue"]
    Ball.prototype.draw = function () {
        circle(this.x, this.y, 3, myColors[x], true)
    };
    // this will move the balls

    Ball.prototype.move = function () {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    };

    Ball.prototype.checkCollision = function () { //makes the balls bounce off walls
        if (this.x < 0 || this.x > width) {
            this.xSpeed = -this.xSpeed;
        }
        if (this.y < 0 || this.y > height) {
            this.ySpeed = -this.ySpeed;
        }
    }
}
var moBalls = [] //stores balls to be called later
for (var x = 0; x < 10; x++) {
    moBalls[x] = new Ball()
}
width = canvas.width
height = canvas.height
setInterval(function () {
    ctx.clearRect(0, 0, width, height);
    for (x = 0; x < 10; x++) { //takes the balls from moBalls and moves the ten of them
        moBalls[x].draw()
        moBalls[x].move()
        moBalls[x].checkCollision();
    }
    ctx.lineWidth = 4
    ctx.strokeRect(0, 0, width, height); //makes the walls
}, 30);

</script>

</body>
</html>

1 个解决方案

#1

I'm pretty sure it's because you're using using the variable x in multiple places without using the var keyword (as @pointy said, you aren't declaring it).

我很确定这是因为你在不使用var关键字的情况下在多个地方使用变量x(正如@pointy所说,你没有声明它)。

Use var x where you generate the random number which chooses the colour from the array, and also in your for loop where you call the draw method.

使用var x生成随机数,从数组中选择颜色,也可以在for循环中调用draw方法。

Or even better, use different variables names, ones that will make it clear what the intent of the variable is. For example:

或者更好的是,使用不同的变量名称,这些名称将清楚地表明变量的意图。例如:

var randomColorIndex = Math.floor(Math.random() * 10)
var myColors = ["Green", "...", "Blue"]
Ball.prototype.draw = function () {
    circle(this.x, this.y, 3, myColors[randomColorIndex], true)
};

(I know that seems a bit long, but it's just an example; use whatever means the most to you).

(我知道这似乎有点长,但它只是一个例子;对你使用最多的方法)。

#1