Skip to content

Instantly share code, notes, and snippets.

@Ablu
Last active Aug 29, 2015
Embed
What would you like to do?
minimalistic tiled html5 example

Nothing special. Only a very minimalistic tiled map renderer.

var PARSER = {
JSON = {
}
};
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script src="jsonparser.js"></script>
<script type="application/javascript">
var ctx = undefined;
var map = undefined;
function loadMap(url) {
loadJSONMap("test.json", function(json_map) {
map = json_map;
if (!map)
return;
var num_of_loaded = 0
for (var i = 0; i < map.tilesets.length; ++i) {
map.tilesets[i].img = new Image();
map.tilesets[i].img.onload = function() {
if (++num_of_loaded == map.tilesets.length) {
init();
}
}
map.tilesets[i].img.src = map.tilesets[i].image;
}
});
}
function load() {
loadMap("test.json");
}
function renderCell(x, y, id) {
if (id == 0)
return; // Skip empty cells
var set;
// Search right tileset image
for (var i = 0; i < map.tilesets.length; ++i) {
if (map.tilesets[i].firstgid <= id)
set = map.tilesets[i];
}
var tile_id = id - set.firstgid;
var set_width = set.imagewidth / set.tilewidth;
var tile_x = tile_id % set_width
var tile_y = Math.floor(tile_id / set_width);
ctx.drawImage(
set.img, tile_x * set.tilewidth, tile_y * set.tileheight,
set.tilewidth, set.tileheight,
x * set.tilewidth, y * set.tileheight,
set.tilewidth, set.tileheight
);
}
function init() {
ctx = document.getElementById("canvas").getContext("2d");
for (var layer = 0; layer < map.layers.length; ++layer) {
for (var cell = 0; cell < map.layers[layer].data.length; ++cell) {
var x = cell % map.layers[layer].width;
var y = Math.floor((cell - x) / map.layers[layer].height);
renderCell(x, y, map.layers[layer].data[cell]);
}
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onload="load();">
<canvas id="canvas" width="1000" height="1000"></canvas>
</body>
</html>
function loadJSONMap(url, callback) {
$.getJSON(url, function(json) {
var map = json;
var num_of_loaded = 0
// Random checks if it is a valid tiled generated map
if (!(map.layers && map.orientation && map.tilesets))
callback(null);
for (var i = 0; i < map.tilesets.length; ++i) {
map.tilesets[i].img = new Image();
map.tilesets[i].img.onload = function() {
if (++num_of_loaded == map.tilesets.length) {
init();
}
}
map.tilesets[i].img.src = map.tilesets[i].image;
}
callback(map);
});
}
{ "height":10,
"layers":[
{
"data":[29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29, 29],
"height":10,
"name":"ground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 14, 3, 0, 0, 0, 0, 0, 0, 0, 12, 0, 10, 0, 0, 0, 0, 0, 0, 1, 5, 8, 6, 9, 0, 0, 0, 0, 0, 0, 0, 0, 10, 5, 9, 0, 0, 0, 0, 7, 8, 9, 13, 3, 12, 0, 0, 0, 0, 10, 11, 12, 0, 13, 15, 0, 0, 0, 0, 13, 14, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"height":10,
"name":"grass",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
}],
"orientation":"orthogonal",
"properties":
{
},
"tileheight":32,
"tilesets":[
{
"firstgid":1,
"image":"grass.png",
"imageheight":192,
"imagewidth":96,
"margin":0,
"name":"grass",
"properties":
{
},
"spacing":0,
"tileheight":32,
"tilewidth":32
},
{
"firstgid":19,
"image":"dirt.png",
"imageheight":192,
"imagewidth":96,
"margin":0,
"name":"dirt",
"properties":
{
},
"spacing":0,
"tileheight":32,
"tilewidth":32
}],
"tilewidth":32,
"version":1,
"width":10
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment