0

私はdrawImageタイルとプレーヤーを描画しようとしています。それは動作しますが、最初にプレーヤーを描画してからタイルを描画します。プレーヤーが見えなくなったので、これは逆のはずです。

自分のプレーヤーが抽選されていることをどのように知ることができますか? タイルを描画するもの ( ) を取り出すとif (loadedImagesCount==NUM_OF_TILES) draw();、プレーヤーが表示されるからです。また、プレイヤーが描かれているというメッセージが常にポップアップします。

ヘルプ？

これが私のコードです：

// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 16; // starting from ZERO

    var spawnX = 9; // spawn on X position
    var spawnY = 7; // spawn on Y position
    var playerImg = new Image();
    var currX = 9; // current X position
    var currY = 7; // current Y position

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 1, 13, 1, 13, 1, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 1, 13, 1, 13, 1, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 1, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1]
        ];
    }
}

var drawPlayer = function() {           
        realSpawnX = spawnX * 32;
        realSpawnY = spawnY * 32;
        playerImg.src = "me.gif";
        context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32);
        console.log("Player drawn at (" + spawnX + "," + spawnY + ") Real spawn: X: " + realSpawnX + " Y: " + realSpawnY);
}


window.onload = function () {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    tiles = [];
    board = loadMap(1);

    canvas.width = 512;
    canvas.height = 352;

    // Draw the player .,.. now
    drawPlayer();

    var draw = function() {
        var theX;
        var theY;
        // 3. DRAW MAP BY ROWS AND COLS
        for (x = 0; x <= 10; x++) {
            for (y = 0; y <= 15; y++) {

                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
            }
        }
    } 

    var loadedImagesCount = 0;

    // 2. SET UP THE MAP TILES

    for (x = 0; x <= NUM_OF_TILES; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        imageObj.onload = function() {
            loadedImagesCount++;
            if (loadedImagesCount==NUM_OF_TILES) draw();
        };
        tiles.push(imageObj);
    }


};
4

1 に答える 1

1

これが私が言いたかったことです。変更を加えた場所は明らかです。

// HTML5 JS Tile Example
var canvas, context, board, imageObj, tiles;
var currentMap = 1;
var upMap = 0;
var rightMap = 0;
var leftMap = 0;
var downMap = 3;
var NUM_OF_TILES = 16; // starting from ZERO

    var spawnX = 9; // spawn on X position
    var spawnY = 7; // spawn on Y position
    var playerImg = new Image();
    var currX = 9; // current X position
    var currY = 7; // current Y position

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 13, 1, 13, 1, 13, 1, 13, 13, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 1, 13, 1, 13, 1, 13, 13, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 1, 13, 1, 13, 1, 13, 1, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 1, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1, 13, 13, 13, 13, 1], [1, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 13, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 13, 1, 1, 1, 1, 1, 1]
        ];
    }
}

var drawPlayer = function() {           
        realSpawnX = spawnX * 32;
        realSpawnY = spawnY * 32;
        playerImg.src = "me.gif";
        context.drawImage(playerImg, realSpawnX, realSpawnY, 32, 32);
        console.log("Player drawn at (" + spawnX + "," + spawnY + ") Real spawn: X: " + realSpawnX + " Y: " + realSpawnY);
}


window.onload = function () {
    canvas = document.getElementById("canvas");
    context = canvas.getContext("2d");
    imageObj = new Image();
    tiles = [];
    board = loadMap(1);

    canvas.width = 512;
    canvas.height = 352;

    // Draw the player .,.. now
    //*************No, later

    var draw = function() {
        var theX;
        var theY;
        // 3. DRAW MAP BY ROWS AND COLS
        for (x = 0; x <= 10; x++) {
            for (y = 0; y <= 15; y++) {

                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[x][y]], theY, theX, 32, 32);
            }
        }
    } 

    var loadedImagesCount = 0;

    // 2. SET UP THE MAP TILES

    for (x = 0; x <= NUM_OF_TILES; x++) {
        var imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        imageObj.onload = function() {
            loadedImagesCount++;
            if (loadedImagesCount==NUM_OF_TILES) {
                draw();
                drawPlayer();
            }
        };
        tiles.push(imageObj);
    }
};

onload問題は、ブラウザがネットワークからの画像のフェッチを終了したときに実行されるイベントでタイルが描画されていたことです。drawPlayerしたがって、最後に描画されるすべてのタイル画像をロードするのに 1 ミリ秒以上かかったとしても、どこに呼び出しを行ってもかまいません。解決策は、ハンドラー内のコード ブロックを展開して、onloadすべての画像が読み込まれたかどうかをテストし (このビット: if (loadedImagesCount==NUM_OF_TILES))、マップとプレーヤーを順番に描画できるようにすることでした。

于 2012-04-25T23:14:25.720 に答える