未捕获的引用错误:未定义绘制

Uncaught Reference Error: draw is not defined

本文关键字：未定义 绘制 错误 引用      更新时间：2023-09-26

我正在尝试完成本教程，介绍如何使用 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>

问题是draw是在 window.onclick 中定义的，但您正在尝试从 window.onload 调用它。您确定在定义draw之前没有缺少右括号吗？

尝试将draw()函数移出window.click函数。

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

严格处理缩进的主要好处之一是您可以非常快速地发现这些错误。

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

是您拥有的代码。

由于绘制位于 window.onclick 匿名函数内部，因此它的作用域在那里。由于 window.onload 不共享该匿名函数的作用域，因此您无法从 window.onload 访问 draw。您应该从 window.onclick 事件中删除 draw 函数，以便可以从其他范围调用它。

function draw(){}
window.onload = function(){ /*code*/ };
window.onclick = function(){ /* code */ };
相关文章：