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

ビーバープロトタイプ用の穴は決して初期化されませんでした。 コンストラクタ関数をそのように変更してみてください。

undefined可変戻り NaN結果に ++操作を実行

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

。