为什么nextButton/startButton不起作用？

-1

我正在研究可汗学院的一个项目，在这个项目中我必须创建一个至少有3个关卡的游戏。我已经开发了大部分游戏，但是当我试图从一个级别进入下一个游戏时，游戏以某种方式停止。为什么nextButton/startButton不起作用？

以下是完整的项目： 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(); } 
};

来源

2017-10-13 Ratcat

请发布[mcve]而不是链接到您的整个项目。 –

欢迎计算器。你的代码的问题在drawLevel函数中就在这里。

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

在你的程序开始在初始化棒阵列，以在管线124棒的一些物体当点击级别1结束和下一个按钮，可以设置在的mouseClicked棍棒数组为空数组sticks=[]功能。
但是，你永远不会重新添加任何东西到棒数组中。因此，当该代码块运行时，位置为nosOfSticks-1的元素未定义，导致您的问题。
我的建议是在sticks=[]之后做一个for循环，就像第124行一样重新填充条形阵列。祝你好运！

另外，请参阅本指南的调试帮助，how to debug small programs。

来源

2017-11-01 14:56:06 Elijah

为什么nextButton/startButton不起作用？

回答

相关问题