0
我想在javascript中製作遊戲，並且聽說在地圖中呈現的最佳方式是使用平鋪並在稱爲平鋪的程序中製作地圖，然後我可以渲染JSON成一個div，它會載入我所做的地圖，但我不能讓它開始工作它使giveing我這個錯誤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.使用javascript rendereing平鋪json地圖到畫布中
這裏是我的代碼
<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>
可以sombody如有幫我，你希望看到它的頁面是here