http://blog.hashrocket.com/posts/using-tiled-and-canvas-to-render-amines” rel=“noreferer”>this tutorial to be found toload jsonmap documentation produced by tiledmap Editor in my javascript/canvashoo.

只字不提我自己使用过哪一种版本,在 con或净等的火力上没有错误。

只要看一看,就把ole塞。 标识和警示,文字绝对是罚款!

The problem is the canvas stays blank! when it should have a tilemap now on it.

Here is my version of the tutorial implemented in my game:

function Level() {
var c;
var data;
var layers = [];

this.get_map = function(name,ctx){
    c = ctx;
    $.getJSON( maps/ + name +  .json , function(json){
    get_tileset(json);
    });
};

function get_tileset(json) {
    data = json;
    this.tileset = $("<img />", { src: json.tilesets[0].image })[0];
    this.tileset.onload = renderLayers(this);
}

function renderLayers(layers){
    layers = $.isArray(layers) ? layers : data.layers;
    layers.forEach(renderLayer);
}

function renderLayer (layer){
    if (layer.type !== "tilelayer" || !layer.opacity) {
        alert("Not a tileLayer");
    }
    var s = c.canvas.cloneNode(),
            size = data.tileWidth;
    s = s.getContext("2d");

    if (layers.length < data.layers.length) {
        layer.data.forEach(function(tile_idx, i) {
            if (!tile_idx) { return; }
            var img_x, img_y, s_x, s_y,
                tile = data.tilesets[0];
            tile_idx--;
            img_x = (tile_idx % (tile.imagewidth / size)) * size;
            img_y = ~~(tile_idx / (tile.imagewidth / size)) * size;
            s_x = (i % layer.width) * size;
            s_y = ~~(i / layer.width) * size;
            s.drawImage(this.tileset, img_x, img_y, size, size,
                s_x, s_y, size, size);
        });

        layers.push(s.canvas.toDataURL());
        c.drawImage(s.canvas, 0, 0);
    }
    else {
        layers.forEach(function(src) {
            var i = $("<img />", { src: src })[0];
            c.drawImage(i, 0, 0);
        });
    }

}

}

并且从我的主要 j手档案中传来:

$(document).ready(function(){

var canvas = document.getElementById("TBG");
var ctx = canvas.getContext("2d");

var ui = new Gui();
var level = new Level();

//----------Login/Register Gui --------------
$( #TBG ).hide();
$( #load-new ).hide();
$( #reg ).hide();
$( #login ).hide();

//if login_but is clicked do ui.login function
$( #login_but ).click(ui.login);
//if reg_but is clicked do ui.register function
$( #reg_but ).click(ui.register);

$( #new_but ).click(function(){
    game_settings("new");
});

$( #load_but ).click(function(){
    game_settings("load");
});

//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);

$("#reg_submit").click(ui.register_ajax);

$("#welcome").on("click", "#logout_but", ui.logout);

//________________________

//Initialisation of game

function game_settings(state){
    if(state == "load"){
        ui.load_game();
        //do ajax call to load user last save
        level.get_map("level_01",ctx);
    }
    else{
        //set beginning params


        //Change screens
        ui.new_game();
        alert("new game");
    }
}

// End Loop ------------------------------------------------------





});

I don t suppose you lovely people could spot why the tile-map isn t being printed to my canvas?

Thanks for any help Tom