11521 sujets

JavaScript, DOM et API Web HTML5

Problème affichage images sur canvas Json et ajout quadrillage,help !

Smiley sweatdrop Bonjour,
Je suis débutante, je fais un plateau de jeu, je voudrais le quadriller mais je suis bloquée. il faut rajouter des coordonnées sans utiliser de 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.
Quelqu'un peut m'aider svp?
Merci d'avance upload/1527967973-34731-map.png .

voici mon code:

ar 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();
		});

$(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); 
	}
J'ai vraiment du mal à saisir la logique de ton code. À vrai dire je n'ai jamais vu de cas où on utilise un canvas pour générer du html... Smiley sweatdrop C'est un peu contre-productif.

Bon dans tout les cas, visiblement les images sont générées à l'intérieur des blocs. Tu as deux solutions pour afficher un quadrillage : soit tu ajoutes en CSS un ::after en absolute qui prend tout le bloc de la case, et qui possède un outline. Soit tu ajoutes un cadre directement dans l'image, avec un outil d'édition d'image, du style Paint ou Photoshop.

Ensuite tes items, tu les ajoutes dans ton canvas, après le traitement de la grille qui ajoute les herbes et les murs. Du coup, ton script va construire la map, puis ajouter les armes à la fin de ton canvas. Si tu veux qu'ils soient positionnés sur le terrain, il va falloir que tu les ajoutes durant la construction de la carte :

- Soit durant la création du terrain, en remplaçant une herbe ou un mur par une arme en question.
- Soit en l'injectant à un bloc portant la classe "grass" de manière aléatoire. Ainsi elle apparaitra quelque part sur le terrain.

Après attention, je ne sais pas ce que tu veux en faire. Donc l'une ou l'autre solution risque d'altérer les fonctionnalités futures de ton script.

Ce que je te conseille personnellement, avant de te lancer dans des projets "un peu complexe", essaye de bien comprendre l'utilité et le fonctionnement de la balise canvas. Et son utilisation dans la construction d'un jeu en JS. Smiley cligne
Merci Nolan, c'est vraiment gentil d'avoir du temps pour m'aider!! Smiley biggrin je vais essayer de suivre tes conseils...
Dans drawMap() tu crées un élément <table> mais il n'est pas inséré dans le document et on ne lui ajoute aucune cellule.

Le tableau mapArray[] est un tableau d'integers. Donc il est inutile de faire un parseInt() sur ses valeurs.

L'ID '#canvas' prête à confusion. Je ne pense pas qu'il est un lien avec la balise <canvas>

Pour tracer une grille il suffit de donner, en CSS, une bordure à chaque rangée <tr> et à chaque cellule <td>. Penser à faire un "border-collapse sur la table"

Il serait intéressant de connaître la structure de la page HTML qui contient ce "#canvas"
et de la structure du fichier "item.json"

D'où sort cette fonction shuffleMap() ?

A quoi sont destinés ces '<img src=" + f.url+ " / >' ? A être collés dans une case du tableau une fois pour toutes , à être déplacée, à bouger toutes seules ?
Modifié par bazooka07 (03 Jun 2018 - 21:34)
Merci beaucoupBazzoka07 !!, en fait j'ai tellement fait d'essais, j'ai laissé des "restes" qui ne devraient pas être là...dont l'élement <table>... et pour shuttleMap je n'ai pas mis tout mon code.
<img src=" + f.url+ " / >' sont les armes, elles ne bougent pas mais peuvent être échanger si un joueur passe sur la case.
Mon idéal serait de mettre tous les objets dans le fichier json y compris la mapArray, armes et perso. et que j'arrive à pouvoir récupérer les coordonnées du canvas pour que je puisse faire bouger les personnages de 3 cases max. Mon problème c'est que je ne maitrise pas bien json et n'arrive pas a afficher les objets dans des cases... 
{ 
 "myImages": [
 { 
 "id": "machette", 
 "url": "img/machette.png" 
 }, 
 { 
 "id": "arc", 
 "url": "img/arc.png" 
 }, 
 { 
 "id": "poignard", 
 "url": "img/poignard.png" 
 }, 
 { 
 "id": "epee", 
 "url": "img/epee.png" 
 },
 { 
 "id": "walls", 
 "url": "img/wall.png" 
 } 
 ]
	 }
Il faut donner un attribut "id" à tes cellules pour accéder directement à leurs contenus.
L' élément "<table>" était une bonne idée. Pourquoi la rejeter ?
Tu pars du principe que ton tableau fait 10x10 cellules. Lorsque les dimensions changeront, on fait quoi ?
Voici un exemple en pure Javascript, je te laisse le soin de l'adapter à jQuery :
https://gist.github.com/bazooka07/365b87efd5815a8eec9d27bacd63404a
Aucun souci pour intégrer mapArray dans le JSON.
Dans ton JSON ci-dessus il manque les coordonnées pour positionner les armes sur la map.
Meilleure solution
Sujet clos
Aller à