每次运行这段代码我都会得到不同的结果，怎么会？答案

【问题标题】：I have different results every time i run this code, how come?每次运行这段代码我都会得到不同的结果，怎么会？
【发布时间】：2016-05-05 13:05:41
【问题描述】：

我正在编写代码，该代码应该使 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>

【问题讨论】：

没有得到你所期望的和你得到的。能举个例子吗？
在可能的其他问题中，您需要在您使用它的所有函数中声明变量x。您将它当作局部变量使用，但它是全局变量。此外，在构造函数内部设置构造函数原型几乎肯定不是正确的做法。

标签： javascript canvas draw move

【解决方案1】：

我很确定这是因为您在多个地方使用了变量 x 而没有使用 var 关键字（正如 @pointy 所说，您没有声明它）。

使用var x 生成从数组中选择颜色的随机数，并在调用draw 方法的for 循环中使用。

或者更好的是，使用不同的变量名称，这些名称可以清楚地表明变量的意图是什么。例如：

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

（我知道这似乎有点长，但这只是一个例子；使用对你最重要的东西）。

【讨论】：