Question

我正在研究应该制作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>

Answer 1

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

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

甚至更好，使用不同的变量名称，这些名称将清楚地表明变量的意图。例如：

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

（我知道这看起来有点长，但这仅仅是一个例子;使用对你来说最重要的方法）。

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

1 个答案: