볼을 떨어 뜨리는 동안 자바 스크립트 오류가 발생했습니다.

Question

캔버스를 클릭하면 여러 번 볼을 드롭하는 자바 스크립트 코드를 작성했습니다. 그것은 실험입니다.
다음은 코드입니다.
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]; 

: 당신은 루프를 변경하지 않는 경우 또는, 당신은 시작에 3 개 공을 초기화 할 수 있습니다

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

: 당신이해야 할 무엇

는에 루프를 변경하는 것입니다 여기서 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 속성이 없습니다.