Начало возвращается «[объект 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" 
     }; 
}); 

rectangle.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);