Sélectionner des images en dessinant

Version imprimable

13/12/2022, 21h36
bahh66

Sélectionner des images en dessinant

Bonjour,
ce message fait suite à ce post.

Maintenant que les images s'affichent, j'aimerais que mes élèves puissent jouer.
Je m'explique :
1- l'idéal serait de pouvoir tracer un "cercle" autour de 10 images qui sont apparues, si 10 images sont bien entourées c'est ok sinon, un message apparait pour leur dire qu'il y en a trop ou pas assez dans leur cercle. Bien évidemment cela pose des problèmes que je n'imagine même pas. J'ai trouvé un code permettant de dessiner (ici section application de dessin simple). A partir de là est-il possible de savoir quelles sont les images qui sont entourées?

2-Si la solution optimale pour mes élèves n'est pas faisable, je pensais faire "cliquer" les images par mes élèves, celles-ci changeant de couleur (ou avec un cadre ou autre...) quand ils pensent qu'il y en a 10, ils cliqueraient sur un bouton validant ou non la quantité d'images sélectionnées. Cette solution est-elle envisageable?

Merci pour vos réponses.
14/12/2022, 08h31
SpaceFrog

Tracer un cercle autour est relativement complexe car il faudra pouvoir déterminer si le cercle dessiné contient bien l'image, ce qui n'est pas une mince affaire.

Il sera beaucoup plus simple d'attribuer une bordure au click sur l'image.
https://jsfiddle.net/pkcghw3r/1/

avec un peu de style pour rendre limage ronde ...
14/12/2022, 14h08
bahh66
C'est bien ce qui me semblait, la solution 1 me paraissait infaisable.

Pour la solution 2, j'ai essayé de coder la vérification de la dizaine à partir de ton code, mais je me heurte à un problème de compréhension.

J'ai mis un button en plus dans le html
Code:

1 2 3 <div id="layer4" style=""> <button onclick="verifier()">Verification</button> </div>
et dans le script, j'ai essayé de définir cette fonction
Code:

1 2 3 4 5 6 7 function verifier() { if (imgClicked === 10) { alert("C'est bien une dizaine");} else {alert("Tu n'as pas bien compté, cela ne fait pas 10."); cleanCercle();} }
Mon problème reste dans la définition de la variable imgClicked, je ne sais pas à partir de ton code comment récupérer l'info du nombre d'images cliquées.
De plus je me demande s'il n'y aura pas un problème si je clique plusieurs fois sur la même image.

Enfin, je pensais créer une fonction cleanCercle() qui enlèveraient les cercles si 10 images seulement n'ont pas été cliquées (mon objectif est de leur faire comprendre qu'une dizaine c'est exactement 10).
Mais je me dis aussi que cette fonction risque de supprimer les cercles de toutes les images même si l'on a réussi des dizaines au début.
Peut-être faut-il que je créé un css de couleur différente pour la première dizaine, la deuxième... jusqu'à la neuvième? et que la fonction ne supprime que ceux de la couleur en cours. Mais est ce faisable simplement?
14/12/2022, 15h03
SpaceFrog
https://jsfiddle.net/1khes5pn/1/

Il suffit de declarer la variable nbrhearts en global pour la comparer dans la fonction de verification

au click sur l'image on ajoute la classe picClicked
Code:

1 2 3 this.classList.add("picClicked"); nbrverif = document.querySelectorAll('.picClicked').length;
et on a le nombre d'images cliquées ...
En fait je me sers de la class picClicked comme d'un flag

Ne pas oubliéer de remettre les compterus à zero dans effacer ...
14/12/2022, 16h06
bahh66
J'ai essayé de modifier pour que l'élève puisse vérifier de lui même s'il a fait une dizaine et que les cercles soient supprimés si ce n'est pas le cas.

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

Mais cela ne fonctionne pas. Je pensais qu'en créant une fonction je pourrais remettre le css de l'image à zéro via la ligne
Code:

1 2 3 if (imgClicked != 10) { picClicked.style.border=""; }
J'ai aussi essayé de remettre à zéro le compteur du nombre d'images cliquées mais du coup je n'arrive pas à voir si cela a fonctionné.

Salut

