Question

我正在尝试使用JavaScript和HTML5完成This tutorial制作一个tic tac toe游戏。

我已多次关注视频中的每一步。虽然我的代码似乎与视频中的代码匹配但我遇到了错误：未捕获的参考错误：未定义绘制。错误发生在第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>

Answer 1

问题是draw中定义了window.onclick，但您尝试从window.onload调用它。在确定draw之前，您确定没有关闭括号吗？

Answer 2

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

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

function draw() {
    // ...
}

严格修改缩进的一个主要好处就是你可以很快掌握这些错误。

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

你的代码是。

Answer 3

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

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

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

3 个答案: