cadeau qui fonctionne vraiment cette fois

css/alerte.css

@@ -1,57 +0,0 @@
-/*
- * @file            css/alerte.css
- * @description     
- * @author          mougnibas <mougnibas@insa-toulouse.fr>
- * @createTime      2024-11-29 10:35:07
- * @lastModified    2024-12-15 18:53:32
- * Copyright ©Théo Mougnibas All rights reserved
-*/
-
-/* Le conteneur de l'alerte, va couvrir tout l'écran*/
-.modal {
-  display: none; /* on la cache par défaut */
-  position: fixed; 
-  z-index: 1; /* BAM ! AU DESSUS DE TOUT */
-  left: 0;
-  top: 0;
-  width: 100%; 
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.4); /* On floute le derrière */
-}
-  
-/* Contenu de l'alerte */
-.modal-content {
-  color: black;
-  background-color: #fefefe;
-  margin: 15% auto; /* on le centre */
-  padding: 20px;
-  border: 1px solid #888;
-  width: 80%;
-  max-width: 400px;
-  text-align: center;
-}
-  
-/* Bouton pour fermer l'alerte */
-.close-btn {
-  color: #aaa;
-  float: right;
-  font-size: 28px;
-  font-weight: bold;
-}
-
-.close-btn:hover,
-.close-btn:focus {
-  color: black;
-  text-decoration: none;
-  cursor: pointer;
-}
-
-/* Bouton OK */
-.modal.button {
-  padding: 10px 20px;
-  background-color: #4CAF50;
-  color: white;
-  border: none;
-  cursor: pointer;
-}
-

css/index.css

@@ -51,3 +51,10 @@
     overflow: hidden;
     pointer-events: none; /* pour ne pas interagir avec les confettis */
 }
+
+#div_cadeau{
+    display: none;
+    position: fixed;
+    z-index: -2;
+    width: 5vw;
+}

index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Prog Web Legend</title>
-    <script> alert("click")</script>
     <link rel="stylesheet" href="" id="link-css">
     <link rel="stylesheet" href="./css/index.css">
     <link rel="stylesheet" href="./css/alerte/a1.css" id="alerte-css">
@@ -78,7 +77,9 @@
     </div>
 
     
-
+    <div id="div_cadeau">
+        <img src="img/cadeau.png">
+    </div>
 </body>
 <footer>
     <p>L'evolution est non contractuelle, adaptée pour le gameplay</p>

js/intro.js

@@ -24,4 +24,24 @@ function firstClick(){
 
 }
 
+function pageChargee(){
+    // fonction appelée au chargement de la page, initialise divers mécanismes du jeu
+
+    ouvrirAlerte("Bienvenue dans progWeb-legend ! Un jeu des plus innovants basé sur le concept du click de souris :)")
+    firstClick()
+    
+
+    // on setup le cadeau qui se téléporte 
+    const div_cadeau = document.getElementById("div_cadeau");
+    div_cadeau.addEventListener("click",cadeauClickCallback)
+
+
+    setTimeout(genererCadeau, Math.random() * 10000 + 20000); // Premier affichage aléatoire entre 20 et 30 secondes
+
+
+}
+
+window.addEventListener("DOMContentLoaded",pageChargee)
+
+
 

js/main.js

@@ -419,37 +419,60 @@ function rendreNombreLisible(n){
 
 }
 
-function afficherCadeau() {
+
+function genererCadeau(){
+    
+
+    const div_cadeau = document.getElementById("div_cadeau");
+    div_cadeau.style.display = "block";
+
+    teleportationCadeau(1)
+}
+
+
+function cadeauClickCallback(){
+    const div_cadeau = document.getElementById("div_cadeau");
+
+    const nb_gen = Math.floor(Math.random() * 10) + 1; // Nombre aléatoire entre 1 et 10
+    const nb_devine = parseInt(prompt("Entrez un chiffre entre 1 et 10 :"), 10);
+    if (isNaN(nb_devine) || nb_devine < 1 || nb_devine > 10) {
+        ouvrirAlerte("Le chiffre rentré n'est pas valide")
+    }else{ 
+        if (nb_gen === nb_devine) {
+            ouvrirAlerte("Bravo ! Vous avez doublé votre score !");
+            score *= 2;
+        } else {
+            ouvrirAlerte("Dommage !");
+        }
+    } 
+
+    // enlève le cadeau
+    div_cadeau.style.display = "none";
+
+    // génère un nouveau timer pour le prochain cadeau à afficher !
+    setTimeout(genererCadeau, Math.random() * 10000 + 20000); // Premier affichage aléatoire entre 20 et 30 secondes
+
+}
+
+
+function teleportationCadeau(n) {
+    const div_cadeau = document.getElementById("div_cadeau");
+
     const x = Math.random() * (window.innerWidth - 50);
     const y = Math.random() * (window.innerHeight - 50);
 
-    gift.style.left = `${x}px`;
-    gift.style.top = `${y}px`;
-    gift.style.display = "block";
+    div_cadeau.style.left = `${x}px`;
+    div_cadeau.style.top = `${y}px`;
 
+
+    // limite le nombre de téléportations du cadeau à 15 fois
+    // permet de ne pas boucler le timeout à l'infini
+    if(n < 15){
+        n += 1
         setTimeout(() => {
-        gift.style.display = "none";
-        setTimeout(afficherCadeau, Math.random() * 3000 + 2000); // Temps aléatoire entre 2 et 5 secondes
-    }, Math.random() * 2000 + 1000); // Durée d'affichage entre 1 et 2 secondes
-}
+            // affiche le cadeau à un autre endroit pour faire un effet de téléportation
+            teleportationCadeau(n)
+        }, Math.random() * 1000 + 500); // Durée d'affichage entre 500ms et 1.5 seconde
         
-function cadeau(){
-    const gift = document.getElementById("gift");
-    const correctNumber = Math.floor(Math.random() * 10) + 1; // Nombre aléatoire entre 1 et 10
-    gift.addEventListener("click", () => {
-        const userNumber = parseInt(prompt("Entrez un chiffre entre 1 et 10 :"), 10);
-        if (isNaN(userNumber) || userNumber < 1 || userNumber > 10) {
-            alert("Le chiffre rentré n'est pas valide")
     }
-        else{ 
-            if (userNumber === correctNumber) {
-                alert("Bravo ! Vous avez doublé votre score !");
-                score *= 2;
-                } else {
-                    alert("Dommage !");
-                }
-            } 
-    }
-)
 }
-setTimeout(showGift, Math.random() * 10000 + 20000); // Premier affichage aléatoire entre 10 et 30 secondes