Question

我写了一个javascript代码，当在画布上点击时多次掉球。这是一个实验这是代码：
HTML

<br style="clear: both" />
<canvas id="myCanvas1" width="134px" height="331px" onclick="draw(0)"></canvas>
<canvas id="myCanvas2" width="134px" height="331px" onclick="draw(1)"></canvas>
<canvas id="myCanvas3" width="134px" height="331px" onclick="draw(2)"></canvas>

JAVASCRIPT

    var balls = [[], [], []],
    canvases = document.getElementsByTagName('canvas'),
    context = [],
    interval,
    boxWidth = 150,
    ballRadius = 10,
    canvasHeight = 235;
for (var i = 0; i < canvases.length; i++) {
    context.push(canvases[i].getContext('2d'));
}

function draw() {
    var movement = false;
    for (var i = 0; i < 3; i++) {
        context[i].clearRect(0, 0, boxWidth, canvasHeight);
        for (var j = 0; j < balls[i].length; j++) {
            if (balls[i][j].y < balls[i][j].yStop) {
                balls[i][j].y += 4;
                movement = true;
            }
            context[i].beginPath();
            context[i].fillStyle = "red";
            context[i].arc(balls[i][j].x, balls[i][j].y, ballRadius, 0, Math.PI * 2, true);
            context[i].closePath();
            context[i].fill();
        }
    }
    if (!movement) {
        clearInterval(interval);
        interval = null;
    }
}

function newBall(n) {
    console.log('new ball', n);
    var last = balls[n][balls[n].length - 1],
        ball = {x: ballRadius, y: ballRadius, yStop: canvasHeight - ballRadius};
    if (last) {
        if (last.x < boxWidth - ballRadius * 3) {
             ball.x = last.x + ballRadius * 2;
             ball.yStop = last.yStop;
        } else {
             ball.yStop = last.yStop - ballRadius * 2;
        }
    }
    balls[n].push(ball);
    if (!interval) {
        interval = setInterval(draw, 10);
    }
}

但球没有落入。请告诉我，我错在哪里，以便我能解决它......

Answer 1

循环开始时，

balls为[]。因此balls[0]未定义，因此没有属性length。

Answer 2

你的代码总是从0到3循环。但是，首先，没有球。当你试图到达球[0]，球[1]和球[2]时，你会得到undefined错误。

您需要做的是将循环更改为：

for (var i = 0; i < balls.length; i++)

或者如果你不想改变循环，你可以在开始时初始化3个球：

balls = [ball1, ball2, ball3];

其中ball1，ball2和ball3定义为您的球数据类型。

修改

据我了解，你有一些上下文，并且对于每个上下文，你想要一个球列表，以便你可以绘制它们。

然后：

balls = [] for (var i = 0; i < canvases.length; i++) { context.push(canvases[i].getContext('2d')); balls.push([]); }

并使用相同的剩余代码。

丢球的Javascript错误

2 个答案: