なぜnextButton/startButtonが機能しないのですか？

Question

私は最低3レベルのゲームを作成する必要があるKhan Academyのプロジェクトに取り組んでいます。私はゲームのほとんどを開発しましたが、あるレベルから次のレベルへ進もうとすると何とか止まります。ここで

は完全なプロジェクトです： Project Link

/** 
* Contains 3 levels 
* 
* 
* Changed Ground 
* Brown rectangle is replaced with Dirt Block. 
* 
* Scoring system changed 
* Collecting Good sticks gets 1 point. 
* Collecting Bad sticks gets -1 point. (i.e. loses point). 
* Hitting rocks will lose 1 point. 
* 
**/ 
var level = 0; 
var nosOfSticks = 5; 
var target = 0; 
var speed = 1; 
var endLevel = false; 
var buttonClicked = false; 
var levelButtonEnabled = false; 
var startButtonEnabled = true; 

var Beaver = function(x, y) { // Beaver Constructor 
    this.x = x; 
    this.y = y; 
    this.img = getImage("creatures/Hopper-Happy"); 
    this.sticks = 0; 
}; 

Beaver.prototype.draw = function() { // Draw function to draw beaver 
    fill(255, 0, 0); 
    this.x = constrain(this.x, 0, width-40); 
    this.y = constrain(this.y, 0, height-50); 
    image(this.img, this.x, this.y, 40, 40); 
}; 

Beaver.prototype.hop = function() { // Hop function to make beaver hop 
    this.img = getImage("creatures/Hopper-Jumping"); 
    this.y -= speed * 5; 
}; 

Beaver.prototype.hopLeft = function() { 
    this.img = getImage("creatures/Hopper-Jumping"); 
    this.x -= speed * 5; 
}; 

Beaver.prototype.hopRight = function() { 
    this.img = getImage("creatures/Hopper-Jumping"); 
    this.x += speed * 5; 
}; 

Beaver.prototype.fall = function() { // fall function makes beaver fall on the ground 
    this.img = getImage("creatures/Hopper-Happy"); 
    this.y += speed * 5; 
}; 

Beaver.prototype.checkForStickGrab = function(stick) { // function that checks sticks grab 
    if ((stick.x >= this.x && stick.x <= (this.x + 40)) && 
     (stick.y >= this.y && stick.y <= (this.y + 40))) { 
     stick.y = -400; 
     this.sticks++; 
    } 
}; 

Beaver.prototype.checkForBadStickGrab = function(badstick) { // function that checks badsticks grab 
    if ((badstick.x >= this.x && badstick.x <= (this.x + 40)) && 
     (badstick.y >= this.y && badstick.y <= (this.y + 40))) { 
     badstick.y = -400; 
     this.sticks--; 
    } 
}; 

Beaver.prototype.checkForRockHit = function(rock) { // function that checks rocks hit 
    if ((rock.x >= this.x - 40 && rock.x <= (this.x + 40)) && 
     (rock.y >= this.y - 30 && rock.y <= (this.y + 40))) { 
     rock.x = -400; 
     this.sticks--; 
    } 
}; 

// Drawing Sticks 

var Stick = function(x, y) { // Stick constructor 
    this.x = x; 
    this.y = y; 
}; 

Stick.prototype.draw = function() { // Draw function to draw sticks 
    fill(0, 0, 0); 
    rectMode(CENTER); 
    rect(this.x, this.y, 5, 40); 

}; 

var Badstick = function(x, y) { // Bad Sticks constructor 
    Stick.call(this, x, y); 
}; 

//Badstick.prototype = Object.create(Stick); 

Badstick.prototype.draw = function() { //Draw function to draw badsticks 
    fill(255, 0, 13); 
    rectMode(CENTER); 
    rect(this.x, this.y, 5, 40); 
}; 

// Drawings Rocks 

var Rock = function(x, y) { // rocks constructor 
    this.x = x; 
    this.y = y; 
    this.img = getImage("cute/Rock"); 
}; 

Rock.prototype.draw = function(x, y) { // function to draw rocks 
    fill(0, 0, 0); 
    image(this.img, this.x, this.y, 40, 40); 
}; 

var beaver = new Beaver(200, 300); 

var sticks = []; 

for (var i = 0; i < nosOfSticks; i++) { 
    sticks.push(new Stick(i * 100 + 400, random(20, 260))); 
} 

var badSticks = []; 

for (var i = 0; i < nosOfSticks/2; i++) { 
    badSticks.push(new Badstick(i * 200 + 400, random(20, 270))); 
} 

var rocks = []; 

for (var i = 0; i < nosOfSticks * 0.375; i++) { 
    rocks.push(new Rock(random(0, 375), i * random() - (i * 100))); 
} 

var grassXs = []; 

for (var i = 0; i < 25; i++) { 
    grassXs.push(i*20); 
} 

var blockXs = []; 

for (var i = 0; i < 25; i++) { 
    blockXs.push(i*20); 
} 

var Button = function (x, y, w, h, color, text, size, font, textcolor, best) { 
    this.x = x; 
    this.y = y; 
    this.w = w; 
    this.h = h; 
    this.color = color; 
    this.text = text; 
    this.size = size; 
    this.font = font; 
    this.textcolor = textcolor; 
    this.best = best; 
}; 

Button.prototype.draw = function() { 
    rectMode(CORNER); 
    fill(this.color); 
    rect(this.x, this.y, this.w, this.h); 
    fill(this.textcolor); 
    stroke(this.textcolor); 
    textFont(this.font, this.size); 
    text(this.text, this.x + (this.w/2 - this.w/2.5), this.y + (this.h/2 + this.size/2.5)); 
    /*textFont(this.font, this.size/2); 
    text("Best : " + this.best, this.x + 10, this.y + 90);*/ 
}; 

Button.prototype.clicked = function() { 
    if(mouseIsPressed && mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h) { 
     return true; 
    }  
}; 

var nextButton = new Button(315, 360, 75, 30, color(0, 255, 0), "Next Level", 12, "Aerial Bold", color(0, 0, 0)); 

var startButton = new Button(315, 360, 75, 30, color(0, 255, 0), "Start Again", 12, "Aerial Bold", color(0, 0, 0)); 

var playButton = new Button(140, 250, 120, 50, color(0, 0, 0), "PLAY", 40, "Aerial Bold", color(255, 255, 255)); 

var level1Button = new Button(30, 120, 100, 100, color(0, 0, 0), "Level 1", 25, "Aerial Bold", color(255, 255, 255)); 

var level2Button = new Button(140, 120, 100, 100, color(0, 0, 0), "Level 2", 25, "Aerial Bold", color(255, 255, 255)); 

var level3Button = new Button(250, 120, 100, 100, color(0, 0, 0), "Level 3", 25, "Aerial Bold", color(255, 255, 255)); 

var drawWin = function() { 
    fill(255, 0, 0); 
    textSize(36); 
    text("YOU WIN!!!!", 100, 200); 
    nextButton.draw(); 
}; 

var drawLoss = function() { 
    fill(255, 0, 0); 
    textSize(36); 
    text("YOU LOSE!!!!", 100, 200); 
    startButton.draw(); 
}; 

var movement = function() { 
    if (keyIsPressed) { 
     if(keyCode === UP) { 
      beaver.hop(); 
     } /*else if(keyCode === LEFT) { 
      beaver.hopLeft(); 
     } else if(keyCode === RIGHT) { 
      beaver.hopRight(); 
     } */ 
    } else { beaver.fall();} 
}; 

var drawScore = function() { 
    fill(0, 255, 0); 
    textSize(18); 
    text("Score: " + beaver.sticks, 10, 390); 
}; 

var isWin = function() { 
    if(beaver.sticks >= target) { 
     drawWin(); 
     speed = 1; 
     return true; 
    } 
}; 

var isLoss = function() { 
    if (beaver.sticks < target) { 
     speed = 1; 
     drawLoss(); 
     return true; 
    } 
}; 

var drawBackground = function() { 
    //static 
    speed = 1; 
    background(227, 254, 255); 
    stroke(0, 0, 0); 
    rectMode(CORNER); 
    rect(0, height*0.90, width, height*0.10); 
    for (var i = 0; i < grassXs.length; i++) { 
     image(getImage("cute/GrassBlock"), grassXs[i], height*0.85, 35, 20); 
     image(getImage("cute/DirtBlock"), grassXs[i], height*0.85, 35, 60); 
     grassXs[i] -= speed; 
     if (grassXs[i] <= - 20) { 
       grassXs[i] = width; 
     } 
    } 
}; 

var drawSticks = function() { 
    for (var i = 0; i < sticks.length; i++) { 
     sticks[i].draw(); 
     beaver.checkForStickGrab(sticks[i]); 
     sticks[i].x -= speed; 
    } 
}; 

var drawBadSticks = function() { 
    for (var i = 0; i < badSticks.length; i++) { 
     badSticks[i].draw(); 
     beaver.checkForBadStickGrab(badSticks[i]); 
     badSticks[i].x -= speed; 
    } 
}; 

var drawRocks = function() { 
    for (var i = 0; i < rocks.length; i++) { 
     rocks[i].draw(); 
     beaver.checkForRockHit(rocks[i]); 
     rocks[i].y += speed; 
    } 
}; 

var drawLevel = function() { 
    speed = 1; 
    drawBackground(); 
    if (level === 1) { 
     target = 1; 
     drawSticks(); 
    } 
    if (level === 2) { 
     target = 1; 
     drawSticks(); 
     drawBadSticks(); 
    } 
    if (level === 3) { 
     target = 1; 
     drawBadSticks(); 
     drawSticks(); 
     drawRocks(); 
    } 
    beaver.draw(); 
    movement(); 
    drawScore(); 
    if (sticks[nosOfSticks - 1].x < -5) { 
     isWin(); 
     isLoss(); 
    } 
}; 

var drawLevels = function() { 
    level = "l"; 
    background(0, 0, 0); 
    level1Button.draw(); 
    level2Button.draw(); 
    level3Button.draw(); 
    if (level1Button.clicked() && level === "l") { 
     level = 1; 
     drawLevel(); 
    } else if (level2Button.clicked() && level === "l") { 
     level = 2; 
     drawLevel(); 
    } else if (level3Button.clicked() && level === "l") { 
     level = 3; 
     drawLevel(); 
    } 
}; 

var drawStart = function() { 
    level = 0; 
    background(0); 
    text("Hoppy Beaver", 75, 50); 
    text("Extreme", 120, 100); 
    playButton.draw(); 
    if (playButton.clicked() && level === 0) { 
     levelButtonEnabled = false; 
     drawLevels(); 
    } 
}; 

//drawStart(); 

mouseClicked = function() { 
    if (nextButton.clicked() || startButton.clicked()) { 
     if (beaver.sticks >= 1) { 
      if (level === 0) { 
       level = 1; 
       sticks = []; 
       draw(); 
       isWin = false; 
      } 
      if (level === 1) { 
       level = 2; 
       sticks = []; 
       draw(); 
       isWin = false; 
      } 
      if (level === 2) { 
       level = 3; 
       sticks = []; 
       draw(); 
       isWin = false; 
      } 
      if (level === 3) { 
       level = 1; 
       sticks = []; 
       isWin = false; 
       draw(); 

      } 
     } else if (beaver.sticks < 1) { 
      if (level === 1) { 
       level = 1; 
       sticks = []; 
       drawLevel(); 
       isLoss = false; 
      } 
      if (level === 2) { 
       level = 2; 
       sticks = []; 
       drawLevel(); 
       isLoss = false; 
      } 
      if (level === 3) { 
       level = 3; 
       sticks = []; 
       drawLevel(); 
       isLoss = false; 
      } 
     } 
    } 
}; 

draw = function() { 
    speed = 1; 
    if (level === 1) { 
     drawLevel(); 
    } else if (level === 2) { 
     drawLevel(); 
    } else if (level === 3) { 
     drawLevel(); 
    } else if (level === "l") { 
     drawLevels(); 
    } else { drawStart(); } 
}; 

Answer 1

はStackOverflowのを歓迎します。あなたのコードの問題は、drawLevel関数のこのビットです。あなたのプログラムの開始時に

if (sticks[nosOfSticks - 1].x < -5) { 
    isWin(); 
    isLoss(); 
} 

レベル1が終了し、次のボタンがクリックされたときは、ライン124で、いくつかのスティックオブジェクトとスティック配列を初期化するには、のmouseClickedで空の配列sticks=[]にスティック配列を設定関数。
しかし、スティック配列には何も再追加しません。したがって、コードブロックが実行されると、位置nosOfSticks-1の要素は定義されず、問題が発生します。
私の提案は、sticks=[]の後に124行目と同じようにスティック配列を補充するためにforループを作成することです。 幸運！

さらに、このガイドでデバッグヘルプhow to debug small programsをご覧ください。