1

JavaScript と HTML5 を使用して三目並べゲームを作成するこのチュートリアルを完了しようとしています。

ビデオの各ステップを何度も実行しました。私のコードはビデオのコードと一致しているように見えますが、エラーが発生し続けます: Uncaught Reference Error: draw is not defined. エラーは 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() {
    // ...
}

インデントに厳密であることの主な利点の 1 つは、これらのバグを非常に迅速に検出できることです。

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

あなたが持っていたコードです。

于 2013-09-24T14:14:49.460 に答える
0

draw が wi​​ndow.onclick 無名関数の内部に配置されているため、そこにスコープが設定されます。window.onload はその無名関数のスコープを共有していないため、window.onload から draw にアクセスすることはできません。他のスコープから呼び出されるように、window.onclick イベントから draw 関数を削除する必要があります。

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