Images aléatoires au chargement du jeu

**bahh66** · 10/12/2022, 11h57

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

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

1
2
3
4
function popRandom () {
randomImg();
populate();
}

avec un changement dans le body,

Code html :

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

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

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

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

?

Si quelqu'un peut m'aider.

**SpaceFrog** · 12/12/2022, 08h32

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 :

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

1
2
 
Pics= ["coeur", "fleur", "lapin", "chat", "soleil", "pomme" ]  ;

puis juste avant de cloner l'image:

Code :

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

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 :

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

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

**bahh66** · 12/12/2022, 19h18

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

Code html :

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

**SpaceFrog** · 13/12/2022, 08h51

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

Si tu as des questions ...

**bahh66** · 13/12/2022, 21h17

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.

**SpaceFrog** · 14/12/2022, 08h12

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

**bahh66** · 14/12/2022, 13h28

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

Images aléatoires au chargement du jeu

JavaScript

Discussions similaires

Partager

Partager