Bonjour à tous, je viens solliciter votre aide car je n'arrive pas à disposer les images de mon tableau comme je le souhaiterai.

Je vous montre ce que j'ai :

et ce que je voudrais obtenir (avec un petit montage paint :p)

voici donc le code que j'ai élaboré jusqu'à présent pour en arriver là :

window.onload=function(){
				var canvas = document.getElementById("canvas");
				canvas.width  = 1120;
				canvas.height = 830;
			    var ctx = canvas.getContext("2d");
			    var sol = document.getElementById("sol");//0
			    var herbe = document.getElementById("herbe");//1
			    var robot = document.getElementById("robot");//2
			    var trap = document.getElementById("trap");//3
			    var clef = document.getElementById("clef");//4
			    var imgSize=32;
				var tab=['1','1','1','1','1','1','1',
						 '1','0','0','0','3','0','1',
						 '1','0','1','0','1','3','1',
						 '1','0','3','1','4','1','1',
						 '1','2','1','1','1','1','1'];
				for(var i=0;i<tab.length;i++){
					for(var j=0;j<7;j++){//semble doubler l'image en la superposant
						if(tab[i]=='0'){
							ctx.drawImage(sol, 0,0,32,32,tab['0']*imgSize*i,tab[j],imgSize,imgSize);
						}
						else if(tab[i]=='1'){
							ctx.drawImage(herbe, 0,0,32,32,tab['1']*imgSize*i,tab[j],imgSize,imgSize);
						}
						else if(tab[i]=='2'){
							ctx.drawImage(robot, 0,0,32,32,tab['2']*imgSize*i,tab[j],imgSize,imgSize);
						}
						else if(tab[i]=='3'){
							ctx.drawImage(trap, 0,0,32,32,tab['3']*imgSize*i,tab[j],imgSize,imgSize);
						}
						else{
							ctx.drawImage(clef, 0,0,32,32,tab['4']*imgSize*i,tab[j],imgSize,imgSize);
						}
					}
				}
			}

Voilà ! Si quelqu'un saurait m'aider je suis preneur ! Cela fait quelques jours que je me creuse la tête sans résultat !

En vous remerciant d'avance,

Timothé.

-
Edité par Nhayku 23 septembre 2017 à 13:48:27

Salut

Là tu as une première boucle qui parcours tout ton tableau du début à la fin, et une seconde qui fait 7 tours. Donc  ton tableau va être parcouru 7 fois.

Il te faut une seule boucle, qui parcours tout ton tableau une seule fois, et incrémenter j de 1 tous les 7 tours.

-
Edité par LCaba 23 septembre 2017 à 15:33:01

LCaba, merci pour ta réponse seulement je ne vois pas exactement comment tu veux que je m'y prenne ? Pourrais tu m'éclairer ?

Par exemple :

var k = 0, j = 0;
for(var i=0;i<tab.length;i++){
   k++;
   if (k == 7) { // on arrive au bout de la ligne
      k = 0;
      j++; // on passe à la ligne suivante
   }
   // Le reste du code ici
}