1

我正在尝试完成有关使用 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>
4

3 回答 3

3

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

于 2013-09-24T14:13:46.967 回答
2

尝试将draw()功能移出window.click功能。

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

function draw() {
    // ...
}

严格缩进的主要好处之一是您可以很快发现这些错误。

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

是你的代码。

于 2013-09-24T14:14:49.460 回答
0

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

function draw(){}
window.onload = function(){ /*code*/ };
window.onclick = function(){ /* code */ };
于 2013-09-24T14:40:22.520 回答