Images aléatoires au chargement du jeu

Version imprimable

10/12/2022, 12h57
bahh66

Images aléatoires au chargement du jeu
Bonjour,
cette discussion fait suite à celle-ci.

Dans le tableau s'affiche des cœurs pour l'instant, le code actuel est celui-ci https://jsfiddle.net/458eka7v/4/ (Merci SpaceFrog pour l'aide/la réalisation complète).

Mais comme c'est un jeu pour mes élèves (6 ans), j'aimerais que les images proposées soient plus variées (une seule image à chaque fois, je ne veux pas mélanger divers images)

Je souhaiterais donc qu'au clic sur le bouton Coeur aléatoire puisse apparaitre des fleurs ou des soleils...

Pour essayer d'y arriver seul dans un premier temps je me suis inspiré de cette page

J'ai donc mis en place la méthode 2 et cela fonctionne bien avec <body onload="randomImg()">, mon problème c'est qu'il faut actualiser la page pour relancer le jeu.
J'ai donc essayer de créer une fonction pouvant le lancer sur le bouton Coeur aléatoire.
Code:

1 2 3 4 function popRandom () { randomImg(); populate(); }
avec un changement dans le body,

Code:

<button id="populate" data-running="false" onclick="popRandom()">Coeur aléatoire</button>

Mais cela ne fonctionne que la première fois, ensuite, cela mais des images non affichées dans les cases.
Je me dis que j'ai probablement raté comment la fonction populate va chercher les infos de l'image à afficher. Dans l'id? Dans

Code:

ImageHeart = document.getElementById("elemImage").cloneNode(true);

?

Si quelqu'un peut m'aider.
12/12/2022, 09h32
SpaceFrog
Il te suffit de modifier le src de l'élément à cloner avant de faire le populate ...

mets les src ou les noms des images dans un array ... un coup de shuffle sur l'array
Code:

1 2 Pics= ["coeur", "fleur", "lapin", "chat", "soleil", "pomme" ] ;
puis juste avant de cloner l'image:
Code:

1 2 3 Pics.sort(() => Math.random() - 0.5); RandomPic= Pics[0]; document.getElementById('#elemImage').src= "Pics/"+RandomPic+".png"
Tu peux aussi modifier le texte du bouton:

Code:

document.getElementById("#populate").innerHTML= RandomPic;

Mais comme c'est après coup ...
Tu pourrais donc faire le random juste après le populate pour le coup suivant ...

Bon, j'ai essayé de faire comme tu me l'as expliqué, mais plus rien ne fonctionne.

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width"=head>
    <title>Document</title>
<style>
 
#elemImage{
  display: none;
}
#layer2 {
  z-index: 99999;
}
td {
  height: 120px;
  width: 150px;
  border: none;
  
}
</style>
</head>
<body>
  <img id="elemImage" src="images/" name="image" width="150" height="120" />
 
  <div id="layer2" style="">
    <button id="populate" data-running="false" onclick="populate()">Coeur aléatoire</button>
    <input type="text" readonly id="nbr" />
  </div>
  <div id="layer3" style="">
    <button onclick="effacer()">Effacer tout</button>
  </div>
 
 
<script>
 
Pics= ["coeur", "image1", "image2", "neuneu", "soleil", "poisson" ]  ;
 
 
let increment = 0,
  posXY = [];
 
 
 
 
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();
 
 
 
 
 
function clonePic() {
 
  // recuperation de la resolution de l'ecran chez l'utilisateur
  largeur = window.innerWidth;
  hauteur = window.innerHeight;
  // positionnement aleatoire
  cellpos = posXY.pop();
 
  // recuperation de l'element div servant a afficher l'image
  ImageHeart = document.getElementById("elemImage").cloneNode(true);
  // ajustement de l'attribute style, notament left et top
  ImageHeart.style.width = "150px";
  ImageHeart.style.height = "120px";
  //elementDivImage.style.Zindex=increment++;
  ImageHeart.id = 'DivCoeur' + increment;
  ImageHeart.style.display = "inline-block";
 
  document.getElementById('cell' + cellpos).appendChild(ImageHeart);
 
}
 
function populate() {
  run = document.getElementById('populate').dataset.running;
  if (run == "true") {
   return false;
  }
 document.getElementById('populate').dataset.running =  "true" ;
  for (i = 0; i < 10; i++) {
    for (j = 0; j < 10; j++) {
      posXY.push(i + '_' + j);
    }
    
  }
  posXY.sort(() => Math.random() - 0.5);
  maxhearts = 10;
  nbrhearts= Math.ceil(Math.random() * maxhearts);
  for (p = 0; p < nbrhearts; p++) {
    Pics.sort(() => Math.random() - 0.5);
RandomPic= Pics[0];
document.getElementById('#elemImage').src= "Pics/"+RandomPic+".png";
    clonePic();
  }
 document.getElementById('nbr').value=nbrhearts;
}
 
function effacer() {
  allhearts = document.querySelectorAll('[id^=DivCoeur]');
  if (allhearts.length > 0) {
    for (var heart of allhearts) {
      heart.parentNode.removeChild(heart.parentNode.firstChild);
    }
  document.getElementById('populate').dataset.running="false";
  document.getElementById('nbr').value="";
  }
}
 
 
</script>      
 
</body>
 
</html>

Je me demande si j'ai mis le bout de code au bon endroit, je l'ai mis juste avant le clonePic().
Sinon je me dis que je n'ai peut être pas le bon nom de dossier, le mien s'appelle "images/".

13/12/2022, 09h51
SpaceFrog

Voici une façon de faire:
https://jsfiddle.net/5qzwh8sn/

Si tu as des questions ...
13/12/2022, 22h17
bahh66

En fait, je n'avais pas compris qu'il fallait mettre aussi dans Pics le lien vers la ressource. Je pensais qu'elle était chargée ailleurs.
En tout cas, c'est nickel.
14/12/2022, 09h12
SpaceFrog

Comme sus dit "UNE" façon de faire ...
On aurait pu tout aussi bien gérer les src différemement
là ça permet de dissocier la désignation de l'image (chien, chat ...) du src.

En espérant que les bouts de choux vont s'amuser avec ;)
14/12/2022, 14h28
bahh66

J'en suis sur qu'ils vont s'amuser, même si je n'ai pas encore terminé le code...