I am trying to make a game in javascript and have heard that the best way to render in your map is by using tiles and to make the map in a program called tiles so then i could render the json into a div and it would load the map i made but i cant get it to work it keeps giveing me this error 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.
here is my code
<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>
can sombody please help me if you would like to see the page it is here
It means that you can't use
XMLHttpRequestto load files when using thefileprotocol scheme. This is for security reasons, otherwise the page would be able to access any file on your computer.To get around this, you should run a local webserver and access your files through the
httpprotocol for example. Easy ways to do this include the node.js based http-server or the Python built-in http.server.