javascript - 返回 "[object Object] NaN"- Javascript

Question

正如标题所说，当我执行代码时，在控制台中我返回“[object Object] NaN”(在控制台中带有引号)

由于我总是不确定要发送什么代码，因为它们可能涉及其他因素，因此我将在中发布我的所有代码

Main.Js

var ctx = document.getElementById("canvas").getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;

var zombie1 = new Rectangle(300, 300, 20, 50);
var border = new Rectangle(0, 0, window.innerWidth, window.innerHeight);
var debugPlayer = new Rectangle(400, 400, 50, 50);

zombie1.ChangeColour("rgb(0, 0, 255)");
border.ChangeColour("rgb(150, 150, 150)");
border.ChangeThickness(300);
debugPlayer.ChangeColour("rgb(100, 100, 100)")


var playerup = "false"
var playerdown = "false"
var playerleft = "false"
var playerright = "false"

var update = function(){

    if (playerup == "true"){
        debugPlayer.y = debugPlayer.y - 1
    };
    if (playerdown == "true"){
        debugPlayer.y = debugPlayer.y + 1
    };
    if (playerleft == "true"){
        debugPlayer.x = debugPlayer.x - 1
    };
    if (playerright == "true"){
        debugPlayer.x = debugPlayer.x + 1
    };

    DoCollision(debugPlayer, zombie1);

    var processedZombiewidth = parseInt(zombie1.width, 10);
    console.log(debugPlayer.x, zombie1.x, debugPlayer + processedZombiewidth); // I am getting "400, 300, "[object Object] NaN" in console.

};
var makeScreen = function(){
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    border.Draw(ctx, "true");
    debugPlayer.Draw(ctx, "false")
    zombie1.Draw(ctx, "false");
};

var DoCollision = function(rect1, rect2){
    if (rect1.x > rect2.x){
        if (rect1.x < rect2.x + rect2.width){
            console.log("fat")
        };      
    };
};

var updateFunc = function(){
    update();
    makeScreen();
};



setInterval(function(){updateFunc();}, 1);




$(document).keyup(function(objEvent){
        objEvent ? keycode = objEvent.keyCode : keycode = event.keyCode; 
        console.log(keycode);

        if (keycode == 87){ //W
            playerup = "false"
        };
        if (keycode == 65){ //A
            playerleft = "false"
        };
        if (keycode == 83){ //S
            playerdown = "false"
        };
        if (keycode == 68){ //D
            playerright = "false"
        };

});
$(document).keydown(function(objEvent){
        objEvent ? keycode = objEvent.keyCode : keycode = event.keyCode;
        console.log(keycode);
        if (keycode == 87){ //W
            playerup = "true"
        };
        if (keycode == 65){ //A
            playerleft = "true"
        };
        if (keycode == 83){ //S
            playerdown = "true"
        };
        if (keycode == 68){ //D
            playerright = "true"
        };
});

矩形.js

Rectangle = function(x, y, w, h){

this.colour = "rgb(0, 0, 0)"
this.thickness = 1

this.x = x;
this.y = y;
this.w = w;
this.h = h; 

this.Draw = function(ctx, hollow){
    ctx.fillStyle = this.colour;
    ctx.strokeStyle = this.colour;

    if (hollow == "true"){
        ctx.lineWidth = this.thickness
        ctx.strokeRect(this.x, this.y, this.w, this.h);
    };
    if (hollow == "false"){
        ctx.fillRect(this.x, this.y, this.w, this.h)
    };

};
this.ChangeColour = function(colour){
    this.colour = colour
};
this.ChangeThickness = function(thickness){
    this.thickness = thickness
};

Answer 1

这里有两个错误:

1) zombie1 没有属性 width，只有 w。使用 parseInt() 转换非数字值将产生 NaN。

2) 您正在将数字(或者更确切地说 NaN)添加到对象 debugPlayer 中。无论如何，这都会产生 NaN。

要修复此问题，请尝试将 w 添加到 debugPlayer 的 x:

//var processedZombiewidth = parseInt(zombie1.width, 10);  not needed
console.log(debugPlayer.x, zombie1.x, debugPlayer.x + zombie1.w);