使用Javascript时出错的错误

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

你的代码总是从0到3循环。但是，起初，没有球。当您尝试触及球[0]，球[1]和球[2]时，会出现undefined错误。

，你所要做的是将循环更改为：

balls = [ball1, ball2, ball3]; 

：

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

，或者如果你不想改变循环，你可以在开始初始化3个球其中ball1，ball2和ball3被定义为您的球数据类型。

编辑：

据我了解，你有上下文的一些数量，并为每个上下文，你想有球的列表，这样就可以吸引他们。

然后：

balls = [] 

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

，并使用剩余的代码相同。

Answer 2

balls是[]当循环开始时。所以balls[0]是未定义的，因此没有属性length。