JavaScript : 개체가 버그의 원인입니까?

-1

나는 this video을 따라 JavaScript에서 platformer를 만드는 방법을 따라 왔습니다. 이 비디오까지 모든 것이 잘 진행되고 있습니다. 나는 캔버스에 내 스프라이트를 표시 할 수 있었지만 키 누르기 코드를 프로그래밍 할 때 작동을 멈췄다. HTML 페이지를 실행할 때 HTML 페이지가 비어있게되었습니다. 문제가되는 줄을 알아 냈지만 문제를 해결하는 방법을 모르겠습니다. 내가합니다 (//PRE VARIABLE ADJUSTMENTS 주석 아래에있는) 코드에서 player.X += player.Velocity_X; 및 player.Y += player.Velocity_Y; 라인을 제거 할 때, 사진이 잘 나타나는 것을 알 수JavaScript : 개체가 버그의 원인입니까?

<body onkeydown="keyDown(event)" onkeyup="keyUp(event)"> 
<canvas id="graphics" width=600 height=400 style="position:absolute;top:0;left:0;"></canvas> 

<script> 
//VARIABLES 
var gameCanvas = document.getElementById("graphics"); 
var grafx = gameCanvas.getContext("2d"); 
var player = new Object("Character1NoAA.png",100,100); 
var img = new Image(); 
img.src = "Character1NoAA.png"; 
var isLeft = false; 
var isRight = false; 

//EVENTS 
function keyDown(e) { 
if (String.fromCharCode(e.keyCode) === "%") isLeft = true; 
if (String.fromCharCode(e.keyCode) === "'") isRight = true; 
} 
function keyDown(e) { 
if (String.fromCharCode(e.keyCode) === "%") isLeft = false; 
if (String.fromCharCode(e.keyCode) === "'") isRight = false; 
} 

//MAINLOOP 
MainLoop(); 
function MainLoop() { 
//PRE VARIABLE ADJUSTMENTS 
player.X += player.Velocity_X; 
player.Y += player.Velocity_Y; 

//LOGIC 
if (isLeft) player.Velocity_X = -3; 
if (isRight) player.Velocity_X = 3; 
if (!isLeft && !isRight) player.Velocity = 0; 

//POST VARIABLE ADJUSTMENTS 
player.X += player.Velocity_X; 
player.Y += player.Velocity_Y; 

//RENDERING 

grafx.clearRect(0,0,gameCanvas.width, gameCanvas.height); 
grafx.drawImage(player.Sprite,player.X,player.Y); 
setTimeout(MainLoop, 1000/60); 
} 

function Object(img,x,y) { 
this.Sprite = new Image(); 
this.Sprite.src = img; 
this.X = x; 
this.Y = y; 
this.Previous_X; 
this.Previous_Y; 
this.Velocity_X; 
this.Velocity_Y; 
} 

</script> 
</body>

다음은 HTML 파일입니다. 나는 여기서 무엇을 잘못 했는가? 매우 실망스러워지고 있습니다.

출처

2014-03-12 Blooker

이 –

자바 스크립트 버그 브라우저 콘솔을 확인 라인'VAR 플레이어 = 새 개체 ("Character1NoAA.png", 100, 100)가 나타납니다,'문자열을 만드는 것입니다. 확인 [이] (http://jsfiddle.net/warlock5658/8XRYz/) 피들 ... – War10ck

[들여 쓰기]없이 코드를 읽기가 어렵습니다 (http://en.m.wikipedia.org/wiki/Indent_style) . – corazza

this.Previous_X; 
this.Previous_Y; 
this.Velocity_X; 
this.Velocity_Y;

이 행은 아무 것도 수행하지 않습니다. 확실히 그 속성을 정의하지는 않습니다. 따라서 "사전 변수 조정"코드가 처음 실행될 때 정의되지 않은 속성에 액세스하려고 시도하면 NaN 좌표가됩니다.

시도 :

this.Previous_X = this.X; 
this.Previous_Y = this.Y; 
this.Velocity_X = 0; 
this.Velocity_Y = 0;

출처

2014-03-12 15:53:33

슈퍼 유용한 정보, 감사합니다! – Blooker

참고로,'function Object'를 재정의하는 것이 좋은 생각인지 모르겠습니다 ... –

코드 하단의 객체 이름을 다른 것으로 변경해야합니까? – Blooker

JavaScript : 개체가 버그의 원인입니까?

답변

관련 문제