Sélectionner des images en dessinant

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

---

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:

---

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:

---

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?

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

Code:

---

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

---

Il ne faut en utiliser qu'un petit bout :

Code:

---

.classList.remove("picClicked");

---

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

Citation:

---

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.

Citation:

---

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:

---

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.

Citation:

---

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.

Citation:

---

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

---

Oui comme montré.

Citation:

---

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

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:

---

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:

---

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:

---

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.

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.

Citation:

---

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:

---

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:

---

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 }

---

Citation:

---

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.

Citation:

---

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?

Citation:

---

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.

Citation:

---

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)?

Citation:

---

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?

Citation:

---

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.

Citation:

---

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.

Citation:

---

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.

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:

---

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é?

Citation:

---

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:

---

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.

https://www.developpez.com/template/kit/kitinfo.png 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:

---

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

---

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?

Citation:

---

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

---

reste à nettoyer ton code plein de variables, non correctement déclarées, qui ne servent à rien :mrgreen:

Je vais m'y ateler