Discussion :

[dragonno]

Bonjour,

J'ai un problème accès à un attribut d'un objet mais je ne sais pas si c'est dû à ma façon de gérer l'objet ou à ma façon de gérer le tableau 2D ou bien encore à une variable publique, donc je vous expose le problème en bas de mon post.
Je ne sais pas quel attribut mettre entre HTML5 et juste javascript, car le problème n'est pas dû à l'API même j'utilise quand même une fois la fonction draw(), ça me semble être plus un problème de javascript objet qu'un problème d'API.

1) J'ai une classe Sol()
2) Après avoir créé l'objet de cette classe, je le place dans une case d'un tableau 2D, case référencée par les index celx,cely
3) J'ai une boucle qui vérifie l'attribut <stype> de l'objet présent dans chaque case du tableau 2D, afin de vérifier s'il contient bien la valeur placée (6), et dans ce cas un sol est dessiné sur le canvas

Le problème :
drawimage() semble me montrer (en dessinant le sol sur tout le canvas) que ce sol de valeur 6 est contenu dans toutes les cases du tableau 2D, hors je l'ai bien placé que dans une seule case, celle référencée par celx,cely dans la partie 2 de ce post.

[SylvainPV]

Peut-on avoir le code qui encadre la partie 2 ? La création des objets Sol, l'initialisation de celx et cely

[dragonno]

Oui bien sûr :

Création de l'objet sol :

Code :

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

1
2
// Création de l'objet sol.
lesol=new Sol();

Pour l'initialisation des variables celx,cely c'est plus compliqué :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
// Calcule la position celx,cely en nombre de cases, de la case cliquée.
function positionne(event)
{
var x = event.clientX;
var y = event.clientY;
// Calcule la position col,lig (en pixels) du click sur le plan d'affichage.
var col=x-colplan;
var lig=y-ligplan;
}

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
23
 
function quel(event)
{
positionne(event);
if(event.which==1)
   {
   // Bouton gauche pressé : Dessine le tile sur la case du plan d'affichage.
   dessine(celx,cely);
   // Met le tile dans le tableau de la map.
   }
if (event.which==3)
   {
   // Bouton droit pressé
     for (i=0;i<15;i++)
     {
        for (j=0;j<15;j++)
        {
{ctxplan.drawImage(imgset,srcX,srcY,largimg,largimg,(i*32),j*32,largimg,largimg);}
        }
     }
   }
 
}

Je signale que le dessin de l'objet se fait correctement sur la bonne case de la map avec le click gauche, mais dés que j'utilise le click droit pour vérifier la présence des valeurs, ça dessine sur toute la map comme si le tableau était remplit de la valeur 6 dans l'attribut stype de l'objet.
C'est pour ça que je ne sais pas si ça vient de la boucle de dessin ou du tableau ou de l'objet ou encore de numtile qui est contient aussi la valeur 6 et qui est publique.
Numtile a servi lors du click gauche (positionne()) pour mettre la valeur dans la case cliquée (voir partie 2).

Il y a un effet qui peut peut-être donner des indices :
Quand je sélectionne un sol (le 6 ici) et que je fasse "click gauche" sur la map le sol se dessine bien sur la case cliquée, mais si après avoir sélectionné mon sol (ici le sol 6) je fait "click droit" au lieu du gauche, sur la map, alors il ne se passe rien, ni remplissage de la map ni dessin d'une case.
Quoique cet effet s'explique par la condition supérieur que j'ai mis dans la boucle de la fonction draw().
Mais ça n'explique pas pourquoi la map est entierement remplie du sol quand je clique du droit apres avoir cliqué du gauche sur la map.

[SylvainPV]

Il y a des problèmes de scope, tes variables celx et cely sont globales donc elles valent la même chose partout. A lire : http://syllab.fr/projets/web/exposejs/#9

Aussi return celx,cely; est impossible en JS, on ne renvoie qu'une seule variable.

[dragonno]

Aaaah je te remercie beaucoup pour ces infos !

Je vais tester

Je suppose que si je veux envoyer en retour celx et cely en même temps, il va me falloir les mettre en un petit tableau ou un petit objet.

[SylvainPV]

Exact :

Code :

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

1
2
3
4
5
 
return {
   celx: 1,
   cely: 2
};

[dragonno]

Merci beaucoup de ton aide, je suis en train de tester...
Comme celx et cely sont présent à plein d'endroits dans mon code, je regarde comment faire^^

Pour le moment j'ai mis en petit tableau qui lui est public.

Code :

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

1
2
3
4
5
var celx=parseInt(col/largimg);
var cely=parseInt(lig/largimg);
cell[0]=celx;
cell[1]=cely;
return cell;

Juste pour mon info :

Code :

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

1
2
3
4
return {
   celx: 1,
   cely: 2
};

