Question

我正在研究可汗学院的一个项目，我必须创建一个至少有3个等级的游戏。我已经开发了大部分游戏但是当我尝试从一个级别进入下一个级别时，游戏不知何故停止了。

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

在程序开始时，使用第124行中的一些棒状对象初始化棒阵列。当第1级结束并单击下一个按钮时，将鼠标数组设置为鼠标单击的空数组sticks=[]功能。
但是，你永远不会在棒阵列中重新添加任何东西。因此，当该代码块运行时，位置nosOfSticks-1处的元素未定义，导致您的问题。
我的建议是在sticks=[]之后进行for循环以重新填充棒阵列像第124行。祝你好运！

另外，请查看本指南以获取调试帮助how to debug small programs。

为什么nextButton / startButton不起作用？

1 个答案: