Sélectionner des images en dessinant

**bahh66** · 19/12/2022, 17h25

Je pense comprendre le principe, c'est dans le code que je bugge.

Si je reprends, mes images se nomment ImageHeart et celles cliquées ont la classe PicClicked déclenché par le code

Code javascript :

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

1
2
3
4
5
6
7
8
ImageHeart.onclick= function(){
   			this.classList.add("picClicked");
  			nbrverif = document.querySelectorAll('.picClicked').length;
        document.getElementById('verifcount').value=nbrverif;
        imgClicked=nbrverif;
      //  document.getElementById('success').innerHTML= (nbrhearts == nbrverif)? "Bravo!":"Il en reste encore";
 
        }

Il faut créer le bufferImagesClicked[i] en général pour qu'il puisse être utilisé dans la fonction clonePic() et dans la fonction verifier().
Dans la fonction clonePic(), il faut mettre les images cliquées dans le buffer et dans la fonction verifier(), on regarde s'il y a 10 images ou non.
S'il y en a 10, on change de niveau de buffer, sinon, on vide le buffer et on recommence.
Pour vider le buffer, on utilise le code

Code javascript :

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

bufferImagesClicked[indexBuffer] = [];

et on doit aussi supprimer la classe PicClicked des images qui étaient dans le buffer et là il faut utiliser le code

Code javascript :

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

1
2
3
picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
  for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");

Sauf que ce dernier code enlève à tout le monde.
Il faudrait changer la classe des images qui sont dans les buffer pour éviter qu'elles soient affectées?

**SpaceFrog** · 19/12/2022, 17h40

Il le retire à tout le monde car il est dans une boucle sur TOUS les éléments qui portent la classe

Code :

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

1
2
 for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");

Il ne faut en utiliser qu'un petit bout :

Code :

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

.classList.remove("picClicked");

et l'appliquer sur les éléments à le fin du buffer qui ne font pas partie d'une dizaine ... (modulo)

**NoSmoking** · 20/12/2022, 19h11

Envoyé par SpaceFrog

et l'appliquer sur les éléments à le fin du buffer qui ne font pas partie d'une dizaine ... (modulo)

attention sur un buffer linéaire unique si l'on clique 12 fois sur une image il faut pouvoir revenir sur le 12 dernières images et ne pas faire de modulo mais suivre un index.

Envoyé par bahh66

Il faut créer le bufferImagesClicked[i] en général pour qu'il puisse être utilisé dans la fonction clonePic() et dans la fonction verifier().

Il faut penser à effacer la totalité des buffers « enfants » et de remettre l'indexBufferà 0.
On peut créer une fonction simple qui s'en charge et l’appeler où il faut.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
// buffer de stockage des ref. images
const bufferImagesClicked = [];
// index buffer en cours
let indexBuffer = 0;
 
function resetBuffer() {
  for (let i = 0; i < 10; i += 1) {
    bufferImagesClicked[i] = [];
  }
  indexBuffer = 0;
}
// la 1st fois
resetBuffer();

également dans ta fonction populate() et/ou effacer(), je n'ai pas regardé de près.

Dans la fonction clonePic(), il faut mettre les images cliquées dans le buffer et dans la fonction verifier(), on regarde s'il y a 10 images ou non.

J'ajouterais dans le buffer en cours, il ne faut plus toucher à celles validées.

S'il y en a 10, on change de niveau de buffer, sinon, on vide le buffer et on recommence.

Oui comme montré.

**SpaceFrog** · 21/12/2022, 09h14

attention sur un buffer linéaire unique si l'on clique 12 fois sur une image

On peut tester si l'image a déja ou non la class PicClicked ...

**bahh66** · 21/12/2022, 12h24

Bon, j'ai essayé de prendre en compte vos remarques pour modifier le code mais j'ai encore des problèmes bien évidemment.

https://codepen.io/cyril-gomez/pen/zYLOXwq?editors=0010

J'ai créé

Code javascript :

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

let ImageHeart = document.getElementById("elemImage");

afin de pouvoir l'utiliser dans la fonction verifier() car il me semble qu'elle n'était défini que dans clonePic()du coup dans ma fonction verifier(), j'ai modifié le code :

J'ai enlevé les premières lignes :

Code javascript :

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

1
2
3
4
  //const nbrImagesCliked = listImgesCliked.length;
  //let msg = "Encore rien de fait !"
  //if (nbrImagesCliked) {
    // test sur buffer en cours

car je n'arrive toujours pas à comprendre comment utiliser [C]listImgesCliked.length[/] (même si dans clonePic() j'ai mis ça listImgesClicked = bufferImagesClicked[indexBuffer].push('picClicked');)