celx et cely sont les mêmes qu'avant là, donc pourquoi ils seraient renvoyés correctement juste parce que je les entourerais d'une accolade ?

[SylvainPV]

Une fonction JS ne peut renvoyer qu'une seule variable. Avec des accolades, tu renvoies un seul objet, qui contient deux variables.

return celx, cely;équivaut à :

Code :

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

1
2
return celx;
cely; //<-- ne fait rien

Je t'encourage à lire un tuto sur la programmation en objet en Javascript, tu y apprendras beaucoup sur les scopes, les constructeurs et les variables locales.

[dragonno]

Je te remercie, en effet j'ai cherché partout des infos concernant la programmation objet avant de me lancer dans ce code, d'où mon objet sol, mais je n'ai nulle part un truc sur le scope, et le lien que tu m'a montré concernant le scope indique qu'une variable privée ne peut etre renvoyée en retour, ça donne "indefined" mais je le savais, et je n'ai toujours pas compris ce qu'est le scope

Pour le moment en mettant celx,cely dans le petit tableau comme j'ai indiqué, j'ai toujours le même problème de la valeur 6 que je vois avec un alert() sur le bouton droit quand je clique sur la map 2D et cette valeur 6 (stype de mon objet) se voit partout sur la map, quelque soit l'endroit où je clique, alors je ne sais pas si cela vient du fait que 6 est partout dans la table ou si c'est parce que le click droit voit toujours la meme variable.

J'ai trouvé des liens sur le scope je regarde :
http://dev.mathiasphilippe.com/varia...g-amusons-nous

[Kaamo]

Des exemples basiques pour bien comprendre le "scope". En gros, ce qu'il faut avoir en tête.
- Chaque variable déclarée en dehors d'une fonction est rattachée directement à l'objet global window
- Dans une fonction, si tu ne déclares pas une variable avec le mot clef var, celle-ci sera considéré comme appartenant à l'objet window
- Dans une fonction, si tu déclares les variables avec le mot clef var, celles-ci ne seront accessibles qu'à l'intérieur de la fonction

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
<script>
// ici on est dans le "scope" global de la page. Chaque variable est attachée à window.
 
var a = 1; // équivaut à window.a = 1, équivaut à window[a] = 1, équivaut à a = 1
console.log(window); // tu verras qu'il y a quelque part notre variable "a"
 
function test() {
  b = 2; // sera contenu dans window à l'exécution de test()
  var c = 3; // ne sera pas contenu dans window à l'exécution de test()
} // cette fonction est attachée à l'objet window
 
test();
console.log(window); // On a pollué window avec nos variables a et b. Notre fonction test(). Mais il n'y a pas c.
</script>

Code javascript :

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

1
2
3
4
5
6
var a = 5;
function test() {
  a = 6; // implicitement window.a
}
test(); 
console.log(a); // 6

Code javascript :

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

1
2
3
4
5
6
var a = 5;
function test() {
  var a = 6; // n'est pas rattaché à l'objet window global. Cette variable a n'est accessible qu'à l'intérieur de test() et ne modifie par l'environnement global
}
test();
console.log(a); // 5

Pour aller plus loin :
- Pourquoi faut-il toujours déclarer ses variables ?
- Comment créer une variable globale dans une fonction ?
- Être conscient que les variables globales, c'est pas bien. Qu'il vaut mieux utiliser le module pattern pour créer ses bouts de code JS.
- Si tu es à l'aise avec l'anglais, je te conseille vivement ce petit Quiz. Quand tu auras tout bon, et compris les réponses, tu aras tout pigé sur le scope.

[dragonno]

Je te remercie beaucoup pour ce mini tuto sur le scope

ça me rappelle la notion de flux dans une page web/css

[dragonno]

Bonjour, je reprend le sujet car j'ai toujours un problème avec mon objet sauf que maintenant je comprend le problème mais je ne vois pas la solution.

J'ai créé l'objet :

Code :

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

var lesol=new Sol();

J'ai une variable numtile qui contient le chiffre 6
var numtile=6;

Je place cette variable dans l'attribut style de l'objet :

Code :

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

map[X1][Y1].set_type(numtile);

Quand je le place dans une case d'un tableau 2D
Il se retrouve dans toutes les cases du tableau alors que je ne l'ai mis que dans une case.
J'ai constaté cela de deux façons : Avec alert() et en affichant le tableau.

- première façon : alert(map[X1][Y1].get_type() );
- Deuxième façon :

Code :

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

1
2
3
4
5
6
7
8
 
     for (i=0;i<15;i++)
     {
        for (j=0;j<15;j++)
        {
       if (map[i][j].get_type()>0) {affichage de la case "i,j" à la position i*32,j*32}
        }
     }

Donc cela signifie que chaque case en fait, fait référence au même objet.
J'ai créé cet objet à partir de différents cours sur le scope des objets mais malgré ça je ne trouve pas d'où vient le problème.

