使用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。