잡히지 않은 참조 오류 : 끌기가 정의되지 않았습니다.

JavaScript 및 HTML5를 사용하여 tic tac toe 게임을 만들 때 This tutorial을 완료하려고합니다.잡히지 않은 참조 오류 : 끌기가 정의되지 않았습니다.

나는 비디오의 각 단계를 여러 번 추적했습니다. 내 코드가 비디오의 코드와 일치하는 것처럼 보이지만 오류가 발생합니다. 잡히지 않은 참조 오류 : 그리기가 정의되지 않았습니다. 라인 12에서 오류가 발생합니다.

뭔가를 내려야합니다. 누구든지 그것을 지적 할 수 있습니까?

<!DOCTYPE html> 
    <html> 
    <head> 
    <title>Tic Tac Toe!</title> 
     <script type="text/javascript"> 
var c, canvas; 
var turn = 1; 
window.onload = function() { 
    canvas = document.getElementById("canvas"); 
    c = canvas.getContext("2d"); 

    draw(); 
} 

var moves = []; 

window.onclick = function(e) { 
    if(e.pageX < 500 && e.pageY < 500) { 
     var cX = Math.floor(e.pageX/(500/3)); 
     var cY = Math.floor(e.pageY/(500/3)); 

     var alreadyClicked = false; 

     for(i in moves) { 
      if(moves[i][0] == cX && moves[i][1] == cY) { 
       alreadyClicked = true; 
      } 

     } 
     if(alreadyClicked == false) { 
      moves[(moves.length)] = [cX, cY, turn]; 
      turn = turn * -1; 
      draw(); 
     } 

    } 

    var bg = new Image(); 
    var x = new Image(); 
    var o = new Image(); 
    bg.src = "ttt_board.png"; 
    x.src = "ttt_x.png"; 
    o.src = "ttt_o.png"; 

    function draw() { 
     c.clearRect(0, 0, 500, 500); 

     c.drawImage(bg, 0, 0); 

     for(i in moves) { 
      if(moves[i][2] == 1) { 
       c.drawImage(x, Math.floor(moves[i][0] * (500/3) + 10), Math.floor(moves[i][1](500/3) + 10)) 
      } else { 
       c.drawImage(o, Math.floor(moves[i][0] * (500/3) + 10), Math.floor(moves[i][1] * (500/3) + 10)); 
      } 
     } 
    } 
}; 
    </script> 
    </head> 


    <body> 
    <canvas id="canvas" width="500px" height="500px"></canvas> 
    </body> 
    </html>

출처

2013-09-24 user232778

나는 자바 스크립트를 들여 썼다. 이제 함수가 정의되지 않은 이유가 분명해야합니다 (다른 범위). 그 외에 : 모든 루프 변수가 로컬인지 확인하십시오 (예 :'var i;'). – ThiefMaster

제대로? 가까이에 : o – Virus721

문제는 draw가 window.onclick에 정의되어 있다는 것입니다,하지만 당신은 window.onload에서 호출하려고합니다. draw의 정의 앞에 닫는 브라켓이 누락되어 있지 않습니까?

출처

2013-09-24 14:13:46

기능을 window.click 기능 밖으로 이동하여 draw() 기능을 시도해보십시오.

window.onclick = function(e) { 
    // ... 
}; 

function draw() { 
    // ... 
}

들여 쓰기가 엄격한 주된 장점 중 하나는 이러한 버그를 매우 신속하게 픽업 할 수 있다는 것입니다.

window.click = function(e) { 
    // ... 
    function draw() { 
     // ... 
    } 
};

코드는 있습니다.

출처

2013-09-24 14:14:49 azz

무승부가 window.onclick 익명 함수의 내부에 위치한 결과, 해당 범위가 지정됩니다. window.onload는 익명 함수의 범위를 공유하지 않기 때문에 window.onload에서 draw에 액세스 할 수 없습니다. 다른 범위에서 호출 할 수 있도록 window.onclick 이벤트에서 draw 함수를 제거해야합니다.

function draw(){} 
window.onload = function(){ /*code*/ }; 
window.onclick = function(){ /* code */ };

출처

2013-09-24 14:40:22

안녕하세요 - 귀하의 회신에 감사드립니다. 너희들이 지적했듯이 내 코딩이 제대로 들여 쓰기가 되었다면 피할 수있는 범위 오류였다. – user232778

P. 나는 이것에 처음이에요. 양해 해 주셔서 감사 드리며 시간을내어 기본적인 질문에 답변 해 주신 것에 감사드립니다. – user232778

잡히지 않은 참조 오류 : 끌기가 정의되지 않았습니다.

답변

관련 문제