Faire apparaitre plusieurs fois la même image aléatoirement sur la page
Bonjour,
Je souhaite créer un jeu pour mes élèves. Le principe est assez simple (mais peut-être pas la mise en œuvre), je souhaite qu'une image s'affiche en quantité aléatoire dans des emplacements aléatoires sur la page.
Une fois ceci fait, j'aimerai que le joueur puisse cliquer sur 10 images et qu'une "forme" (ou un sac) se trace autour de ces 10 images et ainsi de suite jusqu'à ce que toutes les images soient comptées.
Dans ma tête, voici les étapes que j'imagine :
1- afficher un nombre aléatoire d'images sur la page à des endroits sur la page.
2- pouvoir cliquer (une fois et une seule) sur les images
3- former un "cercle" (ou patatoïde) autour des images cliquées.
Maintenant que j'ai expliqué ce que je souhaite, je reviens à l'étape 1.
J'ai utilisé un code trouvé là qui m'affiche une image aléatoirement sur la page (dès fois le coeur apparait en dehors de la page)
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
| <!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>
<script>
function affiche(){
// recuperation de la resolution de l'ecran chez l'utilisateur
largeur = screen.width;
hauteur = screen.height;
// positionnement aleatoire
posx = Math.round(Math.random()*largeur);
posy = Math.round(Math.random()*hauteur);
// recuperation de l'element div servant a afficher l'image
elementDivImage = document.getElementById("elemImage");
// ajustement de l'attribute style, notament left et top
elementDivImage.style.position='absolute';
elementDivImage.style. left=posx+"px";
elementDivImage.style.top=posy+"px";
elementDivImage.style.width="160px";
elementDivImage.style.height="120px";
elementDivImage.style.Zindex="1";
}
</script>
<title>Document</title>
</head>
<body onLoad="affiche()">
<div id="elemImage" style="">
<img src="images/coeur.png" name="image" width="160" height="120" id="image">
</div>
<div id="layer2" style="">
<button onclick="affiche()">Coeur aléatoire</button>
</div>
</body>
</html> |
Ma question est la suivante, comment je peux modifier la fonction affiche pour que j'ai 3 ou 15 ou 50 coeurs qui s'affichent
J'imagine que je vais devoir utiliser Math.random
