2

現在、私は HTML5 をいじり、JavaScript を使用して単純な 2D タイル マップを作成しています。順調に進んでいますが、すべてを 1 つの巨大な関数に収めることはできないことに気付きました。

canvas他の関数からアクセスできるように、context変数をグローバルにしようとしています。現在、「オンロード」でのみ利用可能です...どうすればそれを独自に作成できますか? 変数を入れてcanvas作成すると...エラーが発生しますcontextUncaught TypeError: Cannot call method 'getContext' of null

これが私のSSCCEです：

// HTML5 JS Tile Example

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]];
    }
}

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

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

    // 2. SET UP THE MAP TILES
    for (x = 0; x <= 520; x++) {
        imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        tiles.push(imageObj);
    }
    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);
        }
    }
};

オンライン例: http://mystikrpg.com/html5/

4

1 に答える 1

6

宣言を削除して、var外部で変数を宣言するだけです。

// HTML5 JS Tile Example

// Set return 2D array of map
function loadMap(map) {
    if (map == 1) {
        return [
        [67, 67, 67, 67, 67, 67, 67, 67, 67, 190, 190, 67, 1, 1, 1, 1], [67, 393, 343, 343, 343, 343, 343, 343, 343, 190, 190, 448, 1, 166, 166, 1], [67, 343, 343, 393, 343, 343, 343, 343, 343, 343, 343, 448, 1, 166, 166, 1], [67, 1, 1, 1, 439, 1, 1, 1, 343, 13, 13, 13, 43, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 166, 166, 1], [67, 1, 166, 166, 166, 166, 166, 1, 343, 13, 343, 448, 1, 319, 1, 1], [67, 1, 25, 1, 166, 321, 25, 1, 343, 13, 343, 343, 343, 343, 343, 67], [67, 424, 424, 424, 13, 424, 424, 424, 343, 13, 343, 343, 343, 394, 343, 67], [370, 13, 13, 13, 13, 13, 13, 13, 13, 13, 67, 67, 343, 343, 343, 67], [67, 67, 67, 67, 67, 67, 67, 67, 67, 370, 67, 67, 67, 67, 67, 67]];
    }
}

// On load...

var canvas;
var context;

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

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

    // 2. SET UP THE MAP TILES
    for (x = 0; x <= 520; x++) {
        imageObj = new Image(); // new instance for each image
        imageObj.src = "line_tile/t" + x + ".png";
        tiles.push(imageObj);
    }
    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);
        }
    }
};

これにより、変数がグローバル スコープで作成されます。

于 2012-04-22T17:50:10.017 に答える