рендеринг мозаичной карты json на холст с использованием javascript

Я пытаюсь создать игру на javascript и слышал, что лучший способ рендеринга на вашей карте — это использование плиток и создание карты в программе под названием плитки, чтобы затем я мог отображать json в div, и он загружал бы карту я сделал, но я не могу заставить ее работать, она продолжает выдавать мне эту ошибку XMLHttpRequest cannot load file:///C:/Program%20Files%20(x86)/Ampps/www/gameQuest/maps/mountain.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

вот мой код

<body>
    <canvas>
    </canvas>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
   $(function() {
        var c = $("canvas")[0].getContext("2d");

        var scene = {
            layers: [],
            renderLayer: function(layer) {
                // data: [array of tiles, 1-based, position of sprite from top-left]    
                // height: integer, height in number of sprites
               // name: "string", internal name of layer
                // opacity: integer
                // type: "string", layer type (tile, object)
                // visible: boolean
                // width: integer, width in number of sprites
                // x: integer, starting x position
                // y: integer, starting y position
                if (layer.type !== "tilelayer" || !layer.opacity) {
                    return;
                }
                var s = c.canvas.cloneNode(),
                    size = scene.data.tilewidth;
                s = s.getContext("2d");
                if (scene.layers.length < scene.data.layers.length) {
                    layer.data.forEach(function(tile_idx, i) {
                        if (!tile_idx) {
                            return;
                        }
                        var img_x, img_y, s_x, s_y,
                            tile = scene.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(scene.tileset, img_x, img_y, size, size,
                        s_x, s_y, size, size);
                    });
                    scene.layers.push(s.canvas.toDataURL());
                    c.drawImage(s.canvas, 0, 0);
                } else {
                    scene.layers.forEach(function(src) {
                        var i = $("<img />", {
                            src: src
                        })[0];
                        c.drawImage(i, 0, 0);
                    });
                }
            },
            renderLayers: function(layers) {
                layers = $.isArray(layers) ? layers : this.data.layers;
                layers.forEach(this.renderLayer);
            },
            loadTileset: function(json) {
                this.data = json;
                this.tileset = $("<img />", {
                    src: json.tilesets[0].image
                })[0]
                this.tileset.onload = $.proxy(this.renderLayers, this);
            },
            load: function(name) {
                return $.ajax({
                    url: "maps/mountain.json",
                    type: "JSON"
                }).done($.proxy(this.loadTileset, this));
            }
        };

        scene.load("mountain");
    });
</script>

кто-нибудь может помочь мне, если вы хотите увидеть страницу, это здесь


javascript canvas html tiled
person Nik Hendricks    schedule 18.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

XMLHttpRequest не может загрузить file:///C:/Program%20Files%20(x86)/Ampps/www/gameQuest/maps/mountain.json. Запросы между источниками поддерживаются только для схем протоколов: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Это означает, что вы не можете использовать XMLHttpRequest для загрузки файлов при использовании схемы протокола file. Это сделано из соображений безопасности, иначе страница сможет получить доступ к любому файлу на вашем компьютере.

Чтобы обойти это, вы должны запустить локальный веб-сервер и получить доступ к своим файлам, например, через протокол http. Простые способы сделать это включают основанный на node.js https://github.com/indexzero/http-server или встроенный Python https://docs.python.org/3.6/library/http.server.html?highlight=http.server#module-http.server.

person Thorbjørn Lindeijer    schedule 19.12.2016