Search the Community

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 base, I 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); }