Hi,
I want to add grid to 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(’
}
if (parseInt(mapArray[i][j]) == 1) {
$(’#canvas’).append(’’);
}}}}
$(‘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);
}