Un petit HTML pour te faire voir le principe de comptage et changement de class.

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
<!DOCTYPE html>
<html lang="fr"> <!-- ClickImage.html -->
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<title>Clique sur images</title>
		<style>
                        /* ************************************ Commentaires ********************************************** */
                        .yesselect{
                                border: 2px solid blue;
                                border-radius:50%;
                        }
                        .notselect{
                                border: 0px solid blue;
                        }
                </style>
		<script>//---------------------------------------------------------------------------------------
                        'use strict'; // force la déclaration des variables
                        // ************************************ Commentaires ****************************************
                        let NbrSelect=0;
                        //---------------------------------------------------------------------------------------------
                </script>
	</head>
	<body>
		Image sélectionnée(s):<span id="score">0</span>
		<br />
		<img  id="Img1" src="CLOUD.ICO" class="notselect" alt="une image" title="image N°1" onclick="Verif(this)">
		<img  id="Img2" src="Calibrage.ico" class="notselect" alt="une image" title="image N°2" onclick="Verif(this)">
		<img  id="Img3" src="SUN.ICO" class="notselect" alt="une image" title="image N°3" onclick="Verif(this)">
		<!-- ************************************** Commentaires *********************************************** -->
		<script>//---------------------------------------------------------------------------------------
                        function Verif(elem){
                                if (elem.className=="notselect"){
                                        elem.className="yesselect";
                                        NbrSelect++
                                        document.getElementById("score").textContent=NbrSelect;
                                }else{
                                        elem.className="notselect";
                                        NbrSelect--
                                        document.getElementById("score").textContent=NbrSelect;
                                }
                                if (NbrSelect==3){
                                        alert("Trés bien vous avez sélèctionné toutes les images");
                                        for (let i = 1, iMax  = 3; i <= iMax; i++) {
                                                document.getElementById("Img"+i).className="notselect";
                                        }
                                        NbrSelect=0;
                                        document.getElementById("score").textContent=NbrSelect;
                                }
                                
                        }
                        //---------------------------------------------------------------------------------------------
                </script>
	</body>
</html>

Bien sûr il te faut mettre tes propres liens source pour les images

Code:

1
2
3
4
5
6
7
8
9
10
function verifier() {
  document.getElementById('success').innerHTML= (imgClicked == nbrhearts)? "Bravo!":"Cela ne fait pas "+ nbrhearts;  
  if (imgClicked != nbrhearts) {
    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;
}
}

14/12/2022, 21h00
bahh66

Dans le html de ProgElecT, la fonction Verif s'applique sur les différentes images du body, mais dans le code que l'on a déjà, on a une seule image qui est dupliquée dans le script. Est-ce possible d'utiliser la même fonction mais sur les ImageHeart contenus dans le script?

Dans ton code SpaceFrog, je ne comprends pas la ligne suivante :

Citation:

const picclicked of picsclicked

.

En revanche, le code enlève tous les cercles une fois une mauvaise réponse donnée au préalable. Est-il possible de faire en sorte que si le click sur le bouton=10 images, ces cercles là ne s'enlèvent plus. Cela permettrait de faire une première sélection de 10 images, puis une seconde et ainsi de suite jusqu'au moment où l'on ne peut plus faire de groupes de 10 images.

Je sais pas si je suis assez clair.
15/12/2022, 08h13
SpaceFrog
Code:

1 2 picsclicked = document.querySelectorAll('.picClicked'); // collection des images clickées for (const picclicked of picsclicked) {
Il s'agit d'une boucle sur la collection des images ayant la classe picClicked que j'ai récupéré avec

Code:

picsclicked = document.querySelectorAll('.picClicked');

traduction :
pour chaque image de la collection d'images

Je n'ai pas compris la fonctionnalité des de dizaines ...

Tu veux dire que tu veux faire des paliers de sélection par dizaine, une fois une dizaine sélectionnée elle reste entourée et seuls les 1 à 9 images suivantes restent entourées ?

Si c'est le cas il faudrait créer un array des selection (avec un push kors du click) et baser la fonction effacer dessus, l'effacement conserverait les x premières dizaine de l'array.

En fait un exemple du jeu tel que j'aimerais qu'il se déroule.

Le tirage donne 52 images, l'élève voit les images mais pas le nombre. L'objectif est qu'il trouve qu'il y a 52 images.

L'élève doit donc entourer 10 images pour créer une dizaine, puis une autre... jusqu'à en obtenir 5 complètes et 2 images non entourées.

Ca peut donner ça du coup.

- Il clique sur 9 images et verifie la dizaine -> elle est incomplète donc les cercles s'effacent.
- Il clique sur 10 images, la dizaine est bonne donc les cercles restent.
- Il clique sur 11 autres images (sans cercle), la dizaine n'est pas bonne donc les cercles de ces 11 images s'effacent mais les premiers (ceux de la première dizaine) restent bien visibles.
- Ainsi de suite.

Donc en effet, il me faut des sortes de palier de dizaines (10, 20, 30, 40...). Dans l'idéal, les cercles de chaque dizaine sont de couleurs différentes (mais peut-être faudra-t-il que je m'y penche plus tard).

Donc comme tu me le proposes, il faut j'imagine que je créé un array comme celui-ci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function createTable() { Table = document.createElement('table'); for (i = 0; i < 10; i++) { line = document.createElement('tr'); for (j = 0; j < 10; j++) { cell = document.createElement('td'); cell.id = "cell" + i + "_" + j; line.appendChild(cell); } Table.appendChild(line) } document.body.appendChild(Table); } createTable();
dans lequel, je stocke mes dizaines qui sont validées pour eviter que leurs cercles ne disparaissent?

16/12/2022, 08h53
NoSmoking

Bonjour,

Citation:

Ca peut donner ça du coup.
...

cela me paraît un peu compliqué pour des « petits bouts de 6 ans » !

Citation:

Donc comme tu me le proposes, il faut j'imagine que je créé un array comme celui-ci :

j'ai le sentiment que tu confonds les array JavaScript avec les <table> HTML qui n'ont pas la même utilité.
16/12/2022, 13h08
bahh66

Citation:

cela me paraît un peu compliqué pour des « petits bouts de 6 ans » !

Ah Ah, pas du tout. C'est même l'essentiel du travail en maths en CP. Comprendre le système décimal. Cet exercice permet de comprendre que le système décimal facilite le "comptage" d'objets. Bien évidemment ca prend du temps.
Ca fait un mois que l'on est là-dessus avec mes élèves. Je fais exactement le même exercice sur feuille, mais certains galérant sur la tenue du crayon/stylo, je me suis dit que numériquement cela pouvait leur faciliter un peu la tache.

Citation:

j'ai le sentiment que tu confonds les array JavaScript avec les <table> HTML qui n'ont pas la même utilité.

Sur le coup, j'ai en effet complètement fusionner les deux.
Du coup, est ce que je peux créer un array et lorsque la dizaine est bonne, je les y ajoute. Et si la prochaine dizaine est erronée je supprime les cercles sauf ceux des images de l'array?
17/12/2022, 17h34
bahh66

Alors j'ai essayé de créer tout ça mais j'ai un soucis.

J'explique ce que j'ai fait.
https://codepen.io/cyril-gomez/pen/YzjKLzQ?editors=0010

J'ai créé un array nommé imgSaved, et du coup dans ma fonction verifier(), je lui demande d'ajouter une classe picSaved sur les images cliquées, puis je les ajoute à l'array.
Ainsi je pensais que si ensuite je remove la classe picClicked pour les images suivantes celles avec picSaved ne seraient pas affectées.

Citation:

Cet exercice permet de comprendre que le système décimal facilite le "comptage" d'objets. Bien évidemment ca prend du temps.
Ca fait un mois que l'on est là-dessus avec mes élèves. Je fais exactement le même exercice sur feuille, mais certains galérant sur la tenue du crayon/stylo, je me suis dit que numériquement cela pouvait leur faciliter un peu la tache.

Les buchettes, les billes et les cartes fonctionnent également bien :mouarf:

Pour en revenir à la gestion et pour répondre à tes questions, il te suffit de gérer un « buffer » dans lequel tu stokes les images cliquées et cela pour chaque dizaine.

En gros deux méthodes, création à la volée du buffer ou création au départ, on va prendre la 2^éme, peut-être plus simple à prendre en compte !
Code:

1 2 3 4 // buffer de stockage des ref. images const bufferImagesClicked = []; // index buffer en cours let indexBuffer = 0;
Ton buffer devant comporter 10 niveaux, jusqu'à 100 donc on peut faire un truc simple :
Code:

1 2 3 for (let i = 0; i < 10; i += 1) { bufferImagesClicked[i] = []; }
Chaque indice de bufferImagesClicked est un array. Pour la 1st dizaine indexBuffer vaudra 0, pour la 2nd indexBuffer vaudra 1 ... etc

De la sorte tu n'as plus qu'à gérer le bufferImagesClicked en cours et de ne pas t'occuper des autres.

Si tu valides une dizaine tu passes à l'indice indexBuffer suivant.
Si tu ne valides pas tu ré-init les images référencées dans le buffer courant soit bufferImagesClicked[indexBuffer].

