Discussion :

[Matteo53]

Bonjour,
Dans le cadre d'une formation très basique en java script et jquery, je voudrais faire un code pour afficher 3 images aléatoires dans un div sur 7 images. Si deux images sont identiques j'ajoute 1point à une cagnotte de 10points. Si trois images sont identiques j'ajoute 3 points, trois images différentes je décompte 1point.
J'ai essayé un code mais mes les conditions et la boucle posent problème.

J'ai fait un dossier avec 7 images en les renommant (0img.jpg, 1img.jpg etc. jusqu'à 6)

Mon code :

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
var cagnotte=10;                     //initialise variable
$("#caisse").html(cagnotte);    //affichage cagnotte dans un <p>
 
$("#buttonA").click(function(){ 
$("#img").css({"width" : "1000px"});
var img = $("#aleatImg").attr("src", "img/" + Math.floor((Math.random()* 7)) + "img.jpg");
var img1 = $("#aleatImg1").attr("src", "img/" + Math.floor((Math.random()* 7)) + "img.jpg");
var img2 = $("#aleatImg2").attr("src", "img/" + Math.floor((Math.random()* 7)) + "img.jpg");
 
/affichage des images dans le div
$("#divimg").prepend(img);
$("#divimg").append(img1);
$("#divimg").append(img2);
 
do{
    if(img==img1 || img==img2 || img1==img2) {
           cagnotte+=1;    
    } else if(img==img1 || img==img2 || img1==img2) {
           cagnotte+=5;
    } else {
       cagnotte -= 1;
      }
 }while(cagnotte > 0);
 
  $("#caisse").html(cagnotte);
  alert=("partie finie");
 
});

j'ai aussi essayer de transformer ces variables en nombre avec parseInt() en comparant ces variables.. :

Code :

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

1
2
3
var imgNbr = parseInt(img);
var imgNbr1 = parseInt(img1);
var imgNbr2 = parseInt(img2);

Les images s'affichent sans problème.
problème 1 : quand je teste le code sans la boucle à chaque clique il soustrait un point de la cagnotte même si j'ai deux images identiques ou trois.
problème 2 : quand j'ajoute cette boucle do while la cagnotte commence à 0 puis il soustrait -1 -2 etc..
pouvez vous m'expliquer avec ce code ou ils sont les erreurs.
Merci pour votre aide précieux.

[Toufik83]

Bonjour,

...Si deux images sont identiques j'ajoute 1point à une cagnotte de 10points. Si trois images sont identiques j'ajoute 3 points, trois images différentes je décompte 1point.

Avec $.grep on peut filtrer les éléments en fonction d'une condition, donc si par exemple on veut chercher les éléments voisins ayant le même attribut src de chaque <img class='img' /> :

Code html :

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

1
2
3
4
5
 
<button id="buttonA">Ok</button>
<img class='img' id="aleatImg" />
<img class='img' id="aleatImg1" />
<img class='img' id="aleatImg2" />

jQuery :

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
29
 
var cagnotte=10;//initialise variable
$("#caisse").html(cagnotte); 
$("#buttonA").click(function() {
  $("#img").css({
    "width": "1000px"
  });
  var img = $("#aleatImg").attr("src", "img/" + Math.floor((Math.random() * 7)) + "img.jpg");
  var img1 = $("#aleatImg1").attr("src", "img/" + Math.floor((Math.random() * 7)) + "img.jpg");
  var img2 = $("#aleatImg2").attr("src", "img/" + Math.floor((Math.random() * 7)) + "img.jpg");
 
  //affichage des images dans le div
  $("#divimg").prepend(img);
  $("#divimg").append(img1);
  $("#divimg").append(img2);
  //Récupérer les éléments voisins ".img" (s'il existent) qui ont le même attribut src
  let voisinsMemeSrc = $.grep($('.img'), (elem) => {
    return $(elem).siblings('.img[src="' + $(elem).attr('src') + '"]').length;
  });
  if (voisinsMemeSrc.length == 2) cagnotte += 1;
  else if (voisinsMemeSrc.length == 3) cagnotte += 3;
  else if (voisinsMemeSrc.length == 0) cagnotte -= 1;
  if(cagnotte==0){ 
	$('#buttonA').prop('disabled',true);
	console.log('partie finie !');
  }
  console.log(voisinsMemeSrc, ', cagnottte :', cagnotte);
  $("#caisse").html(cagnotte);
});

[Matteo53]

Bonsoir,
je vous remercie pour vos explications, je vais regarder et creuser votre code en détail, pour découvrir encore plus.
Donc si je comprends bien il n'est pas possible de comparer deux images comme je l'avais fait dans mon code, et je suppose que la boucle aussi n'est pas adaptée...
merci encore pour votre aide et de m'avoir consacré un peu de temps.
bonne soirée

[Toufik83]

Bonjour,

Ce n'est pas possible avec ton code car la boucle do while n'est pas vraiment utile, puis les deux premières conditions sont identiques.

[Matteo53]

Bonsoir
D accord merci pour vos conseils. Oui les deux conditions sont identiques c'est une erreur, dans la deuxième condition je voulais mettre && et pas ||

Merci et bonne soirée