잡히지 않은 ReferenceError. Phaser.io

Question

좋아요, 게임을 만들고 레벨 선택을 구현 한 후 거의 프로젝트가 작동했습니다. 그러나, 내 눈을 사로 잡은 오류 (아마 쉽게 고칠 수 있음)가 있습니다.

"create"함수에서 "pages"변수를 만들었지 만 다른 함수에서 사용할 때 ReferenceError : Uncaught ReferenceError : pages is defined가 발생합니다. 나는 자바 스크립트에 상당히 익숙하며 매개 변수에 변수를 전달하려고 시도했지만 오류는 사라지 겠지만 코드는 원하는대로 작동하지 않습니다.

내가 만드는 기능의 페이지를 정의하고 pages이 create 함수 내에서 정의되어 있지만 다른 곳에서는 정의되지 않기 때문에 나는 arrowClicked 기능

UshanGame.Selection = function(game){}; 

var thumbRows = 2; 
var thumbCols = 3; 
var thumbWidth = 128; 
var thumbHeight = 128; 
var thumbSpacing = 3; 
var levelThumbsGroup; 
var currentPage = 0; 
var leftArrow; 
var rightArrow; 

UshanGame.Selection.prototype = { 
create: function(){ 
    console.log("%c ✔✔ Level Selection Ready! ✔✔", "color:red;"); 

    // array with finished levels and stars collected. 
    var starsArray = [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]; 
    // how many pages are needed to show all levels? 
    var pages = starsArray.length /(thumbRows * thumbCols); 

    leftArrow = this.add.button(50, 420, "level_arrows", this.arrowClicked); 
    leftArrow.anchor.setTo(0.5); 
    leftArrow.frame = 0; 
    leftArrow.alpha = 0.3; 
    rightArrow = this.add.button(270, 420, "level_arrows", this.arrowClicked); 
    rightArrow.anchor.setTo(0.5); 
    rightArrow.frame = 1; 

    // creation of the thumbails group 
    levelThumbsGroup = this.add.group(); 

    // determining level thumbnails width and height for each page 
    var levelLength = thumbWidth * thumbCols + thumbSpacing * (thumbCols - 1); 
    var levelHeight = thumbWidth * thumbRows + thumbSpacing * (thumbRows - 1); 

    // looping through each page 
    for(var l = 0; l < pages; l++){ 
     // horizontal offset to have level thumbnails horizontally centered in the page 
     var offsetX = (this.width-levelLength)/ 2 + game.width * l; 
     // I am not interested in having level thumbnails vertically centered in the page, but 
     // if you are, simple replace my "20" with 
     // (game.height-levelHeight)/2 
     var offsetY = 20; 

     // looping through each level thumbnails 
     for(var i = 0; i < thumbRows; i ++){ 
      for(var j = 0; j < thumbCols; j ++){ 
       var levelNumber = i * thumbCols + j + l *(thumbRows * thumbCols);  
       var levelThumb = this.add.button(offsetX + j * (thumbWidth + thumbSpacing), offsetY + i * (thumbHeight + thumbSpacing), "levels", this.thumbClicked, this); 
       levelThumb.frame=starsArray[levelNumber]; 
       levelThumb.levelNumber = levelNumber + 1; 
       levelThumbsGroup.add(levelThumb); 
       // if the level is playable, also write level number 
       if(starsArray[levelNumber] < 4){ 
        var style = { 
         font: "18px Arial", 
         fill: "#ffffff" 
        }; 
        var levelText = this.add.text(levelThumb.x + 5, levelThumb.y + 5, levelNumber + 1,style); 
        levelText.setShadow(2, 2, 'rgba(0,0,0,0.5)', 1); 
        levelThumbsGroup.add(levelText); 
       } 
      } 
     } 
    } 
}, 

thumbClicked: function(button){ 
    // the level is playable, then play the level!! 
    if(button.frame < 4){ 
     alert("playing level " + button.levelNumber); 
    } else { 
     var buttonTween = this.add.tween(button) 
     buttonTween.to({ 
      x: button.x + thumbWidth/15 
     }, 20, Phaser.Easing.Cubic.None); 
     buttonTween.to({ 
      x: button.x - thumbWidth/15 
     }, 20, Phaser.Easing.Cubic.None); 
     buttonTween.to({ 
      x: button.x + thumbWidth/15 
     }, 20, Phaser.Easing.Cubic.None); 
     buttonTween.to({ 
      x: button.x - thumbWidth/15 
     }, 20, Phaser.Easing.Cubic.None); 
     buttonTween.to({ 
      x: button.x 
     }, 20, Phaser.Easing.Cubic.None); 
     buttonTween.start(); 
    } 
}, 

arrowClicked: function(button){ 
    if(button.frame == 1 && currentPage < pages - 1){ 
     leftArrow.alpha = 1; 
     currentPage++; 

     if(currentPage == pages - 1){ 
      button.alpha = 0.3; 
     } 

     var buttonsTween = this.add.tween(levelThumbsGroup); 
     buttonsTween.to({ 
      x: currentPage * game.width * -1 
     }, 500, Phaser.Easing.Cubic.None); 
     buttonsTween.start(); 
    } 

    if(button.frame==0 && currentPage>0){ 
     rightArrow.alpha = 1; 
     currentPage--; 

     if(currentPage == 0){ 
      button.alpha = 0.3; 
     } 

     var buttonsTween = game.add.tween(levelThumbsGroup); 
     buttonsTween.to({ 
      x: currentPage * game.width * -1 
     }, 400, Phaser.Easing.Cubic.None); 
     buttonsTween.start(); 
    }  
} 
}; 

Answer 1

당신은 오류가있어이 그것을 사용하고자하는 . pages은 arrowClicked 함수에 없습니다.

것은,이 문제를 해결 상단에 var 선언과 함께 추가하여 pages 전역 변수를 만들려면 :

... 
var leftArrow; 
var rightArrow; 
var pages; 

을 그리고 대신합니다 (var 키워드를 놓아)이 변수를 참조하기 위해 create 기능을 수정

// array with finished levels and stars collected. 
var starsArray = [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]; 
// how many pages are needed to show all levels? 
pages = starsArray.length /(thumbRows * thumbCols);