du coup, je teste seulement si 10 === bufferImagesClicked[indexBuffer].length et dans ce cas, j'enlève la classe picClicked pour la remplacer par imgSaved pour que ces images ne soient plus affectées ensuite.
dans le cas, où il n'y a pas égalité je supprime les classes picClicked

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
function verifier() {
  //const nbrImagesCliked = listImgesCliked.length;
  //let msg = "Encore rien de fait !"
  //if (nbrImagesCliked) {
    // test sur buffer en cours
    if(10 === bufferImagesClicked[indexBuffer].length) {
      picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
  for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
    picclicked.classList.add("imgSaved");
  nbrverif=0;
}
      msg = "Bravo, dizaine réalisée";
      // on se place sur le buffer suivant
      indexBuffer += 1;
    }
    else {
      picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées 
  for (const picclicked of picsclicked) {
     picclicked.classList.remove("picClicked");   // on leur retire tous la class picCliked}
  nbrverif=0;
}
 
      msg = "Cela ne fait pas une dizaine";
/*      // on enlève la classe clicked
      bufferImagesClicked[indexBuffer].forEach((img) => {
        img.classList.remove(picClicked);
      })
      // on reset le tableau
      bufferImagesClicked[indexBuffer] = [];
    }*/
  //}
 
  document.getElementById("success").innerHTML = msg;
}

mon problème, c'est que cela ne fonctionne que pour la première dizaine ensuite, cela ne fonctionne plus donc je pense que j'ai un problème dans les passages de bufferJ'espère que c'est clair ce que j'ai expliqué, même si ce n'est peut-être pas correct en termes de code.

**bahh66** · 21/12/2022, 12h28

En restestant, c'est pas exactement ça.

pour l'instant, si ma première dizaine est bonne, cela fonctionne. Si ce n'est pas le cas, ca ne marche plus du tout même en cas de dizaine bonne.

**NoSmoking** · 22/12/2022, 10h27

J'ai créé
...
afin de pouvoir l'utiliser dans la fonction verifier() car il me semble qu'elle n'était défini que dans clonePic()du coup dans ma fonction verifier(), j'ai modifié le code :

• Reprendre mes remarques post #14, au passage tu n'utilises cette variable que dans ta fonction clonePic() !

• Tant que tu continueras d'écrire ce genre de ligne je ne pourrais rien pour toi

Code :

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

listImgesClicked = bufferImagesClicked[indexBuffer].push('picClicked');

... voir remarque post #16.

• Au passage que ce passe t-il dans ton code lorsque tu cliques deux fois sur le même image !!?!!, il te faut en tenir compte, tu devrais donc faire un test minimum du style :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
// pointe sur le buffer actif, la dizaine en cours
const bufferActif = bufferImagesClicked[indexBuffer];
if(!imageClicked.classList.contains(CLASS_CLICKED)){
  // on store la ref. de l'image
  bufferActif.push(imageClicked);  // imageClicked est la réf. HTMLElement de l'image, pas une chaîne de caract.
  // on ajoute les styles
  imageClicked.classList.add(CLASS_CLICKED);
}
else {
  // pour le moment rien à faire
}

du coup, je teste seulement si 10 === bufferImagesClicked[indexBuffer].length et dans ce cas, j'enlève la classe picClicked pour la remplacer par imgSaved pour que ces images ne soient plus affectées ensuite.

• C'est une autre façon de faire et dans ce cas tu n'as pas besoin de gérer de buffer. Si tu appréhendes mieux cette gestion, fonce.

Attention toutefois il te faudra en tenir compte lors d'un prochain clic sur ces images. Il faut que tu choisisses une méthode et surtout il faut que tu t'y tiennes. Là tu tires dans tous les sens en espérant que cela finisse par fonctionner.

**bahh66** · 22/12/2022, 13h06

Tant que tu continueras d'écrire ce genre de ligne je ne pourrais rien pour toi
...
C'est une autre façon de faire et dans ce cas tu n'as pas besoin de gérer de buffer. Si tu appréhendes mieux cette gestion, fonce.
...
Là tu tires dans tous les sens en espérant que cela finisse par fonctionner.

Mon problème, c'est que je n'ai pas compris l'utilité de listImgCliked, j'ai l'impression que cela fait doublon avec les buffer. Peux-tu m'expliquer en quoi cela consiste?

tu n'utilises cette variable que dans ta fonction clonePic() !

J'étais persuadé de l'utiliser dans verifier() mais en fait je n'utilise que les classes.

