Javascript 未捕获参考错误：未定义绘图_Javascript_Html

Javascript 未捕获参考错误：未定义绘图

javascript html

Javascript 未捕获参考错误：未定义绘图,javascript,html,Javascript,Html,我正在尝试使用JavaScript和HTML5制作一个井字游戏视频中的每一步我都跟着看了好几遍。虽然我的代码似乎与视频中的代码匹配，但我一直遇到一个错误：未捕获引用错误：未定义绘图。错误发生在第12行我一定是忽略了什么。有人能指出吗 <!DOCTYPE html> <html> <head> <title>Tic Tac Toe!</title> <script type="text

我正在尝试使用JavaScript和HTML5制作一个井字游戏

视频中的每一步我都跟着看了好几遍。虽然我的代码似乎与视频中的代码匹配，但我一直遇到一个错误：未捕获引用错误：未定义绘图。错误发生在第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>


抽抽搭搭！
var c，canvas；
var-turn=1；
window.onload=函数（）{
canvas=document.getElementById（“canvas”）；
c=canvas.getContext（“2d”）；
draw（）；
}
var移动=[]；
window.onclick=函数（e）{
如果（e.pageX<500和&e.pageY<500）{
var cX=数学楼层（e.pageX/（500/3））；
var cY=数学楼层（e.pageY/（500/3））；
var alreadyClicked=false；
因为（我在移动中）{
如果（移动[i][0]==cX和移动[i][1]==cY）{
alreadyClicked=真；
}
}
如果（alreadyClicked==false）{
移动[（移动.长度）]=[cX，cY，turn]；
转弯=转弯*-1；
draw（）；
}
}
var bg=新图像（）；
var x=新图像（）；
var o=新图像（）；
bg.src=“ttt_board.png”；
x、 src=“ttt_x.png”；
o、 src=“ttt_o.png”；
函数绘图（）{
c、 clearRect（0,0500500）；
c、 drawImage（bg，0,0）；
因为（我在移动中）{
如果（移动[i][2]==1）{
c、 drawImage（x，数学地板（移动[i][0]*（500/3）+10），数学地板（移动[i][1]（500/3）+10））
}否则{
c、 drawImage（o，数学地板（移动[i][0]*（500/3）+10），数学地板（移动[i][1]*（500/3）+10））；
}
}
}
};
问题是绘图是在窗口中定义的。onclick
，但您试图从窗口调用它。onload
。在定义draw
之前，您确定没有缺少右括号吗？
问题是draw
是在窗口中定义的。onclick
，但您试图从窗口调用它。onload
。是否确定在定义draw
之前没有缺少右括号？
尝试将draw（）
函数移出窗口。单击函数
window.onclick = function(e) {
    // ...
};

function draw() {
    // ...
}

严格限制缩进的一个主要好处是，您可以很快发现这些错误
window.click = function(e) {
    // ...
    function draw() {
        // ...
    }
};

是您拥有的代码。
尝试将draw（）
函数移出窗口。单击函数
window.onclick = function(e) {
    // ...
};

function draw() {
    // ...
}

严格限制缩进的一个主要好处是，您可以很快发现这些错误
window.click = function(e) {
    // ...
    function draw() {
        // ...
    }
};

是您拥有的代码。
由于draw位于窗口内部。单击匿名函数，它的作用域就在那里。由于window.onload不共享该匿名函数的作用域，因此无法从window.onload访问draw。您应该从window.onclick事件中删除draw函数，以便可以从其他作用域调用它
function draw(){}
window.onload = function(){ /*code*/ };
window.onclick = function(){ /* code */ };

由于draw位于window.onclick匿名函数的内部，因此它的作用域在那里。由于window.onload不共享该匿名函数的作用域，因此无法从window.onload访问draw。您应该从window.onclick事件中删除draw函数，以便可以从其他作用域调用它
function draw(){}
window.onload = function(){ /*code*/ };
window.onclick = function(){ /* code */ };

我已经正确地缩进了你的javascript。现在应该很清楚为什么没有定义函数（不同的作用域）。除此之外：请确保所有循环变量都是本地变量（使用例如var i；
）！适当地？甚至不接近：我已经正确缩进了你的javascript。现在应该很清楚为什么没有定义函数（不同的作用域）。除此之外：请确保所有循环变量都是本地变量（使用例如var i；
）！适当地？甚至不接近：oHello-谢谢你的回复。正如你们所指出的，这是一个范围错误，如果我的代码正确缩进的话，这可能是可以避免的。我是新来的。谢谢你的耐心，谢谢你花时间回答这样一个基本的问题。你好-谢谢你的回答。正如你们所指出的，这是一个范围错误，如果我的代码正确缩进的话，这可能是可以避免的。我是新来的。感谢您的耐心，感谢您抽出时间回答这样一个基本的问题。