JavaScript小游戏实例

Question

在小游戏示例中学习Javascript和堆栈。那么为什么println(beaver.holes)有"NaN“值？它必须是正常的数字，没有藐视点。

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

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

Beaver.prototype.hop = function() {
    this.img = getImage("creatures/Hopper-Jumping");
    this.y -= 5;
};

Beaver.prototype.fall = function() {
    this.img = getImage("creatures/Hopper-Happy");
    this.y += 5;
};

Beaver.prototype.checkForStickGrab = function(stick) {
    if ((stick.x >= this.x && stick.x <= (this.x + 40)) &&
        (stick.y >= this.y && stick.y <= (this.y + 40))) {
        stick.y = -11;
        this.sticks++;
    } 
};
Beaver.prototype.checkForHoleDrop = function(hole) {
    if ((hole.x >= this.x && hole.x<=(this.x +40)) &&
    (hole.y >=this.y && hole.y <= (this.y + 40))) {
        hole.y = -11;
        this.holes++;

    }
};
var Stick = function(x, y) {
    this.x = x;
    this.y = y;
};
var Hole = function(x,y) {
    this.x = x;
    this.y = y;
};
Hole.prototype.draw = function() {

    rectMode(CENTER);
    noStroke();
    fill(120, 144, 204);
    ellipse(this.x,this.y, 51,19);
     fill(0, 40, 71);
    ellipse(this.x,this.y, 40,15);

};
Stick.prototype.draw = function() {
    fill(89, 71, 0);
    rectMode(CENTER);
    rect(this.x, this.y, 5, 40);
};

var beaver = new Beaver(37, 300);

var sticks = [];
for (var i = 0; i < 40; i++) {  
    sticks.push(new Stick(i * 44 + 300, random(44, 260)));
}

// holes var
var holes = [];
for (var i = 0;i< 10; i ++) {
    holes.push(new Hole(random(33,400)*i + 306, 378));
}
var grassXs = [];
for (var i = 0; i < 25; i++) { 
    grassXs.push(i*18);
}

draw = function() {

    // static
    background(227, 254, 255);
    fill(130, 79, 43);
    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, 20, 20);
        grassXs[i] -= 1;
        if (grassXs[i] <= -32) {
            grassXs[i] = width;
        }
    }
    // making holes
    for (var i = 0; i < holes.length; i++) {
        holes[i].draw();
         beaver.checkForHoleDrop(holes[i]);
       holes[i].x -=2;

    }
    for (var i = 0; i < sticks.length; i++) {
        sticks[i].draw();

        beaver.checkForStickGrab(sticks[i]);
        sticks[i].x -= 2;// value turn speed of sticks
    }

所以在这里，如果我们在屏幕上打印beaver.holes，它将给我们NaN值。

    textSize(18);
    text("Score: " + beaver.sticks, 20, 30);
    textSize(18);
    text("Score: " + beaver.holes, 105, 30);

    if (beaver.sticks/sticks.length >= 0.95) {

        textSize(36);
        text("YOU WIN!!!!", 100, 200);

    }
    if  (beaver.hole >41) {
            textSize(36);
            text("YOU LOSE!!!",100,200);}
            //println(beaver.holes/holes.length);
    if (keyIsPressed && keyCode === 0) {
        beaver.hop();
    } else {
        beaver.fall();
    }
    beaver.draw();

    };

Answer 1

看来海狸原型从来没有初始化过洞。尝试修改构造函数如下所示。

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

对++变量执行undefined操作将返回NaN结果。