未捕獲的參考錯誤：未定義繪製

我想完成This tutorial關於使用JavaScript和HTML5製作一個tic tac toe遊戲。未捕獲的參考錯誤：未定義繪製

我已多次跟蹤視頻中的每一步。雖然我的代碼似乎與視頻中的代碼相匹配，但我仍然遇到一個錯誤：Uncaught Reference Error：未定義繪製。錯誤發生在第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

我已經正確縮進了你的javascript。現在應該很明顯爲什麼函數沒有定義（不同的範圍）。除此之外：請確保所有的循環變量都是本地的（使用例如'var i;'）！ – ThiefMaster

正確嗎？甚至沒有關閉：o – Virus721

的問題是，draw在window.onclick定義，但你嘗試從window.onload調用它。在draw的定義之前，您確定沒有丟失右括號嗎？

來源

2013-09-24 14:13:46

嘗試將draw()函數移出window.click函數。

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訪問繪製。您應該從window.onclick事件中移除繪圖函數，以便可以從其他範圍調用它。

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

來源

2013-09-24 14:40:22

你好 - 感謝你的回覆。正如你們指出的那樣，這是一個範圍錯誤，如果我的代碼被正確縮進，這可能可以避免。 – user232778

P.S.我對此很陌生。感謝您的耐心，並感謝您花時間回答這樣一個基本問題。 – user232778

未捕獲的參考錯誤：未定義繪製

回答

相關問題