Question

我为我的JavaScript游戏创建了一个JSON格式的平铺加载器。游戏基于2048 x 1280地图，我的画布尺寸为704 x 608。

所以我的困境是当玩家接近画布边缘时如何创建视口/相机，以便地图移动？

在我的情况下，它有点困难，因为我没有像大多数教程那样使用标准的2D数组，所以很让我感到困惑。

加载我的地图的代码如下：

function Level (){

var data;
this.tileset = null;
var returned;
var t = this;


this.load = function(name){
   $.ajax({
        type:"POST",
        url: "maps/" + name + ".json",
        dataType: 'JSON',
       async: false,
       success: function(success){
          returned = loadTileset(success);
       }
    });

    return returned;
};

function loadTileset(json){
    data = json;
    Level.tileset = $("<img />", { src: json.tilesets[0].image })[0]
    Level.tileset.onload = done = true;

    if(done){
        return data;
    }
    else
        return 0;
}

this.draw_layer = function(layer){
    if (layer.type !== "tilelayer" || !layer.opacity) { return; }
//        if (layer.properties && layer.properties.collision) {
//            return;
//        }
    var size = data.tilewidth;
    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;
        ctx.drawImage(Level.tileset, img_x, img_y, size, size,
            s_x, s_y, size, size);
    });
};


this.collisionLayer = function(layer){
        var row = [];
        t.solids = [];
        layer.data.forEach(function(idx, i) {
            var s_x,s_y,
                size = 32;
            s_x = (i % layer.width) * size;
            s_y = ~~(i / layer.width) * size;

            if (i % layer.width === 0 && i) {
                t.solids.push(row);
                row = [];

            }
            row.push([idx,s_x,s_y]);

        });
        t.solids.push(row);
};

return t.solids;
}

这个Level类是从我的主要javascript文件中调用的，如下所示：

layer = scene.load("level_"+level);
                layer = $.isArray(layer) ? layer : layer.layers;

                layer.forEach(function(layer){
                    if(layer.name == "v.bottom" && layer.type == "tilelayer"){
                        b_layer = layer;
                    }
                    else if(layer.type == "tilelayer" && !layer.properties){
                        t_layer.push(layer);
                    }
                    else if (layer.type == "objectgroup"){
                            $.each(layer.objects, function(i, value){
                                coll_layer.push([value.x,value.y,value.width,value.height,"dialogue"]);
                            });
                    }
                });

然后我的主要javascript函数中的更新函数调用了scene.draw_layer（）。

我的地图包含不同的图层，你可以在上面的代码中看到if和if语句确定图层是底层，顶层或对象层的位置，并将其存储在特定的数组中。这只是让玩家在图层之间显示出来。

那么为了澄清一下，对于我的游戏，我将如何根据我的地图加载器创建一个视口/摄像头？

我也会移动地图或播放器吗？

我应该让玩家居中吗？如果玩家居中，那么当地图边缘可见时会发生什么？

这是游戏的实时版本，因此您可以看到它是如何工作的等等：

LIVE DEMO

使用guest作为用户名和密码

非常感谢

更新我相信我做了一个小小的进步，但后果很重要。我已经尝试在JSFIDDLE上实现一个关于这里的问题的视口，它设计用于2D数组，但是我认为它可以用它。

，结果可以在这里找到：

Updated link

如果有人可以看看我出错的地方，我将不胜感激。感谢

为从平铺的Javascript加载的地图创建视口

0 个答案: