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