1

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

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

在我的情况下，这有点困难，因为我没有像大多数教程那样使用标准的二维数组，所以这让我非常困惑。

加载我的地​​图的代码是这样的：

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 语句确定图层是底层、顶层还是对象层并将其存储在特定数组中。这只是为了让玩家在层之间显示。

因此，为了澄清，对于我的游戏，我将如何根据我的地图加载器创建视口/相机？

我还要移动地图还是播放器？

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

这是游戏的实时版本，因此您可以了解它的工作原理等：

现场演示

使用 guest 作为用户名和密码

非常感谢

更新 我相信我取得了一个小进步，但后果很严重。我已经尝试在此处的一个问题上从JSFIDDLE实现视口，它旨在与 2D 数组一起使用，但认为 id 试一试。

结果可以在这里找到：

更新链接

如果有人可以看看我哪里出错了，将不胜感激。谢谢

4

0 回答 0