Cela pourrait ressembler à quelque chose comme :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function verifier() { const nbrImagesCliked = listImgesCliked.length; let msg = "Encore rien de fait !" if (nbrImagesCliked) { // test sur buffer en cours if(10 === bufferImagesClicked[indexBuffer].length) { msg = "Bravo, dizaine réalisée"; // on se place sur le buffer suivant indexBuffer += 1; } else { msg = "Cela ne fait pas une dizaine"; // on enlève la classe clicked bufferImagesClicked[indexBuffer].forEach((img) => { img.classList.remove(CLASS_CLICKED); }) // on reset le tableau bufferImagesClicked[indexBuffer] = []; } } document.getElementById("success").innerHTML = msg; }
... en procédant de la sorte tu n'auras aucun mal à gérer des couleurs de bordures différents suivant les dizaines.

Remarques :

Pense à bien déclarer tes variables via des const, let ou pour les nostalgiques var ;
Déplace le maximum de style dans les classes, la gestion en sera plus simple/claire ;
Ils ont peut-être le droit à l'erreur lors du click !
...

Voilà pour la fin du week-end et/ou les vacances :P

18/12/2022, 10h23
bahh66

Alors, j'ai essayé de comprendre ce que tu as fait. J'y arrive dans l'ensemble mais il me manque des morceaux du puzzle pour l'appliquer.

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

Tu fabriques un tableau contenant 10 niveaux et dans chaque niveau, tu vérifies si cela fait 10. Si c'est le cas, tu passes au niveau suivant.

Sauf que j'ai quelques problèmes.
J'ai essayé de mettre les images dans le niveau utilisé pour ensuite vérifier si cela fait 10.

Code:

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

Avec cette ligne, je pensais que les images, dont la classe était picClicked, entreraient dans l'array : bufferImagesClicked[indexBuffer].
Mais je pense que cela ne doit pas être ça.

Ensuite, j'ai modifier verifier().

CLASS_CLICKED par picClickedet je me demandais, s'il ne fallait pas modifier succes dans le HTML car tu as mis msg. Du coup, plus d'affichage.
18/12/2022, 16h31
NoSmoking

Citation:

J'ai essayé de mettre les images dans le niveau utilisé pour ensuite vérifier si cela fait 10.

non dans le cas présent tu mets une chaine de caractères, 'picClicked', dans le tableau et non la référence, DOM, de l'image.

Dans ton code cela donnerait :

Code:

bufferImagesClicked[indexBuffer].push(this);

Citation:

Ensuite, j'ai modifier verifier().

Il faut que tu te poses la question, mais que représente listImgesClicked dans mon code !

PS : le code que je t'ai montrer était un juste support ;)
19/12/2022, 09h17
bahh66

Pour moi lisImgesClicked est un array contenant la liste des images que l'on a cliquée celle qui ont la classe picClicked.

Si c'est le cas, je ne sais pas pourquoi on fait ça car on affecte déjà dans le buffer.
19/12/2022, 11h40
NoSmoking
Citation:

Pour moi lisImgesClicked est un array contenant la liste des images...

Pas exactement comme expliqué ...

Toujours est-il que :
Code:

1 2 3 bufferImagesClicked[indexBuffer].forEach((img) => { img.classList.remove(picClicked); })
va planter car ce sont des chaines qui sont contenues dans ton buffer et non des éléments <img>, voilà c'est peut être plus clair !

Ah ****** c'est vrai, mais du coup est ce que je peux utiliser
Code:

1 2 3 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}
à la place du morceau de code
Code:

1 2 3 bufferImagesClicked[indexBuffer].forEach((img) => { img.classList.remove(picClicked); })
Ca enlèverait les cercles des images (à moins que ca enlève pour tout le monde).
Et ensuite je remets

Code:

bufferImagesClicked[indexBuffer] = [];

pour reset le tableau.

J'avoue que là, je suis encore plus perdu que d'habitude.

19/12/2022, 14h35
SpaceFrog

En gros il y a un fall back à la dernière dizaine saisie.

il suffit donc de mettre les images clickées en le pushant dans un array.
Ensuite tu verifies le modulo 10 et tu retires la classe aux images cliquées à la fin de l'array (reste du modulo)

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

19/12/2022, 16h40
SpaceFrog
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é.

21/12/2022, 08h14
SpaceFrog

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.

21/12/2022, 11h28
bahh66

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.

22/12/2022, 12h06
bahh66

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?
22/12/2022, 18h33
NoSmoking

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.
23/12/2022, 08h47
bahh66
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); } }

23/12/2022, 13h47
bahh66

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?
23/12/2022, 18h04
NoSmoking

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:
23/12/2022, 18h18
bahh66

Je vais m'y ateler

Fuseau horaire GMT +2. Il est actuellement 19h38.