Jump to content

Add grid on a tilemap javascript/json


emma22
 Share

Recommended Posts

Hi,

I want to quad my board game, I don't know how to do...., after I must to add weapons and characters on it. My characters must to move 3 cells max. I need to draw gridlines  to retrieve (or display) the coordinates of each box in order to have a good baseI do not want to make a table  ..  I have worries because I do not master well json, I feel lost.  I have weapons to add to the canvas but there are outside ... I must absolutely use the file json where is the images of the weapons and insert it inside the canvas so to it with mapArray . Sorry for my english😉

I need your help !! Thanks

var mapArray = [ 
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 0, 0, 0, 0, 0, 0, 1, 0]
];

function drawMap() {
var col = [];
var table = document.createElement("table");
for (var i = 0; i < mapArray.length; i++) {
for (var j = 0; j < mapArray[i].length; j++) {
if (parseInt(mapArray[i][j]) == 0) {
$('#canvas').append('<div class="grass"></div>');
}
if (parseInt(mapArray[i][j]) == 1) {
$('#canvas').append('<div class="wall"></div>'); 
}}}}
$('document').ready(function() {
drawMap();
}); 
 
$(document).ready(function(){
$.ajax({
	url:"item.json",
	type:"GET",
	success:function(data){
		console.log(data.myImages);	 
		$.each(data.myImages, function (i, f) {					            
$("#canvas").append("<img src=" + f.url+ " / >");
 
});
	 },
 
   	error:function(jqXHR,textStatus,errorThrown){
		alert(textStatus + errorThrown); 
	}

 

map.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...