javascript中的非数字错误。找不到哪里出了问题

javascript中的非数字错误。找不到哪里出了问题,javascript,html,canvas,Javascript,Html,Canvas,我目前正在学习javascript,只是为了在游戏中玩一些小游戏。现在我正在做一个特别的蛙泳。我有一个关于探戈和反对派的物体列表,它们目前面临两个问题: 在重置中生成的y编号由我的调试输出报告为NaN。 它们不会在画布上渲染。 我不想把整个源代码都贴在我的帖子上,但是为了获得问题的完整背景,有一点必要,变量名太糟糕了,你知道有时候是怎么回事: var buffer=35; //collision buffer var magic32 = 32; //sprite height & wid

我目前正在学习javascript,只是为了在游戏中玩一些小游戏。现在我正在做一个特别的蛙泳。我有一个关于探戈和反对派的物体列表,它们目前面临两个问题: 在重置中生成的y编号由我的调试输出报告为NaN。 它们不会在画布上渲染。 我不想把整个源代码都贴在我的帖子上,但是为了获得问题的完整背景,有一点必要,变量名太糟糕了,你知道有时候是怎么回事:

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();

我发现一个拼写错误:

for (var i = 0; i < 10; i ++){
    tangos.push({spped:1,x:0,y:0});// should be speed
}
,一步一步地完成代码,并遵循y的变化方式。能够调试您编写的代码是一项绝对必要的技能。然后,一旦你发现了有问题的操作,并且想知道为什么会发生这种情况或者如何修复它,你可以问一个关于它的问题。“我讨厌把整个源代码都贴在我的帖子上,”然后不要这样做。您应该将问题缩小到受影响的代码,然后发布。参见ctx.filltextFirst Tango:+tangos[0].x+,+tangos[0].y,32,128;ctx.fillText9th探戈:+tangos[9]。x+,+tangos[9]。y,32,160;tangos[i].y=magic32+Math.random*canvas.height-64;确保canvas.height不是NaN顺便说一句,这里有一个方法