2

私の知る限り、すべての画像を正常にプリロードしました。FireFox ではすべて正常にレンダリングされますが、Chrome では表示されません。私はすでに Webkit ブラウザーで他のランダムな癖に出くわしましたが、これはそのうちの 1 つにすぎないと思います。該当するコードは次のとおりです (冗長であることをお詫びします。そのほとんどは非常に単純です。保証します)。

initResources() は $(document).ready() 関数から呼び出され、キャンバスも適切に初期化されます。

特定の問題はゲームボードにあるようです。X と O (それは tictactoe です...) は問題なく表示されますが、ゲームボードは Chrome だけでキャンバスに表示されることを拒否します。他のすべてのブラウザーで動作します。Chrome の開発者ツールは、[ネットワーク] タブを介して読み込まれていると主張し、コンソールには必要なものがすべて表示されています。ありがとうございました。

[編集: Firefox でも失敗しました。キャッシュの問題だった可能性があり、その時点でさらに混乱しています]

var canvas, context, playerPiece, aiPiece;
var x = new Image();
var o = new Image();
var gameBoard = new Image();
var numResources = 3;   // Total number of resources to wait for loading
var curResources = 0;

function initResources() {
    // Get all our resources ready to go
    x.height = 130;
    x.width = 130;
    x.onload = isLoaded();
    x.src = "images/gamepieceX.png";

    o.height = 130;
    o.width = 130;
    o.onload = isLoaded();// = curResources++;
    o.src = "images/gamepieceO.png";

    gameBoard.height = 500;
    gameBoard.width = 500;
    gameBoard.onload = isLoaded(); //= curResources++;
    gameBoard.src = "images/gameBoard.png";
}

function isLoaded() {
    curResources++;
    console.log("Loaded resource! Total: " + curResources);
    if(curResources == numResources) {
        console.log("All loaded up! Moving on!");
        gameSetup();
    }
}

function gameSetup() {
    // Draw our board and assign a piece
    console.log("Setting up game!");
    playerPiece = x;
    aiPiece = o;

    // Draw gameboard
    context.drawImage(gameBoard, 0, 0);
    console.log(gameBoard);

    canvas.addEventListener ("mousedown", mouseClicked, false);
}
4

2 に答える 2

0

各画像の .onload のコールバックではなく、関数をインラインで呼び出していました。これは、イメージがロードされる前にゲームの初期化を開始していました。コメントしてくれた人たちに感謝しますが、ここに投稿した直後にこれを見ました:)

于 2013-03-12T05:30:44.033 に答える