Firebug 콘솔을 사용하여 배열 크기 확인

Question

HTML5 캔버스와 자바 스크립트를 사용하여 작성한 브라우저 기반 게임의 첫 번째 레벨에 필요한 요소를 그리는 데 사용하는 함수가 포함 된 다음 JS 파일이 있습니다.

* This function draws the elements for level 1. */ 
     function drawLevelOneElements(){ 
      /*First, clear the canvas */ 
      context.clearRect(0, 0, myGameCanvas.width, myGameCanvas.height); 
      /*This line clears all of the elements that were previously drawn on the canvas. */ 
      /*Then redraw the game elements */ 
      drawGameElements(); 

      /*Create the four description areas, and place them near the bottom of the canvas */ 
      /*Create boxes with rounded corners for the description areas */ 
      CanvasRenderingContext2D.prototype.drawDescriptionArea = function(x, y, width, height, radius, stroke){ 
       if(typeof stroke == "undefined"){ 
        stroke = true; 
       } 
       if(typeof radius === "undefined"){ 
        radius = 5; 
       } 
       this.beginPath(); 
       this.moveTo(x + radius, y); 
       this.lineTo(x + width - radius, y); 
       this.quadraticCurveTo(x + width, y, x + width, y + radius); 
       this.lineTo(x + width, y + height - radius); 
       this.quadraticCurveTo(x + width, y + height, x + width - radius, y + height); 
       this.lineTo(x + radius, y + height); 
       this.quadraticCurveTo(x, y + height, x, y + height - radius); 
       this.lineTo(x, y + radius); 
       this.quadraticCurveTo(x, y, x + radius, y); 
       this.closePath(); 
       if(stroke){ 
        context.stroke(); 
       } 
      } 

      context.drawDescriptionArea(70, 400, 120, 70); 
      context.font = '25pt Calibri'; 
      context.strokeText('Asset', 90, 440); 

      context.drawDescriptionArea(300, 400, 120, 70); 
      context.strokeText('Liability', 310, 440); 

      context.drawDescriptionArea(540, 400, 120, 70); 
      context.strokeText('Income', 550, 440); 

      context.drawDescriptionArea(750, 400, 180, 70); 
      context.strokeText('Expenditure', 760, 440); 

      /*Now draw the images to the canvas */ 
      /*First, create variables for the x & y coordinates of the image that will be drawn. 
       the x & y coordinates should hold random numbers, so that the images will be 
       drawn in random locations on the canvas.*/ 
       var imageX = Math.floor(Math.random()*100); 
       var imageY = Math.floor(Math.random()*100); 

      /*Draw all images from assetsImageArray */ 
      /*Use a while loop to loop through the array, get each item and draw it. */ 
      var arrayIteration = 0; 
      while(arrayIteration < assetsImageArray.length){ 
       context.drawImage(assetsImageArray[arrayIteration], imageX, imageY, 50, 50); 
       arrayIteration+1; 
      } 

     } 

현재, 내가 브라우저에서 내 웹 페이지를로드 할 때, 캔버스는 캔버스에있는 시작 버튼과 함께 표시됩니다. 시작 버튼을 클릭하면 위의 함수가 호출됩니다.

그러나 어떤 이유로이 기능을 수행하는 데 시간이 오래 걸립니다. 버튼을 클릭하면 브라우저에서 아무 것도하지 않고 몇 초 동안 아무 것도하지 않으면 불투명 한 것처럼 사라집니다. 응답 한 다음 작업이 실제로 수행되고 함수의 요소가 캔버스에 그려집니다.

응답이없는 스크립트에 대한 경고 메시지가 표시되어 계속할 수있는 옵션을 제공하거나 스크립트를 디버그하거나 스크립트를 중지 할 수 있습니다. 스크립트를 중지하도록 선택하면 호출 된 함수가 수행되고 요소는 모두 캔버스에 그려집니다.

경고 메시지가 표시되는 것을 어떻게 막을 수 있는지, 그리고 요소를 캔버스로 훨씬 더 빠르게 그릴 수 있는지 궁금합니다.

내 첫 번째 생각은 아마도이 함수의 끝 부분에있는 while 루프와 관련이 있거나, 그려지는 이미지를 보유하기 위해 사용하는 배열 일 수도 있습니다.

현재 배열은 하나의 이미지 만 보유하고 있습니다. 결국이 배열에서 약 40 개의 이미지를 보유 할 3 개 또는 4 개의 별도 배열을 갖고 싶습니다.이 배열은 모두이 함수를 사용하여 캔버스에 그려지며, 그러나 나는 로딩 속도를 엄청나게 줄일 때까지이 배열에 더 많은 이미지를 추가 할 수 있다고 생각하지 않습니다.

내가하고있는 일이 올바른지 아는 사람이 있습니까? 그렇지 않다면 어떻게해야합니까?

JavaScript가 배열 크기를 결정하는 방법에 대해 잘 모르겠지만 고정 또는 동적입니까? 확인하려면이 배열의 크기를 콘솔에 어떻게 인쇄합니까?

캔버스에로드해야하는 이미지의 수를 변경해야하므로 배열 크기를 동적으로 지정해야하므로 배열 크기를 지정하지 않았습니다. 누구든지 도와 줄 수 있습니까?

Answer 1

문제는 arrayIteration을 늘리지 않는 것입니다. "arrayIteration + 1"은 그것을 수정하지 않습니다.