Dessiner un terrain via un tableau de caractères

Version imprimable

Bonjour, je voulais essayer une méthode pour dessiner un monde (map) simple mais je suis pas doué en javascript :)

Je voudrais représenter le caractère 0 par un carré de couleur Cyan et le caractère 1 par un carré de couleur Vert.

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
34
35
36
37
38
var monde=[
    "00000000",
    "11100000",
    "11000000",
    "11100000",
    "00000000"
];
 
// Lit le terrain "monde" et affiche un carré Vert pour 1 et un cyan pour 0.
for (col=0; col<monde.length; col++){
    ligne=monde[col];
    console.log(ligne);
 
    for(i=0; i<8; i++){     
 
 
        car=ligne.charAt(i);
 
 
        if(parseInt(car)==0){
            // Dessine un carré cyan à la position ligxcol.
            ctx2.fillStyle="#00AAFF";
            console.log("bleu : "+ car);
        }
 
        if(parseInt(car)==1){
            // Dessine un carré Vert à la position ligxcol.
            ctx2.fillStyle="#00FF00";
            console.log("Vert : "+ car);
        }
        ctx2.fillRect(100,300+col,40+(10*i),40+(10*col));
        // ctx2.fillRect(100,300+col,(20*i),(20*col));
 
 
        ctx2.fillStyle="#000000";
    }
 
}

ça me fait un grand rectangle couleur Cyan.

11/06/2023, 13h03
CosmoKnacki

Tu as inversé les lignes et les colonnes (la première boucle, c'est les lignes). Tes commandes fillRect ont toutes la même abscisse alors qu'elle devrait changer à chaque nouvelle colonne, quant à l'ordonnée elle ne bouge que d'un pixel. Par contre la hauteur et la largeur devraient être constantes. Il va falloir te repencher sur tes calculs:

Code:

ctx.fillRect(abscisse, ordonnée, largeur, hauteur)

(le traducteur français a inversé abscisse et ordonnée dans la doc de MDN)

En fait non, tu n'as pas inversé les lignes et les colonnes, c'est juste la notation qui est ambiguë avec col: mieux vaut changer ta première boucle en une for of:

Code:

for (const ligne of monde) {

Plutôt que d'écrire: if(parseInt(car)==0){ autant faire if (car === '0') { (pas besoin de changement de type, et toujours faire des comparaisons strictes quand c'est possible).

Tu pourrais écrire le tout de cette manière:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 const monde = [ '00000000', '11100000', '11000000', '11100000', '00000000' ]; const largeur = 10, hauteur = 10; const origin = { x:100, y:300 }; let x, y = origin.y; for (const ligne of monde) { x = origin.x; for (const car of ligne.split('')) { ctx.fillStyle = car === '0' ? '#00AAFF' : '#00FF00'; ctx.fillRect(x, y, largeur, hauteur); x += largeur; } y += hauteur; }

11/06/2023, 14h24
nouby

Merci beaucoup j'ai appris des trucs ;)
Je vais tester ça !

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
// Lit le terrain "monde" et affiche un carré vert pour 1 et un cyan pour 0.
for (let ligne of monde){
 
 
    for(i=0; i<8; i++){     
 
 
        car=ligne.charAt(i);
 
 
        if(car=="0"){
            // Dessine un carré cyan à la position XY = 100,200+(10*ligne).
            ctx1.fillStyle="#00AAFF";
            console.log("bleu : "+ car);
        }
 
        if(car=="1"){
            // Dessine un carré Vert à la position XY = 100,200+(10*ligne).
            ctx1.fillStyle="#00FF00";
            console.log("Vert : "+ car);
        }
        ctx1.fillRect(100,200+(10*ligne),200+(10*i),300+(10*ligne));
 
        ctx1.fillStyle="#000000";
    }
 
}
//Toujours Cyan le carré :
//Je comprend pas d'où ça peut venir.

J'ai essayé avec ça c'est pareil :

Code:

ctx1.fillRect(100,200,100+i,200);

11/06/2023, 15h02
CosmoKnacki

Regarde mes précédents messages, tu n'as peut-être pas vu les modifications. Encore une fois, l'abscisse ne devrait pas être constante et il n'y a aucune raison de faire varier la largeur et la hauteur.

J'ai essayé comme ça mais c'est pareil :/

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
34
35
36
37
38
var monde=[
    "00000000",
    "11100000",
    "11000000",
    "11100000",
    "00000000"
];
 
 
   // Lit le terrain "monde" et affiche un carré vert pour 1 et un cyan pour 0.
    for (let ligne of monde){
 
 
        for(i=0; i<8; i++){     
 
 
            car=ligne.charAt(i);
 
 
            if(car=="0"){
                // Dessine un carré cyan à la position ligxcol.
                ctx1.fillStyle="#00AAFF";
                console.log("bleu : "+ car);
                ctx1.fillRect(100,200,120,220);
            }
 
            if(car=="1"){
                // Dessine un carré Vert à la position ligxcol.
                ctx1.fillStyle="#00FF00";
                console.log("Vert : "+ car);
                ctx1.fillRect(100,200,120,220); // Sans modif de largeur ou hauteur.
            }
 
 
            ctx1.fillStyle="#000000";
        }
 
    }

ça doit venir du fonctionnement du canvas.

11/06/2023, 19h27
CosmoKnacki

Non ça vient de toi. tu ne modifies ni l'abscisse ni l'ordonnée donc fatalement les rectangles s'affichent les uns sur les autres et comme le dernier est cyan tu obtiens un résultat cyan!

3 pièce(s) jointe(s)

J'ai eu enfin le dessin des 1, pas encore celui des 0. mais j'avance.

Je me suis apperçu que en utilisant la boucle "for of" la variable "ligne" était une chaine de 0 et de 1, hors ce n'estpas ce dont j'ai besoin pour faire correspondre une position cartésienne à une couleur, mais ce dont j'avais besoin c'est d'une valeur de lig et col pour dessiner un terrain qui lui est cartésien.

par exemple je pouvais pas faire draw x,y avec x="00011010" x i
par contre pour sélectionner une image du tileset à partir du tableau monde, il fallait utiliser draw x,y avec X=64xi et Y=ligx64

j'ai utilisé des images au lieu de carré de couleur car le canvas est pas adapté pour ce genre de choses mais pour les images oui.
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 34 35 36 37 38 39 40 41 42 function sols(img){ var i=0; let car; let imgnum=0; let sy=0; let sx=0; let dx=0; let dy=0; let dwidth=0; let dheight=0; // Lit le terrain "monde" et affiche un carré vert pour 1 et un cyan pour 0. for (lig=0; lig<monde.length; lig++){ let ligne=monde[lig]; console.log("ligne :"+ligne); for(i=0; i<8; i++){ car=ligne.charAt(i); if(car=="0"){ // Choisit l'image voulue. imgnum=0; sx=imgnum*64; sy=0; console.log("bleu : "+ car); } if(car=="1"){ // imgnum=4; sx=imgnum*64; sy=0; console.log("Vert : "+ car); } dwidth=64; dheight=64; dx=200+(i*64); dy=200+(lig*64); //sy=0; dx=i*32; dy=ligne*32; ctx2.drawImage(sols_unis,sx,sy,64,64,dx,dy,dwidth,dheight); } } }
Pièce jointe 639921

LE TILESET :

Pièce jointe 639922

AAAh je viens de voir qu'en fait j'ai obtenu aussi les 0 mais la couleur du tile 0 se confond avec celle de mon fond ;)

Voilà j'ai essayé une couleur cyan pour la valeur 0 de ligne ta ta ta taaaa ;)

Pièce jointe 639923

1 pièce(s) jointe(s)

J'ai refais avec un tileset plus précis au pixel.

Pièce jointe 639924

LE CODE POUR CEUX QUE ça intéresse ;)

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
   var sols_unis=new Image(); // On déclare un nouveau objet image..
 
    sols_unis.onload=function(){  // Une fonction de l'image qui va lancer la fonction de dessin dés que l'image sera bien chargée en mémoire.
        sols(sols_unis); // La fonction de dessin du terrain.
    }
 
 
    sols_unis.src="img/sols/sols_unis.png"; // L'image qui contient les différents sols du terrain, elle se charge ici..
 