La méthode de get_stype() semble pourtant bien écrite.

[dragonno]

Je mettais l'objet dans une case du tableau grace au click gauche, mais je viens de m'apercevoir que l'objet se retrouve sur tout le tableau seulement si je clique bouton droit de la souris.

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
23
24
25
26
27
28
 
case avec le click droit. */
function quel(event)
{
positionne(event);
var X1=cell[0]; var Y1=cell[1];
// Bouton gauche pressé
if(event.which==1)
   {
   // Met l'objet le tableau.
   map[X1][Y1].set_type(numtile);
   }
// Bouton droit pressé
if (event.which==3)
   {
    var largimg=32;
    var srcY=largimg*Y1;
    var srcX=largimg*X1;
    // Boucle de dessin pour vérifier le contenu du tableau, un test quoi.
     for (i=0;i<15;i++)
     {
        for (j=0;j<15;j++)
        {
       if (map[i][j].get_type()>-1){ctxplan.drawImage(imgset,srcX,srcY,largimg,largimg,(i*32),(j*32),largimg,largimg);}
        }
     }
   }
}

Bon je viens de constater que en fait :
Quand je clique "droit" sur la case 0,0 du tableau, j'ai le tile correspondant sur mon tileset qui se dessine alors sur toute la map.

Donc le problème est concentré dans cette partie-là à mon avis :

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
 
// Bouton droit pressé
if (event.which==3)
   {
    var largimg=32;
    var srcY=largimg*Y1;
    var srcX=largimg*X1;
    // Boucle de dessin pour vérifier le contenu du tableau, un test quoi.
     for (i=0;i<15;i++)
     {
        for (j=0;j<15;j++)
        {
       if (map[i][j].get_type()>-1){ctxplan.drawImage(imgset,srcX,srcY,largimg,largimg,(i*32),(j*32),largimg,largimg);}
        }
     }
   }

Finalement grace à alert() placé comme ça juste après le click droit :
Je me suis aperçu que ça affiche la valeur 6 (de l'objet) quelque soit le lieu où je clique sur le tableau.
Donc à mon avis : get_type() renvoie toujours la même valeur 6 quelque soit la case du tableau que je consulte, la méthode fait toujours référence au même objet.
Le problème est là, alors que un objet avec la valeur 6 ne devrait se trouver que dans une case cliquée avec le gauche.

EDIT : Je brule là ^^
Au debut de mon programme j'initialise le tableau 2D pour recevoir un type d'objet lesol.
Pour ce faire, je parcours tout le tableau et je met l'objet dans chaque case et en donnant 0 à l'attribut stype de l'objet.
Et plus tard, avec le click gauche, je place 6 dans l'attribut stype de l'objet et je range l'objet dans une case du tableau.
Mais ensuite quelque saoit la case que je veux lire je lis toujours la même valeur que j'ai mise, comme si chaque case pointait vers le même objet.
Alors ma question est comment faire pour avoir une même structure d'objet dans chaque case mais avec chacune une valeur différente dans son attribut stype ?

[SylvainPV]

C'est très difficile de t'aider avec des fragments de code dans le désordre.

[dragonno]

Oui c'est ce que je me dis, surtout en fait que je reflechis constament depuis avant hier à ce problème et que je rajoute des choses et en modifie d'autres pour arriver à un résultat.

Mais j'avance^^

J'ai vu que je ne créais pas un objet nouveau à chaque fois que je cliquais gauche sur la map pour poser un sol, hors chaque case doit avoir son propre objet, c'est une de mes erreurs.

Il me reste à savoir pourquoi ma boucle de test placé sur le bouton droit dessine l'objet sur toute la map alors qu'elle ne devrait dessiner que chaque case qui contient un sol numéro 6.
Mais j'avance^^

EDIT : (10 s après^^)
LOL, je viens de trouver un autre truc important

je créais un sol au début de mon programme, j'y mettais 0 puis je le rangeais dans toutes les cases du tableau 2D, pensant ainsi initialiser l'objet de chaque case avec 0 dans tout le tableau et commencer avec une map vierge quoi.
En fait l'erreur est là, en faisant cela je mettais le même objet partout, et c'était normal donc que ma boucle de dessin le trouve sur toute la map.
J'ai placé la création d'un nouvel objet Sol() dans la boucle de mise à 0 de chaque case, plaçant ainsi un nouveau objet dans chaque case, contrairement à ce que je faisais.
Et là ça marche mieux du coup^^
Il me reste une bricole à toucher et ce sera gagné

EDIT :

Hourra !!!

J'ai finalement reussi, ouf, il y avait plein de trucs comme tu as vu :

Mais l'erreur principale venait de :
L'objet qui était créé qu'au début du programme, alors qu'il me fallait le créer pour chaque case du tableau 2D !