javascript 中的非数字错误。无法找到不工作的地方

Question

我目前正在学习 javascript 只是为了玩耍和制作一些小游戏。现在我正在做一种临时的青蛙游戏。我有一个对象列表（"tangos"，反对派），它们目前面临两个问题：重置时生成的 y 数被我的调试输出报告为 NaN。它们不会在 canvas 上呈现。我不想把整个源代码都放在我的 post 上，但为了获得问题的完整上下文，这有点必要（变量名很糟糕，你知道有时会怎样）：

var buffer=35; //collision buffer
var magic32 = 32; //sprite height & width. again, variable names....
var WIN_CONST = 470; //how far the player has to go to advance

// Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 512;
canvas.height = 480;
document.body.appendChild(canvas);

// Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "background.png";

//background music
var audReady = false;
var audFile = new Audio();
audFile.onload = function(){
    audReady=true;
}
audFile.src = "bizoop.jpeg.mp3";
//TODO: Actually implement this
audFile.addEventListener("ended", function(){
    this.currentTime = 0;
    this.play();
}, false)

// Player image
var pReady = false;
var pImage = new Image();
pImage.onload = function () {
    pReady = true;
};
pImage.src = "hero.png";

// opposition image
var mReady = false;
var mImage = new Image();
mImage.onload = function () {
    mReady = true;
};
mImage.src = "monster.png";

// Game objects
var player = {
    speed: 256, // movement in pixels per second
    x : 0, //start at 0, 1/2*whole
    y : canvas.height / 2,
    totalX : 0
};
var opposition = {
    speed: 1
};
//var list = []; list.push({ date: '12/1/2011', reading: 3, id: 20055 });
//gen a list of tangos
var tangos = []; 
for (var i = 0; i < 10; i ++){
    tangos.push({spped:1,x:0,y:0});
}
var oppositionsCaught = 0;
var difficulty=1;

// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
    keysDown[e.keyCode] = true;
}, false);

addEventListener("keyup", function (e) {
    delete keysDown[e.keyCode];
}, false);

// Reset the game when the player touches an opposition
var reset = function () {
//reposition player and create new opposition/tangos
    player.x = 0;
    player.y = canvas.height / 2;

    for (var i = 0; i < tangos.length; i++) { 
        tangos[i].x = i * 50 + 50; //todo: logic
        tangos[i].y = magic32 + (Math.random() * (canvas.height - 64)); //tweak later
        if (i >=5){
            tangos[i].north = true;
        }
        console.warn(tangos[i].x+","+tangos[i].y);//prints a normal float for Y
    }
};

var levelup = false;
var update = function (modifier) {
    if (levelup){
        reset();
        difficulty ++;
        levelup = false;
    }
    if (38 in keysDown) { // Player holding up
        player.y -= player.speed * modifier;
    }
    if (40 in keysDown) { // Player holding down
        player.y += player.speed * modifier;
    }
    if (37 in keysDown) { // Player holding left
        player.x -= player.speed * modifier;
    }
    if (39 in keysDown) { // Player holding right
        player.x += player.speed * modifier;
        player.totalX++;
    }
    //is he out of bounds?
    if (player.x <= 0){
            player.x=3;
        }
    else if (player.x >= canvas.width - buffer){
            player.x=canvas.width - buffer;
        }
    if (player.y <= 0){
            player.y=3;
        }
    else if (player.y >= canvas.height - buffer){
            player.y=canvas.height - buffer;
        }

    for (var i = 0; i < tangos.length; ++i){

        var opp = tangos[i];
        // is opposition out of bounds ON Y axis only
        if (opp.y <= 0 && opp.north){
            opp.y = 512;//canvas.height + buffer + magic32;
            console.warn("Just paralaxed an opposition to NORTHBOUND "+opp.y);
        }
        if (opp.y >= canvas.height - buffer && !opp.north){
            opp.y=-(buffer + magic32);
            console.warn("Just paralaxed an opposition to SOUTHBOUND "+opp.y);
        }   

        if (opp.north){
            opp.y-=opp.speed * modifier;
        }else {
            opp.y+=opp.speed * modifier;
        }

            // Are they touching?
        if (
            player.x <= (opp.x + magic32)
            && opp.x <= (player.x + magic32)
            && player.y <= (opp.y + magic32)
            && opp.y <= (player.y + magic32)
        ) {
            reset(); //game is over lol
            player.totalX = 0;
        }
    }


    if (player.x > WIN_CONST){
        levelup = true;
    }
}

// Draw everything
var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }

    if (pReady) {
        ctx.drawImage(pImage, player.x, player.y);
    }

    if (mReady) {
        //TODO: this for all tangos
        for (var i = 0; i < tangos.length; ++i){
            ctx.drawImage(mImage, tangos[i].x, tangos[i].y);
        }
    }
    if (audReady){
        audFile.play();
    }

    // Score
    ctx.fillStyle = "rgb(250, 250, 250)";
    ctx.font = "24px Helvetica";
    ctx.textAlign = "left";
    ctx.textBaseline = "top";
    ctx.fillText("Distance Traveled: "+player.totalX, 32, 32);
    ctx.fillText("Level: " + difficulty, 32, 64);
    ctx.fillText("Player: "+ player.x +", "+player.y, 32, 96);
    ctx.fillText("1st Tango: "+ tangos[0].x +"," +tangos[0].y, 32, 128);
    ctx.fillText("9th Tango: "+tangos[9].x +","+tangos[9].y, 32, 160);

};

// The main game loop
var main = function () {
    var now = Date.now();
    var delta = now - then;

    update(delta / 1000);
    render();

    then = now;

    // Request to do this again ASAP
    requestAnimationFrame(main);
};

// Cross-browser support for requestAnimationFrame
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;

// Let's play this game!
var then = Date.now();
reset();
main();

Answer 1

我发现了一个拼写错误：

for (var i = 0; i < 10; i ++){
    tangos.push({spped:1,x:0,y:0});// should be speed
}

javascript 中的非数字错误。无法找到不工作的地方

Not-a-Number error in javascript. Can't find where things don't work

javascript

html

canvas