Au passage que ce passe t-il dans ton code lorsque tu cliques deux fois sur le même image !!?!!

Ah mince, je ne m'étais pas rendu compte que je pouvais cliquer à nouveau dessus et que du coup mes dizaines ne sont plus valables.
Comment interdire le click sur une image qui contient une classe spécifique (ici imgSaved)?

C'est une autre façon de faire et dans ce cas tu n'as pas besoin de gérer de buffer.

Avec la méthode que j'utilise actuellement vais-je pouvoir faire varier les classes suffisamment pour avoir des couleurs de cercles différentes?
Où est-ce qu'il sera plus facile de d'avoir 10 couleurs différentes avec les buffer?

**NoSmoking** · 22/12/2022, 19h33

Envoyé par bahh66

Mon problème, c'est que je n'ai pas compris l'utilité de listImgCliked, j'ai l'impression que cela fait doublon avec les buffer. Peux-tu m'expliquer en quoi cela consiste?

Tu te focalises sur un problème qui n'en n'est pas un, comme expliqué dans mon post #16, « PS : le code que je t'ai montrer était juste un support », effectivement il y a 1001 façons de récupérer le nombre d'éléments concernés dans le DOM.

Ah mince, je ne m'étais pas rendu compte que je pouvais cliquer à nouveau dessus et que du coup mes dizaines ne sont plus valables.
Comment interdire le click sur une image qui contient une classe spécifique (ici imgSaved)?

Comme dans ton post précédent sur les <area>, tu peux tester si l'image cliquée possède déjà la classe ciblée ou supprimer l'écouteur présent mais qu'il faudra rajouter en cas d’échec. Dans le cas présent je pense que la solution du test est la plus judicieuse.

Avec la méthode que j'utilise actuellement vais-je pouvoir faire varier les classes suffisamment pour avoir des couleurs de cercles différentes?
Où est-ce qu'il sera plus facile de d'avoir 10 couleurs différentes avec les buffer?

A priori toutes les solutions sont envisageables et comme toujours à toi de voir celle que tu sens le mieux, jouer en ajoutant/changeant juste la couleur de la bordure couleur ou gérer des classes, mais chaque chose en son temps.

**bahh66** · 23/12/2022, 09h47

Bon, j'ai fait du tri dans le code et j'ai enlevé ce que je n'utilisais pas (il me semble).

https://codepen.io/cyril-gomez/pen/zYLOXwq

Pour éviter de cliquer 2 fois sur une image, j'ai fait ça en m'inspirant du code de l'autre jeu en effet.

Code javascript :

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

1
2
3
4
5
6
function supprClick(e) {
  picsaved = document.querySelectorAll('.imgSaved');
for (const allpicsaved of picsaved) {
  allpicsaved.removeEventListener("click",ImageHeart.onclick());
}
}

Mais cela ne fonctionne pas. Est-ce parce que ImageHeart.onclick() ne peut pas être défini comme tel dans removeEventListener? Dans ce cas, dois je renommer la fonction dans clonePic() pour qu'elle soit bien supprimé?

**NoSmoking** · 23/12/2022, 11h30

Mais cela ne fonctionne pas. Est-ce parce que ImageHeart.onclick() ne peut pas être défini comme tel dans removeEventListener? Dans ce cas, dois je renommer la fonction dans clonePic() pour qu'elle soit bien supprimé?

Si tu optes pour cette façon de faire et comme tu as affecté l’événement via un onclick il te suffit de redéfinir la fonction sur le onclick comme fonction vide.

Code :

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

1
2
3
4
5
6
    for (const picclicked of picsclicked) {
      picclicked.classList.remove("picClicked"); // on leur retire tous la class picCliked}
      picclicked.classList.add("imgSaved");
      picclicked.onclick = {/* void function */};
      nbrverif = 0;
    }

Nota : tu peux également utiliser classList.replace(oldClass, newClass ) en lieu et place de remove/add.

Vu au passage, dans ta fonction populate il te faut vider le tableau avant de « pusher » de nouvelles valeurs sinon ton tableau va grossir et tu pourrais avoir des doublons !

Code :

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

1
2
3
4
5
6
7
  posXY.length = 0;   // il faut faire une remise à zéro
 
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      posXY.push(i + "_" + j);
    }
  }

**bahh66** · 23/12/2022, 14h47

Merci beaucoup, j'ai l'impression que tout fonctionne. (est-ce sur?)

https://codepen.io/cyril-gomez/pen/zYLOXwq

Je vais ouvrir un autre sujet pour la gestion des couleurs avec les classes en css?