Discussion :

[nouby]

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

[CosmoKnacki]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

[nouby]

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

[nouby]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.