Plateau de jeu quadriller json

Version imprimable

Bonjour,
Je suis débutante, je voudrais faire un plateau de jeu, je voudrais le quadriller mais je suis bloquer.. :calim2: il faut rajouter des coordonnées...voici mon code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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() {
   shuffleMap();
  drawMap();
		});

Merci pour votre aide !!

26/05/2018, 17h27
Bousk

Et tu es bloqué parce que ... ?
Tu ne sais pas faire un tableau html ?
Tu ne sais pas faire un retour à la ligne en html ?
Tu ne sais pas faire de css pour faire une table avec des div ?

1 pièce(s) jointe(s)

Merci de m'aider!! en fait je ne veux pas faire un tableau...!je souhaiterais que le quadrillage de mon terrain soit visible..je dois ajouter les coordonnées mais comment? (car mon personnage doit avancer de 3 cases max) . J'ai des soucis car je ne maitrise pas bien json, je me sens perdue. D'autre part, j'ai des armes a ajouter au canvas qui sont en dehors... je dois absolument utiliser le fichier json où se trouve les images des armes et l’insérer à l’intérieur du canvas donc le mêler à mapArray.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 $(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); }
Pièce jointe 383574

31/05/2018, 13h46
Bousk

:cristal:
Sachant que JSON est juste un format de données, je ne comprends toujours pas ton problème ni pourquoi j'aurais reçu un vote négatif sur mon premier message.
Tu sembles faire du javascript, donc l'affichage se fait à priori dans un browser web en HTML/CSS.
Tu veux un quadrillage (?) mais ne veux pas de tableau... admettons, mais note que je n'ai jamais parlé de <table>, tu fais ton affichage tableau (lignes & colonnes, exactement ce qu'on voit sur ton image..) comme bon te chante (div, span, autres ? pas touché au HTML depuis une dizaine d'années). Tu veux quoi donc ? Ajouter une bordure entre tes images/cases ?! Rien à voir avec JSON, ça s'appelle CSS Border par exemple.

Citation:

je dois ajouter les coordonnées mais comment?

Déjà en commençant par définir et expliquer ce que t'appelles coordonnées et où tu espères les "ajouter"..