// Ici c'est le terrain à dessiner, le 0 représente un type de sol et le 1 un autre type de sol. On choisit quel type de sol dans la fonction de dessin. 
var monde=[
    "00000000",
    "11100000",
    "11000000",
    "11100000",
    "00000000"
];
 
// La fonction de dessin. On va lui passer en paramètre l'image qui contient tous les sols, c'est un tileset (ou spritesheet c'est selon).
function sols(img){
    var i=0;
    let car;
    let imgnum=0;
    let sy=0; let sx=0; let dx=0; let dy=0; let dwidth=0; let dheight=0;
 
    // Lit le terrain "monde" et utilisera lig pour la ligne et i pour la colonne du terrain.
    for (lig=0; lig<monde.length; lig++){
        let ligne=monde[lig];
        console.log("ligne :"+ligne);
        for(i=0; i<8; i++){     
 
            car=ligne.charAt(i); // ici la variable "car" lira chaque caractère de la ligne de caractères "ligne".
 
            if(car=="0"){   // ici on teste si le caractère lu est un 0, si oui on choisit l'image numéro 3 du tileset, numéro qu'on met dans la variable imgNum.
                // Choisit l'image voulue.
                imgnum=3;
                sx=imgnum*64; sy=0; // SX est la position X de l'image de sol numéro 3. et SY c'est sa position Y. (Source X et Source Y).
                // C'est multiplié par 64 car chaque image de sol fait 64x64 pixels.
            }
 
            if(car=="1"){  // On teste un autre caractère pour avoir un autre type de sol. comme précédement. Cette fois le sol numéro 1.
                // 
                imgnum=1;
                sx=imgnum*64; sy=0;
 
            }
 
            dwidth=64; dheight=64; // Largeur et hauteur de l'image de sol à dessiner (64x64).
            dx=200+(i*64); dy=200+(lig*64); // ici 200 pour X et 200 pour Y, c'est seulement la position ou je commence à positionner le terrain sur l'écran.(on le changera) 
 
            ctx2.drawImage(sols_unis,sx,sy,64,64,dx,dy,dwidth,dheight); // L'instruction qui dessine le sol sur le canvas.
 
        }
 
    }
}

12/06/2023, 10h40
NoSmoking

Bonjour,

Citation:

Bonjour, je voulais essayer une méthode pour dessiner un monde (map) simple mais je suis pas doué en javascript

je te l'ai peut-être déjà dis mais il ne faut pas que cela devienne une fatalité !

Citation:

ça doit venir du fonctionnement du canvas.

Citation:

j'ai utilisé des images au lieu de carré de couleur car le canvas est pas adapté pour ce genre de choses mais pour les images oui.

Citation:

J'ai refais avec un tileset plus précis au pixel.

tu ne doutes de rien quand même, je pense qu'il faut que tu structures plus ta façon de travailler car là cela ressemble plus à du travail à l'emporte pièce !

PS : déjà dis également, lit attentivement les réponses qui te sont faites !