JavaScript must be enabled to play.
Browser lacks capabilities required to play.
Upgrade or switch to another browser.
Loading…
<img src="carte.jpg" class="carte-bg"> <style> /* Style des liens de ce passage en jaune vif */ a { color: #FFFF00 !important; /* Jaune vif */ } /* Optionnel : Modifier la couleur au survol */ a:hover { color: #FFD700 !important; /* Jaune doré au survol */ } </style> <div style="position: absolute; top: 61%; left: 4%; text-align: center;"> [[Bouteille de Leyde]] </div> <div style="position: absolute; top: 84%; left: 5.5%; text-align: center;"> [[Paratonnerre]] </div> <<if($Bouteille_de_leyde is "true")>> <div style="position: absolute; top: 28.1%; left: 21.4%; text-align: center; z-index: 10;"> [[Pile électrique]] </div> <</if>> <<if($Pile_électrique is "true")>> <div style="position: absolute; top: 61%; left: 34%; text-align: center;"> [[Induction électromagnétique]] </div> <div style="position: absolute; top: 76%; left: 24.1%; text-align: center;"> [[Lampe à incandescence]] </div> <div style="position: absolute; top: 85%; left: 34.7%; text-align: center;"> [[Première batterie rechargeable]] </div> <div style="position: absolute; top: 74.5%; left: 51.7%; text-align: center;"> [[Transformateur]] </div> <</if>> <<if($Induction_électromagnétique is "true")>> <div style="position: absolute; top: 28%; left: 53.5%; text-align: center;"> [[Générateur de Pixii]] </div> <div style="position: absolute; top: 5%; left: 53.7%; text-align: center;"> [[Moteur électrique]] </div> <</if>> <<if($Générateur_de_pixii is "true")>> <div style="position: absolute; top: 60.3%; left: 72.5%; text-align: center;"> [[Atelier de Morse]] </div> <</if>> <<if($Atelier_de_Morse is "true")>> <div style="position: absolute; top: 28.1%; left: 87.3%; text-align: center;"> [[Premier téléphone]] </div> <</if>> <div style="position: absolute; top: 0%; left: 1%; text-align: center;"> <p style="color: yellow;">Score : <<print $compteur>></p> </div> <<if $compteur == 0>> <div style="position: absolute; top: 5%; left: 1%; text-align: left;"> Pas encore de découverte, commencez l'exploration ! </div> <</if>> <<if $compteur == 1>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Apprenti novice : Vous faites vos premiers pas dans le monde fascinant de la science. </div> <</if>> <<if $compteur == 2>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Étudiant prometteur : Vous commencez à comprendre les bases des découvertes électriques. </div> <</if>> <<if $compteur == 3>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Explorateur éclairé : Vos recherches révèlent des secrets cachés de l’électricité. </div> <</if>> <<if $compteur == 4>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Chercheur assidu : Votre esprit analytique vous pousse à aller toujours plus loin. </div> <</if>> <<if $compteur == 5>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Innovateur ambitieux : Vos idées prennent forme et attirent l'attention des savants. </div> <</if>> <<if $compteur == 6>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Inventeur inspiré : Vous commencez à marquer l'histoire avec vos contributions. </div> <</if>> <<if $compteur == 7>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Penseur visionnaire : Vos découvertes ouvrent des portes vers des technologies futures. </div> <</if>> <<if $compteur == 8>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Maître de l’électricité : Vos exploits vous placent parmi les grands noms de la science. </div> <</if>> <<if $compteur == 9>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Savant reconnu : Vos travaux sont acclamés dans les académies scientifiques du monde entier. </div> <</if>> <<if $compteur == 10>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Pionnier d'exception : Votre nom est cité aux côtés des plus grands, comme Volta et Ampère. </div> <</if>> <<if $compteur == 11>> <div style="position: absolute; top: 5%; left: 1%; text-align: center;"> Scientifique légendaire : À l’instar de Faraday, vos découvertes illuminent l’humanité.<br> Félicitations, vous avez accompli toutes les découvertes ! </div> <</if>> <<audio "transition" stop>> <<audio "fond" play loop>> <<audio "fond" volume 1>>
[["Carte"|Transition]] <<set $Bouteille_de_leyde to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $scene to "Bouteille de Leyde">> <<set $person1 to "Electron">> <<set $person2 to "Pieter van Musschenbroek">> <!-- Ajout du son de la foule --> <audio id="background-audio" autoplay loop> <source src="Audios Leyde/Foule.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas les fichiers audio. </audio> <!-- Ajout de la voix du scientifique --> <audio id="scientist-audio" preload="auto"> <source src="Audios Leyde/Audio_Leyde_1.mp3" type="audio/mpeg"> </audio> <!-- Écran noir avec texte d'introduction --> <div id="intro-screen" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; color: white; display: flex; align-items: center; justify-content: center; font-size: 2em; z-index: 10;"> Foire de Versailles - 1746 </div> <script> // Fondu de l'écran noir setTimeout(() => { const intro = document.getElementById('intro-screen'); intro.style.transition = "opacity 2s"; intro.style.opacity = "0"; setTimeout(() => intro.remove(), 2000); }, 2000); const scientistAudio = document.getElementById('scientist-audio'); const crowdAudio = document.getElementById('background-audio'); // Fonction pour baisser le son de la foule mais le garder légèrement audible function reduceAudioVolume(audio, targetVolume, duration = 3000) { const step = (audio.volume - targetVolume) / (duration / 100); const fadeInterval = setInterval(() => { if (audio.volume > targetVolume + step) { audio.volume -= step; } else { audio.volume = targetVolume; clearInterval(fadeInterval); } }, 100); } // Réduction progressive du son de la foule et lancement de l'audio scientifique setTimeout(() => { reduceAudioVolume(crowdAudio, 0.1, 3000); // Réduction jusqu'à 10% scientistAudio.volume = 1.0; // Volume fort pour le scientifique scientistAudio.play(); }, 2000); // Démarre après l'écran noir </script> <!-- Image du personnage --> <img id="scientist-image" src="Images Leyde/Peter_transparent.png" alt="Pieter van Musschenbroek" style=" position: absolute; top: 40%; left: 20%; transform: translateY(-50%); width: 300px; height: auto; z-index: 5; opacity: 1;"> <!-- Texte du dialogue --> <div class="text-box" style=" position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 90%; max-width: 800px; background-color: white; color: black; padding: 20px; box-sizing: border-box; border-top: 2px solid #ccc; z-index: 1;"> <<type 30ms>> <b><<print $person2>></b> (souriant, levant la main) : « Mesdames et messieurs ! Approchez, approchez ! Venez découvrir l'invention qui fait frissonner toute l'Europe : la bouteille de Leyde ! Imaginez... capturer l'électricité, la force invisible de la nature, et la libérer à volonté ! Venez tester par vous-même ! » [[Se rapprocher|ReactionY1]] <</type>> </div> <!-- Fond de la scène --> <img src="Images Leyde/Leyde_1.webp" alt="Foire de Versailles" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <style> /* Style pour le lien Twine */ a { color: darkblue; text-decoration: none; font-weight: bold; } a:hover { text-decoration: underline; } </style> <<audio "fond" loop volume 0.1>>
[["Carte"|Transition]] <<set $Paratonnerre_experience to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <!-- Ajout de l'audio --> <audio id="para-audio" preload="auto" autoplay> <source src="Audios para/Para_1.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Para/Para_1.jpg" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image de l'électron --> <div id="electron-image" style=" position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 150px;"> <img src="Electron.png" style="width: 100%;" alt="Électron"> </div> <!-- Texte et dialogues --> <div id="text-box" class="text-box" style=" position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Électron** : "Oh là là, regarde qui est là ! C’est Benjamin Franklin ! Il est sur le point de réaliser une expérience incroyable pour nous protéger de la foudre qui tombe du ciel! Approchons-nous !"\ <</type>> <br><br> [[Se rapprocher|ReactionP1]] </div> <script> const paraAudio = document.getElementById('para-audio'); // Forcer la lecture si autoplay échoue paraAudio.addEventListener('error', () => { setTimeout(() => { paraAudio.play().catch(error => { console.error("Lecture automatique bloquée :", error); }); }, 500); // Retenter après un délai }); </script> <<audio "fond" loop volume 0.1>>
[["Carte"|Transition]] <<set $Pile_électrique to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <!-- Ajout des audios --> <audio id="volta-audio" preload="auto"> <source src="Audios Pile/Pile_1.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="electron-audio4" preload="auto"> <source src="Audios Pile/Pile_2.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Pile/Pile.webp" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;" alt="Fond de la Pile Volta"> <!-- Image de Volta --> <div id="volta-image" style=" position: absolute; top: 5%; left: 5%; width: 250px; z-index: 3;"> <img src="Images Pile/Volta.png" style="width: 100%;" alt="Volta"> </div> <!-- Image de l'électron --> <div id="electron-image" style=" position: absolute; bottom: 20%; right: 10%; width: 250px; z-index: 4;"> <!-- Position et taille ajustées --> <img src="Electron.png" style="width: 100%;" alt="Électron"> </div> <!-- Texte et dialogues --> <div class="text-box" style=" position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2;"> <<type 40ms>>\ **Volta** : « Voici ma colonne de disques. En utilisant des disques de zinc et de cuivre, séparés par un tissu imbibé d’eau salée, nous créons une réaction chimique. Le zinc devient chargé positivement et le cuivre négativement, ce qui génère un courant électrique ! »\ <</type>> <<type 40ms>>\ **Électron** : « C’est incroyable, non ? Grâce à Volta, l’unité de tension porte son nom ! Maintenant, à toi de construire ta propre pile voltaïque ! Mais attention, tu dois empiler les couches dans le bon ordre ! »\ <</type>> [[Continuer|MiniJeuPile]] </div> <!-- Script pour gérer les audios --> <script> // Recharger la page pour garantir un état propre if (!window.location.search.includes('reload=true')) { window.location.href = window.location.href + '?reload=true'; } const voltaAudio = document.getElementById('volta-audio'); const electronAudio4 = document.getElementById('electron-audio4'); // Jouer l'audio de Volta setTimeout(() => { voltaAudio.play().catch(error => { console.error("Erreur lors de la lecture de l'audio de Volta :", error); }); }, 1000); // Jouer l'audio de l'électron avec un délai de 10 secondes setTimeout(() => { electronAudio4.play().catch(error => { console.error("Erreur lors de la lecture de l'audio de l'électron :", error); }); }, 20000); </script> <<audio "fond" loop volume 0.1>>
[["Carte"|Transition]] <<set $Induction_électromagnétique to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $scene to "Induction Électromagnétique">> <<set $person1 to "Enfant">> <<set $person2 to "Faraday">> <div class="text-box"> <<type 45ms>>\ <<print $person1>> : "Bonjour, M. Faraday ! Vous êtes encore en train de bricoler une nouvelle machine ?" \<</type>> <<type 55ms>>\ <<print $person2>> (riant) : "Ah, je t'attendais ! Oui, je suis en pleine expérience. Aujourd'hui, je vais te montrer quelque chose d'extraordinaire : comment on peut créer de l'électricité en bougeant un aimant !" [[Créer de l'électricité en bougeant un aimant ? C’est possible, ça ?|Reaction1]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 1s>> <<audio "PP1I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 5s>> <<audio "F1I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
[["Carte"|Transition]] <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $scene to "Lampe à incandescence">> <<set $person1 to "Enfant">> <<set $person2 to "Edison">> <div class="text-box"> <<type 40ms>>\ <<print $person1>> : "Bonjour, M. Edison ! C’est quoi cette étrange ampoule que vous tenez dans la main ?" \<</type>> <<type 45ms>>\ <<print $person2>> (souriant) : "Ah, tu arrives juste à temps pour voir une petite merveille ! Cette ampoule est une lampe à incandescence. Elle peut illuminer une pièce entière avec un simple courant électrique." [[Une lampe qui fonctionne avec de l’électricité ? Comment est-ce possible ?|ReactionL1]] \<</type>> </div> <img src="Lampe à incandescence/fond-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP1L" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 5.5s>> <<audio "E1L" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Lampe à incandescence/Edison.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
[["Carte"|Transition]] <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $scene to "Première batterie rechargeable">> <<set $person1 to "Enfant">> <<set $person2 to "Planté">> <div class="text-box"> <<type 50ms>>\ <<print $person1>> : "Bonjour, M. Planté ! Qu’est-ce que vous êtes en train de bricoler avec ces plaques de métal et ce liquide ?" \<</type>> <<type 48ms>>\ <<print $person2>> (souriant) : "Bonjour, mon enfant ! Ce que tu vois ici est la première batterie rechargeable, ou accumulateur. Elle peut stocker de l’énergie et la restituer quand on en a besoin." [[Une batterie qui se recharge ? Je croyais que les piles se jetaient quand elles étaient vides !|ReactionB1]] \<</type>> </div> <img src="Batterie rechargeable/fond-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP1B" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 7s>> <<audio "P1B" play>> <div style="position: absolute; top: 10%; right: 71%; width: 35%; height: auto;"> <img src="Batterie rechargeable/Planté.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
[["Carte"|Transition]] <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <div class="text-box"> <<type 50ms>>\ Tu es dans un atelier rempli de câbles et de bobines de cuivre. Une grande machine étrange trône au milieu de la pièce, entourée de gros fils. **Lucien Gaulard**, l'inventeur, est en pleine démonstration. [["Bonjour, M. Gaulard ! Que se passe-t-il ici ?"|Salutation7]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "E1T" play>> <div style="position: absolute; top: -5%; left: 40%; width: 300px; height: auto;"> <img src="Electron.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<audio "fond" loop volume 0.2>>
<<set $Bouteille_de_leyde to "false">> <<set $Pile_électrique to "false">> <<set $Induction_électromagnétique to "false">> <<set $Générateur_de_pixii to "false">> <<set $Atelier_de_Morse to "false">> <<set $Premier_téléphone to "false">> <<set $compteur to 0>> <<cacheaudio "E1" "Moteur Faraday/E1.mp3">> <<cacheaudio "E2" "Moteur Faraday/E2.mp3">> <<cacheaudio "PP1" "Moteur Faraday/PP1.mp3">> <<cacheaudio "PP21" "Moteur Faraday/PP21.mp3">> <<cacheaudio "PP22" "Moteur Faraday/PP22.mp3">> <<cacheaudio "PP3" "Moteur Faraday/PP3.mp3">> <<cacheaudio "PP4" "Moteur Faraday/PP4.mp3">> <<cacheaudio "F1" "Moteur Faraday/F1.mp3">> <<cacheaudio "F21" "Moteur Faraday/F21.mp3">> <<cacheaudio "F22" "Moteur Faraday/F22.mp3">> <<cacheaudio "F3" "Moteur Faraday/F3.mp3">> <<cacheaudio "F4" "Moteur Faraday/F4.mp3">> <<cacheaudio "E1GP" "Générateur Pixii/E1.mp3">> <<cacheaudio "E2GP" "Générateur Pixii/E2.mp3">> <<cacheaudio "P1GP" "Générateur Pixii/P1.mp3">> <<cacheaudio "P2GP" "Générateur Pixii/P2.mp3">> <<cacheaudio "P3GP" "Générateur Pixii/P3.mp3">> <<cacheaudio "P4GP" "Générateur Pixii/P4.mp3">> <<cacheaudio "P5GP" "Générateur Pixii/P5.mp3">> <<cacheaudio "P6GP" "Générateur Pixii/P6.mp3">> <<cacheaudio "PP1GP" "Générateur Pixii/PP1.mp3">> <<cacheaudio "PP2GP" "Générateur Pixii/PP2.mp3">> <<cacheaudio "PP3GP" "Générateur Pixii/PP3.mp3">> <<cacheaudio "PP4GP" "Générateur Pixii/PP4.mp3">> <<cacheaudio "PP5GP" "Générateur Pixii/PP5.mp3">> <<cacheaudio "PP6GP" "Générateur Pixii/PP6.mp3">> <<cacheaudio "E1T" "Transformateur/E1.mp3">> <<cacheaudio "E2T" "Transformateur/E2.mp3">> <<cacheaudio "G1T" "Transformateur/G1.mp3">> <<cacheaudio "G2T" "Transformateur/G2.mp3">> <<cacheaudio "G3T" "Transformateur/G3.mp3">> <<cacheaudio "G4T" "Transformateur/G4.mp3">> <<cacheaudio "G5T" "Transformateur/G5.mp3">> <<cacheaudio "PP1T" "Transformateur/PP1.mp3">> <<cacheaudio "PP2T" "Transformateur/PP2.mp3">> <<cacheaudio "PP3T" "Transformateur/PP3.mp3">> <<cacheaudio "PP4T" "Transformateur/PP4.mp3">> <<cacheaudio "PP5T" "Transformateur/PP5.mp3">> <<cacheaudio "P1B" "Batterie rechargeable/P1.mp3">> <<cacheaudio "P2B" "Batterie rechargeable/P2.mp3">> <<cacheaudio "P3B" "Batterie rechargeable/P3.mp3">> <<cacheaudio "P4B" "Batterie rechargeable/P4.mp3">> <<cacheaudio "P5B" "Batterie rechargeable/P5.mp3">> <<cacheaudio "PP1B" "Batterie rechargeable/PPB1.mp3">> <<cacheaudio "PP2B" "Batterie rechargeable/PPB2.mp3">> <<cacheaudio "PP3B" "Batterie rechargeable/PPB3.mp3">> <<cacheaudio "PP4B" "Batterie rechargeable/PPB4.mp3">> <<cacheaudio "PP5B" "Batterie rechargeable/PPB5.mp3">> <<cacheaudio "F1I" "Induction électromagnétique/F1.mp3">> <<cacheaudio "F2I" "Induction électromagnétique/F2.mp3">> <<cacheaudio "F3I" "Induction électromagnétique/F3.mp3">> <<cacheaudio "F4I" "Induction électromagnétique/F4.mp3">> <<cacheaudio "F5I" "Induction électromagnétique/F5.mp3">> <<cacheaudio "F6I" "Induction électromagnétique/F6.mp3">> <<cacheaudio "F7I" "Induction électromagnétique/F7.mp3">> <<cacheaudio "F8I" "Induction électromagnétique/F8.mp3">> <<cacheaudio "E3I" "Induction électromagnétique/E3.mp3">> <<cacheaudio "PP1I" "Induction électromagnétique/PPI1.mp3">> <<cacheaudio "PP2I" "Induction électromagnétique/PPI2.mp3">> <<cacheaudio "PP3I" "Induction électromagnétique/PPI3.mp3">> <<cacheaudio "PP4I" "Induction électromagnétique/PPI4.mp3">> <<cacheaudio "PP5I" "Induction électromagnétique/PPI5.mp3">> <<cacheaudio "PP6I" "Induction électromagnétique/PPI6.mp3">> <<cacheaudio "PP7I" "Induction électromagnétique/PPI7.mp3">> <<cacheaudio "PP8I" "Induction électromagnétique/PPI8.mp3">> <<cacheaudio "PP1L" "Lampe à incandescence/PP1.mp3">> <<cacheaudio "PP2L" "Lampe à incandescence/PP2.mp3">> <<cacheaudio "PP3L" "Lampe à incandescence/PP3.mp3">> <<cacheaudio "PP4L" "Lampe à incandescence/PP4.mp3">> <<cacheaudio "PP5L" "Lampe à incandescence/PP5.mp3">> <<cacheaudio "E1L" "Lampe à incandescence/E1.mp3">> <<cacheaudio "E2L" "Lampe à incandescence/E2.mp3">> <<cacheaudio "E3L" "Lampe à incandescence/E3.mp3">> <<cacheaudio "E4L" "Lampe à incandescence/E4.mp3">> <<cacheaudio "E5L" "Lampe à incandescence/E5.mp3">> <<cacheaudio "V1" "Voix_jules/voix1.mp3">> <<cacheaudio "V2" "Voix_jules/voix2.mp3">> <<cacheaudio "V3" "Voix_jules/voix3.mp3">> <<cacheaudio "V4" "Voix_jules/voix4.mp3">> <<cacheaudio "V5" "Voix_jules/voix5.mp3">> <<cacheaudio "V6" "Voix_jules/voix6.mp3">> <<cacheaudio "V7" "Voix_jules/voix7.mp3">> <<cacheaudio "V8" "Voix_jules/voix8.mp3">> <<cacheaudio "V9" "Voix_jules/voix9.mp3">> <<cacheaudio "V10" "Voix_jules/voix10.mp3">> <<cacheaudio "V11" "Voix_jules/voix11.mp3">> <<cacheaudio "V12" "Voix_jules/voix12.mp3">> <<cacheaudio "V13" "Voix_jules/voix13.mp3">> <<cacheaudio "V14" "Voix_jules/voix14.mp3">> <<cacheaudio "V15" "Voix_jules/voix15.mp3">> <<cacheaudio "V16" "Voix_jules/voix16.mp3">> <<cacheaudio "Régles" "Régles.mp3">> <<cacheaudio "transition" "transition.mp3">> <<cacheaudio "fond" "fond sonore.mp3">>
[["Carte"|Transition]] <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <div class="text-box"> <<type 50ms>>\ Bienvenue dans le laboratoire de Michael Faraday, l'un des plus grands scientifiques de son époque. Tu aperçois une étrange machine avec un fil conducteur, un aimant et un récipient contenant du mercure. Faraday te remarque et t'invite à t'approcher. [["Bonjour, M. Faraday ! Que faites-vous ?"|Introduction]] \<</type>> </div> <<audio "E1" play>> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
[["Carte"|Transition]] <<audio "E1GP" play>> <<set $Générateur_de_pixii to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <div class="text-box"> <<type 50ms>>\ Bienvenue, jeune aventurier, dans l'atelier d'Hippolyte Pixii. Des machines bizarres, des bobines et un aimant géant te font face. Qu’est-ce que tout cela peut bien faire ? Tu vois M. Pixii s'approcher. [["Salut, M. Pixii !"|Salutation8]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <div style="position: absolute; top: 5%; left: 40%; width: 17.54%; height: auto;"> <img src="Electron.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Salut, M. Pixii ! Qu’est-ce que c’est que cette machine ? Elle a l’air d’avoir été construite par un magicien !" Pixii (riant doucement) : "Pas de magie ici, Electron. C'est un générateur électrique. Regarde bien." \<</type>> <<type 50ms>>\ Pixii pose sa main sur la manivelle et commence à la tourner. Le gros aimant se met à tourner, et des étincelles jaillissent des bobines. [[ "Demander ce qu'est un générateur électrique."|Generateur]] [["Demander pourquoi ça fait des étincelles." |Etincelles]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP1GP" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 6s>> <<audio "P1GP" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Pixii/Pixii.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 11s>> <<audio "E2GP" play >> <div style="position: absolute; bottom: 5%; left: 8%; width: 17.54%; height: auto;"> <img src="Electron.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Un générateur électrique ? Mais ça sert à quoi ?" Pixii (enthousiaste) : "C’est une machine qui fabrique de l’électricité ! Quand l'aimant tourne autour des bobines, il crée un courant électrique. C’est grâce à ça que l’on peut produire de l'énergie." [["Demander comment cela fonctionne."|Fonctionnement]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP2GP" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "P2GP" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Pixii/Pixii.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Et ces étincelles, pourquoi ça fait ça ?" Pixii : "C’est le courant électrique qui passe dans les bobines de cuivre. L’aimant crée un champ magnétique, et quand il bouge, il fait circuler les électrons dans le cuivre. Et voilà, de l’électricité !" [["Demander comment cela fonctionne."|Fonctionnement]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP3GP" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "P3GP" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Pixii/Pixii.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Mais... comment ça marche exactement ? Je ne comprends pas tout." \<</type>> <<type 50ms>>\ Pixii (avec un sourire) : "C’est simple, Tom. L'aimant a un champ magnétique. Quand ce champ magnétique bouge autour des fils de cuivre, il pousse les électrons à bouger aussi. C’est ce mouvement des électrons qu’on appelle l'électricité." \<</type>> <<type 40ms>>\ Enfant : "Ah, comme si l'aimant donnait un coup de pouce aux électrons pour les faire bouger dans les fils !" \<</type>> <<type 50ms>>\ Pixii (riant) : "Exactement ! Un jour, ces petites étincelles pourront éclairer des villes entières." [["C'est incroyable !"|Fin8]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP4GP" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 4s>> <<audio "P4GP" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Pixii/Pixii.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 17s>> <<audio "PP5GP" play >> <</timed>> <<timed 22s>> <<audio "P5GP" play >> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant (impressionné) : "Des villes entières éclairées par des étincelles ? C’est incroyable ! Vous êtes un génie, M. Pixii." \<</type>> <<type 50ms>>\ Pixii (modeste) : "Je suis simplement un chercheur, Tom. Mais je suis sûr que l'avenir de cette invention est prometteur." [["Jouer"|Jeu pixii]] \<</type>> </div> <img src="Image Pixii/P1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP6GP" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 7s>> <<audio "P6GP" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Pixii/Pixii.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Bonjour, M. Faraday ! Que faites-vous avec cette machine ?" \<</type>> <<type 45ms>>\ Faraday (souriant) : "Ah, Électron ! Tu arrives juste à temps pour une démonstration. Ce que tu vois ici, c'est un moteur électrique. Je vais te montrer comment l'électricité peut créer du mouvement." \<</type>> <<type 50ms>>\ Faraday place un fil conducteur dans le récipient rempli de mercure, avec un aimant au centre. Lorsqu'il fait passer un courant électrique dans le fil, ce dernier se met à tourner autour de l'aimant ! [["Demander ce qu'est un moteur électrique."|MoteurElectrique]] [["Demander pourquoi le fil tourne."|PourquoiTourner]] \<</type>> </div> <<audio "fond" volume 0.10>> <<audio "PP1" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 4s>> <<audio "F1" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Faraday/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 14s>> <<audio "E2" play >> <</timed>> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ Enfant (intrigué) : "Un moteur électrique ? Ça veut dire qu'il transforme l'électricité en mouvement ?" \<</type>> <<type 45ms>>\ Faraday (enthousiaste) : "Exactement ! Lorsque le courant traverse le fil, il interagit avec le champ magnétique de l'aimant et ça crée une force qui fait bouger le fil. C'est ce qu'on appelle la force électromagnétique." [["Demander pourquoi le fil tourne."|PourquoiTourner]] \<</type>> </div> <<audio "PP21" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 5.5s>> <<audio "F21" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Faraday/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ Enfant : "Mais pourquoi le fil tourne-t-il autour de l'aimant ?" \<</type>> <<type 45ms>>\ Faraday (avec un sourire) : "C’est à cause de la force de Lorentz. Le courant dans le fil produit un champ magnétique qui interagit avec celui de l'aimant, et cela crée une force qui fait tourner le fil. On appelle cela la force électromagnétique." [["Demander à quoi ça sert."|Utilite9]] \<</type>> </div> <<audio "PP22" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 4s>> <<audio "F22" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Faraday/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ Enfant : "Et à quoi ça sert, un moteur électrique ?" \<</type>> <<type 45ms>>\ Faraday (enthousiaste) : "Cela peut servir à faire tourner des roues, faire fonctionner des machines... Dans le futur, cela pourrait même faire avancer des véhicules, ou alimenter des usines !" [["Incroyable !"|Fin9]] \<</type>> </div> <<audio "PP3" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "F3" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Faraday/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ Enfant (émerveillé) : "C'est incroyable ! Vous pouvez faire bouger des objets avec de l'électricité ?!" \<</type>> <<type 45ms>>\ Faraday (modeste) : "Oui, et ce n'est que le début. Ce principe pourrait transformer le monde. Imagine un jour où toute notre énergie proviendra de ces moteurs électriques !" [["Carte"|Transition]] \<</type>> </div> <img src="Image Faraday/MF1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP4" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 5s>> <<audio "F4" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Image Faraday/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Bonjour, M. Gaulard ! Que se passe-t-il ici ?" \<</type>> <<type 40ms>>\ Gaulard (souriant) : "Ah, Tom ! Tu tombes bien. Je vais te montrer un appareil qui pourrait révolutionner le transport de l’électricité. C'est un transformateur." \<</type>> <<type 55ms>>\ Gaulard pointe une série de bobines reliées à des fils qui serpentent autour de la pièce. Il active l'appareil, et une légère vibration remplit l'air. [["Demander ce qu'est un transformateur."|TransformateurExplication]] [["Demander pourquoi on en a besoin."|PourquoiBesoin]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP1T" play>> <div style="position: absolute; top: 5%; right: 10%; width: 400px; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "G1T" play >> <div style="position: absolute; top: 5%; left: 10%; width: 300px; height: auto;"> <img src="Transformateur/Gaulard.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 11s>> <<audio "E2T" play >> <div style="position: absolute; bottom: 5%; left: 8%; width: 300px; height: auto;"> <img src="Electron.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>>
<div class="text-box"> <<type 40ms>>\ Enfant (curieux) : "Un transformateur ? Ça sert à quoi ?" \<</type>> <<type 50ms>>\ Gaulard (enthousiaste) : "Le transformateur permet de modifier la tension de l'électricité. Ici, je peux augmenter ou diminuer la tension du courant électrique. Cela permet de transporter l'électricité sur de longues distances sans perdre trop d'énergie." [["Demander pourquoi on en a besoin."|PourquoiBesoin]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP2T" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 2.5s>> <<audio "G2T" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Transformateur/Gaulard.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Mais pourquoi devons-nous modifier la tension ?" \<</type>> <<type 50ms>>\ Gaulard : "Eh bien, quand tu veux envoyer de l'électricité très loin, une faible tension cause beaucoup de pertes d'énergie. En augmentant la tension, comme je le fais avec ce transformateur, l’électricité traverse les fils plus efficacement, avec moins de perte." [["Demander à quoi ça peut servir."|Utilite7]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP3T" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "G3T" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Transformateur/Gaulard.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant : "Et à quoi ça sert, concrètement ?" \<</type>> <<type 50ms>>\ Gaulard (fier) : "Imagine que tu veux alimenter une ville entière en électricité, mais la centrale électrique est très loin. Grâce au transformateur, tu peux envoyer l'électricité sur des centaines de kilomètres, et tout le monde aura de la lumière chez soi. C'est le début des réseaux électriques !" [["Impressionné !"|Fin7]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP4T" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 3s>> <<audio "G4T" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Transformateur/Gaulard.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ Enfant (impressionné) : "Waouh ! Vous êtes en train de changer la façon dont on utilise l'électricité !" \<</type>> <<type 50ms>>\ Gaulard (modeste) : "Peut-être bien. Ce transformateur pourrait rendre l'électricité accessible à tout le monde, partout dans le monde." [["Jouer"|Jeu Transformateur]] \<</type>> </div> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "PP5T" play>> <div style="position: absolute; top: 5%; right: 10%; width: 25%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <<timed 6s>> <<audio "G5T" play >> <div style="position: absolute; top: 5%; left: 10%; width: 17.54%; height: auto;"> <img src="Transformateur/Gaulard.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="video-container"> <video id="maVideo" controls autoplay> <source src="transition.mp4" type="video/mp4"> Ton navigateur ne supporte pas les vidéos HTML5. </video> </div> <<audio "transition" volume 4 play>> <<timed 2s>> <<goto "Carte">> <</timed>>
<div class="text-box"> <<type 30ms>>\ <<print $person1>> (surpris) : "Créer de l'électricité en bougeant un aimant ? C’est possible, ça ?" \<</type>> <<type 50ms>>\ <<print $person2>> (souriant) : "Absolument. Regarde, j’ai ici une bobine de fil de cuivre et un aimant. Si je fais passer cet aimant à travers la bobine, qu'est-ce que tu crois qu'il va se passer ?" [[Hum... Je ne sais pas. Peut-être que le fil va briller ou chauffer ?|Reaction2]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP2I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4s>> <<audio "F2I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 35ms>>\ <<print $person1>> (pensif) : "Hum... Je ne sais pas. Peut-être que le fil va briller ou chauffer ?" <<print $person2>> : "Pas exactement. Regarde bien." \<</type>> <<type 50ms>>\ (Faraday fait glisser l'aimant à travers la bobine de cuivre, et l’aiguille d'un galvanomètre à proximité se met à bouger.) [[Wow ! L’aiguille a bougé ! Qu’est-ce qui vient de se passer ?|Reaction3]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP3I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4s>> <<audio "F3I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 6s>> <<audio "E3I" play>> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 35ms>>\ <<print $person1>> (étonné) : "Wow ! L’aiguille a bougé ! Qu’est-ce qui vient de se passer ?" \<</type>> <<type 50ms>>\ <<print $person2>> (enthousiaste) : "C’est l’induction électromagnétique. Quand l'aimant bouge à travers la bobine, il crée un champ magnétique qui fait bouger les électrons dans le fil. Cela génère un courant électrique." [[Donc, en bougeant l'aimant, tu as fabriqué de l'électricité ?!|Reaction4]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP4I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4.8s>> <<audio "F4I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ <<print $person1>> (impressionné) : "Donc, en bougeant l'aimant, tu as fabriqué de l'électricité ?!" \<</type>> <<type 55ms>>\ <<print $person2>> : "Exactement ! Quand le champ magnétique change, il pousse les électrons à bouger, et ce mouvement crée un courant. C’est comme ça qu'on peut produire de l’électricité sans pile !" [[Mais pourquoi l'aimant doit-il bouger ?|Reaction5]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP5I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4.3s>> <<audio "F5I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 30ms>>\ <<print $person1>> (curieux) : "Mais pourquoi l'aimant doit-il bouger ?" \<</type>> <<type 50ms>>\ <<print $person2>> : "C'est la clé de l’induction ! Le champ magnétique doit changer pour que les électrons se mettent en mouvement. Si l'aimant reste immobile, rien ne se passe." [[Ah, donc c’est le changement qui fait tout ! Comme si l'aimant poussait et tirait les électrons à chaque mouvement.|Reaction6]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP6I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 2.8s>> <<audio "F6I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 38ms>>\ <<print $person1>> : "Ah, donc c’est le changement qui fait tout ! Comme si l'aimant poussait et tirait les électrons à chaque mouvement." \<</type>> <<type 55ms>>\ <<print $person2>> (souriant) : "Exactement ! Et grâce à cette découverte, nous pouvons maintenant fabriquer des générateurs qui produisent de l'électricité pour alimenter des maisons, des usines et même des villes entières." [[C’est incroyable ! Avec un simple aimant, tu as trouvé un moyen de produire de l’électricité.|Reaction7]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP7I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 6.5s>> <<audio "F7I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (émerveillé) : "C’est incroyable ! Avec un simple aimant, tu as trouvé un moyen de produire de l’électricité. Le futur est vraiment électrisant !" \<</type>> <<type 55ms>>\ <<print $person2>> (riant) : "Et ce n’est que le début. Un jour, grâce à l’induction électromagnétique, nous pourrons produire toute l’électricité dont nous avons besoin." [[Jouer au mini-jeu de l'induction électromagnétique]] \<</type>> </div> <img src="Induction électromagnétique/fond-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.5s>> <<audio "PP8I" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 8.7s>> <<audio "F8I" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Induction électromagnétique/Faraday.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (curieux) : "Une lampe qui fonctionne avec de l’électricité ? Comment est-ce possible ?" \<</type>> <<type 50ms>>\ <<print $person2>> (enthousiaste) : "Eh bien, c’est simple. À l’intérieur de l’ampoule, il y a un filament en carbone. Quand le courant passe à travers ce filament, il chauffe tellement qu’il commence à briller et produit de la lumière." [[Oh, je vois ! Donc le filament chauffe, mais pourquoi il ne brûle pas ?|ReactionL2]] \<</type>> </div> <img src="Lampe à incandescence/fond-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP2L" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 5.5s>> <<audio "E2L" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Lampe à incandescence/Edison.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (impressionné) : "Oh, je vois ! Donc le filament chauffe, mais pourquoi il ne brûle pas ?" \<</type>> <<type 50ms>>\ <<print $person2>> (explicatif) : "Bonne question ! L’ampoule est remplie de vide, ce qui empêche le filament de brûler au contact de l’air. C’est ce qui permet à la lumière de durer plus longtemps." [[Donc, cette petite ampoule pourrait éclairer toute une maison ?|ReactionL3]] \<</type>> </div> <img src="Lampe à incandescence/fond-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP3L" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 5.8s>> <<audio "E3L" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Lampe à incandescence/Edison.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (étonné) : "Donc, cette petite ampoule pourrait éclairer toute une maison ?" \<</type>> <<type 50ms>>\ <<print $person2>> (souriant) : "Exactement ! Et pas seulement une maison. Dans un futur proche, ces lampes éclaireront des villes entières, et tout sera alimenté par l’électricité." [[C’est incroyable ! On n’aura plus besoin de bougies, juste d’électricité !|ReactionL4]] \<</type>> </div> <img src="Lampe à incandescence/fond-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP4L" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4.8s>> <<audio "E4L" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Lampe à incandescence/Edison.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (excité) : "C’est incroyable ! On n’aura plus besoin de bougies, juste d’électricité !" \<</type>> <<type 50ms>>\ <<print $person2>> (riant) : "C’est bien l’idée. Une nouvelle ère commence grâce à l’électricité." [[Jouer au mini-jeu de la lampe à incandescence]] \<</type>> </div> <img src="Lampe à incandescence/fond-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP5L" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 5s>> <<audio "E5L" play>> <div style="position: absolute; top: 10%; left: 1%; width: 25%; height: auto;"> <img src="Lampe à incandescence/Edison.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (surpris) : "Une batterie qui se recharge ? Je croyais que les piles se jetaient quand elles étaient vides !" \<</type>> <<type 50ms>>\ <<print $person2>> (enthousiaste) : "C’est ce qui rend cette invention unique ! Ici, j’utilise du plomb et de l’acide pour créer une réaction chimique. Quand tu charges la batterie avec de l’électricité, elle stocke cette énergie, et quand tu en as besoin, elle la libère." [[Mais comment ça marche exactement ?|ReactionB2]] \<</type>> </div> <img src="Batterie rechargeable/fond-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP2B" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 6s>> <<audio "P2B" play>> <div style="position: absolute; top: 10%; right: 71%; width: 35%; height: auto;"> <img src="Batterie rechargeable/Planté.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (curieux) : "Mais comment ça marche exactement ?" \<</type>> <<type 48ms>>\ <<print $person2>> (expliquant) : "Lorsqu’on envoie de l’électricité dans l’accumulateur, ça modifie chimiquement les plaques de plomb. Ensuite, quand tu as besoin d’électricité, le processus s’inverse, et l’énergie est libérée." [[Donc, on peut utiliser l’énergie maintenant, puis la recharger plus tard ?|ReactionB3]] \<</type>> </div> <img src="Batterie rechargeable/fond-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP3B" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 2.7s>> <<audio "P3B" play>> <div style="position: absolute; top: 10%; right: 71%; width: 35%; height: auto;"> <img src="Batterie rechargeable/Planté.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (fasciné) : "Donc, on peut utiliser l’énergie maintenant, puis la recharger plus tard ?" \<</type>> <<type 48ms>>\ <<print $person2>> (souriant) : "Exactement ! Imagine un futur où les voitures et les machines pourraient être alimentées par ces batteries, et on pourrait les recharger encore et encore." [[Waouh, plus besoin d’acheter de nouvelles piles tout le temps ! C’est génial, M. Planté !|ReactionB4]] \<</type>> </div> <img src="Batterie rechargeable/fond-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP4B" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 4.8s>> <<audio "P4B" play>> <div style="position: absolute; top: 10%; right: 71%; width: 35%; height: auto;"> <img src="Batterie rechargeable/Planté.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div class="text-box"> <<type 40ms>>\ <<print $person1>> (enthousiaste) : "Waouh, plus besoin d’acheter de nouvelles piles tout le temps ! C’est génial, M. Planté !" \<</type>> <<type 48ms>>\ <<print $person2>> (riant) : "Oui, et cette technologie pourrait révolutionner la manière dont on utilise l’énergie dans le monde." [[Jouer au mini-jeu de la batterie rechargeable]] \<</type>> </div> <img src="Batterie rechargeable/fond-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<timed 0.8s>> <<audio "PP5B" play>> <div style="position: absolute; top: 10%; right: 1%; width: 30%; height: auto;"> <img src="Enfant.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<timed 6s>> <<audio "P5B" play>> <div style="position: absolute; top: 10%; right: 71%; width: 35%; height: auto;"> <img src="Batterie rechargeable/Planté.png" style="width: 100%; height: auto;" alt="Description de l'image"> </div> <</timed>> <<audio "fond" loop volume 0.2>>
<div style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('Images Leyde/Leyde_2.webp') no-repeat center center; background-size: cover; transform: scale(1); transition: transform 4s ease-in-out; " id="zoom-background"></div> <audio id="background-audio" autoplay loop> <source src="Audios Leyde/Foule.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas les fichiers audio. </audio> <script> setTimeout(() => { document.getElementById('zoom-background').style.transform = 'scale(1.5)'; }, 100); // NE PAS REDIRIGER ICI VIA JS </script> <!-- Timer pour redirection automatique Twine --> <<timed 4s>> <<goto "ReactionY2">> <</timed>> <<audio "fond" loop volume 0.1>>
<<set $Bouteille_de_leyde to true>> <!-- Audios --> <audio id="scientist-audio" preload="auto"> <source src="Audios Leyde/Audio_Leyde_2.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="courtisan1-audio" preload="auto"> <source src="Audios Leyde/courtisan_scared.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="courtisan2-audio" preload="auto"> <source src="Audios Leyde/courtisan_laugh.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Images des personnages (cachées au départ) --> <div id="scientist-image" style="position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 350px; display:none;"> <img src="Images Leyde/Peter_transparent.png" style="width: 100%;" alt="Pieter van Musschenbroek"> </div> <div id="courtisan1-image" style="position: absolute; top: 10%; right: 5%; width: 350px; display:none;"> <img src="Images Leyde/Courtisan_1_remove.png" style="width: 100%;" alt="Courtisan 1"> </div> <div id="courtisan2-image" style="position: absolute; bottom: 10%; right: 5%; width: 350px; display:none;"> <img src="Images Leyde/Courtisan_2_remove.png" style="width: 100%;" alt="Courtisan 2"> </div> <!-- Texte et dialogues --> <div class="text-box" style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Pieter van Musschenbroek** : "Voici l’ancêtre du condensateur. En utilisant cette bouteille, nous pouvons stocker de l’électricité en la chargeant par la tige métallique du dessus et, avec un simple contact, libérer une décharge spectaculaire. Quelqu’un aurait-il le cran de venir toucher cette bouteille ?"\ <</type>> <<type 40ms>>\ **Premier Courtisan** : "Moi ? Jamais de la vie ! Je tiens trop à mes doigts !"\ <</type>> <<type 40ms>>\ **Deuxième Courtisan** : "Oh, allons, ce n'est qu'une petite décharge. Vous ne voulez pas laisser passer votre chance d'entrer dans l'histoire ?"\ <</type>> <<type 40ms>>\ [[Non, je suis trop froussard...|ReactionY4]]<br>[[Oui, moi je suis volontaire !|ReactionY3]]\ <</type>> </div> <!-- Image de fond --> <img src="Images Leyde/Leyde_3_bis.webp" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.1>> <!-- Utilisation des macros Twine pour le timing --> <<timed 0s>> <<run $("#scientist-image").show()>> <<run $("#scientist-audio")[0].playbackRate = 1.25; $("#scientist-audio")[0].play();>> <</timed>> <<timed 19s>> <<run $("#courtisan1-image").show()>> <<run $("#courtisan1-audio")[0].play()>> <</timed>> <<timed 24s>> <<run $("#courtisan2-image").show()>> <<run $("#courtisan2-audio")[0].play()>> <</timed>>
<<set $Bouteille_de_leyde to "true">> <!-- Ajout de l'audio pour le scientifique et la bouteille --> <audio id="scientist-audio3" preload="auto"> <source src="Audios Leyde/Audio_Leyde_5.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="bottle-audio" preload="auto"> <source src="Audios Leyde/Bouteille.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Leyde/Leyde_3_bis.webp" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image du scientifique (agrandi) --> <div id="scientist-image" style=" position: absolute; top: 10%; left: 5%; width: 400px;"> <img src="Images Leyde/Peter_transparent.png" style="width: 100%;" alt="Pieter van Musschenbroek"> </div> <!-- Image de la bouteille (agrandie et centrée) --> <div id="bottle-container" style=" position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 300px;"> <img id="bottle-image" src="Images Leyde/Bouteille.png" style="width: 100%; cursor: pointer;" alt="Bouteille de Leyde"> </div> <!-- Texte et dialogues --> <div id="text-box" class="text-box" style=" position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Pieter van Musschenbroek** : « Tenez-vous prêt, cher ami. Touchez cette chaîne… Vous sentirez bientôt la puissance de l’électricité ! »\ <</type>> <!-- Conteneur invisible pour les liens --> <div id="links-container" style="display: none; text-align: center;"> [[Aie !!! Ca pique|ReactionY5]]<br> [[Même pas mal !|ReactionY5]] </div> </div> <!-- Scripts pour gérer les interactions --> <script> const scientistAudio3 = document.getElementById('scientist-audio3'); const bottleAudio = document.getElementById('bottle-audio'); const bottleImage = document.getElementById('bottle-image'); const linksContainer = document.getElementById('links-container'); // Lecture de l'audio du scientifique après un court délai setTimeout(() => { scientistAudio3.play().catch(error => { console.error("Audio scientifique ne peut pas être joué :", error); }); }, 500); // Délai de 500 ms pour s'assurer que tout est prêt // Animation et lecture de l'audio lorsque la bouteille est cliquée bottleImage.addEventListener('click', () => { bottleAudio.play(); // Animation forte de la bouteille bottleImage.style.animation = "shakeHard 0.3s ease-in-out 5"; // Affichage des liens après l'animation setTimeout(() => { linksContainer.style.display = "block"; }, 1500); }); // Animation de gigotement fort (keyframes CSS) const style = document.createElement('style'); style.innerHTML = ` @keyframes shakeHard { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-20px, 10px) rotate(-5deg); } 40% { transform: translate(20px, -10px) rotate(5deg); } 60% { transform: translate(-20px, 10px) rotate(-5deg); } 80% { transform: translate(20px, -10px) rotate(5deg); } 100% { transform: translate(0, 0) rotate(0deg); } } `; document.head.appendChild(style); </script> <<audio "fond" loop volume 0.1>>
<<set $Bouteille_de_leyde to "true">> <!-- Ajout des audios --> <audio id="scientist-audio4" preload="auto"> <source src="Audios Leyde/Audio_Leyde_4.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="electron-audio2" preload="auto"> <source src="Audios Leyde/Electron_Leyde.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Leyde/Leyde_3_bis.webp" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image dynamique pour le personnage --> <div id="character-image" style=" position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 300px;"> <img id="character-img" src="Images Leyde/Peter_transparent.png" style="width: 100%;" alt="Personnage"> </div> <!-- Texte et dialogues --> <div class="text-box" style=" position: absolute; bottom: 5%; /* Alignement en bas */ left: 50%; transform: translateX(-50%); width: 80%; /* Largeur augmentée pour un meilleur affichage */ background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Pieter van Musschenbroek** : "Bon tant pis vous ratez quelque chose..."\ <</type>> <<type 40ms>>\ **Électron** : "Hey ! Alors? Amusant nan? La bouteille de Leyde fonctionne comme un condensateur. Elle stocke l’électricité entre la surface intérieure et extérieure de la bouteille, séparées par le verre. Une fois qu’il y a assez de charge, PAF ! Elle se libère d’un coup. Amusant, non ?"\ <</type>> <<type 40ms>>\ [[Carte|Transition]]\ <</type>> </div> <!-- Scripts pour gérer les audios et le changement d'image --> <script> const scientistAudio4 = document.getElementById('scientist-audio4'); const electronAudio2 = document.getElementById('electron-audio2'); const characterImg = document.getElementById('character-img'); // Lecture de l'audio du scientifique setTimeout(() => { scientistAudio4.play(); }, 1000); // Lecture après 1 seconde // Changer l'image pour l'électron et jouer son audio setTimeout(() => { characterImg.src = "Electron.png"; // Remplacement de l'image characterImg.alt = "Électron"; // Modification de l'attribut alt electronAudio2.play(); // Lecture de l'audio de l'électron }, 5000); // Après 5 secondes </script> <<audio "fond" loop volume 0.1>>
<<set $Paratonnerre_experience to "true">> <!-- Ajout de l'audio --> <audio id="benjamin-audio" preload="auto" autoplay> <source src="Audios para/Para_2.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Para/Para_1.jpg" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image de Benjamin Franklin --> <div id="benjamin-image" style=" position: absolute; top: 5%; left: 50%; transform: translateX(-50%); width: 250px;"> <img src="Images para/benji.png" style="width: 100%;" alt="Benjamin Franklin"> </div> <!-- Texte et dialogues --> <div id="text-box" class="text-box" style=" position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Benjamin Franklin** (avec enthousiasme) : « Mesdames et messieurs ! Aujourd'hui, je vais vous montrer comment nous pouvons tirer l’électricité des nuages ! J’ai constaté que les éclairs et les étincelles partagent des caractéristiques fascinantes : leur couleur, leur rapidité, et même leur capacité à fondre les métaux ! »\ <</type>> <<type 40ms>>\ **Benjamin Franklin** : « Cette tige agira comme un paratonnerre. En se plaçant en hauteur, elle peut capter l'électricité des nuages. Et en reliant cette tige à la terre par un fil le danger de la foudre est atténué ! »\ <</type>> <<type 40ms>>\ **Benjamin Franklin** : « Maintenant je vais vous montrer l'expérience que j'ai réalisée avec un cerf-volant pour prouver qu'un éclair est électrique! Voulez-vous y assister ? »\ <</type>> <br><br> [[Oh oui avec plaisir !|ReactionP2]] </div> <script> const benjaminAudio = document.getElementById('benjamin-audio'); // Forcer la lecture si autoplay échoue benjaminAudio.addEventListener('error', () => { setTimeout(() => { benjaminAudio.play().catch(error => { console.error("Lecture automatique bloquée :", error); }); }, 500); // Retenter après un délai }); </script> <<audio "fond" loop volume 0.1>>
<<set $Paratonnerre to "true">> <!-- Ajout des audios locaux --> <audio id="franklin-audio" preload="auto"> <source src="Audios para/Para_3.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <audio id="electron-audio" preload="auto"> <source src="Audios para/Para_4.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Texte et dialogues --> <div class="text-box" style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Benjamin Franklin** : « Lors de cette expérience, j'ai attaché un cerf-volant à une corde faite de chanvre, humidifiée par la pluie pour conduire l'électricité. Une clef métallique était fixée au bas de la corde, et je tenais un cordon de soie pour m’isoler des décharges. Quand un éclair frappait, l’électricité se déplaçait le long de la corde jusqu’à la clef, où je pouvais observer des étincelles. Cela a confirmé que les éclairs sont de nature électrique. »\ <</type>> <<type 40ms>>\ **Électron** : « Incroyable, non ? Mais au début, les gens avaient peur de ces paratonnerres ! Ils doutaient de leur efficacité. Mais regarde comme ça fonctionne maintenant ! Les premiers ont été installés dans toute la France ! »\ <</type>> <br><br> [[Continuer|ReactionP3]] </div> <!-- Image de fond --> <img src="Images para/Para_2.jpg" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image de Benjamin Franklin --> <div id="franklin-image" style=" position: absolute; top: 50%; left: 10%; transform: translateY(-50%); width: 200px;"> <img src="Images para/benji_cerf.png" style="width: 100%;" alt="Benjamin Franklin"> </div> <!-- Image de l'Électron --> <div id="electron-image" style=" position: absolute; top: 50%; right: 10%; transform: translateY(-50%); width: 200px;"> <img src="Electron.png" style="width: 100%;" alt="Électron"> </div> <script> // Lecture des audios const franklinAudio = document.getElementById('franklin-audio'); const electronAudio = document.getElementById('electron-audio'); // Lancer les audios avec un délai approprié setTimeout(() => { franklinAudio.play(); }, 1000); // Démarre Franklin après 1 seconde setTimeout(() => { electronAudio.play(); }, 26000); // Démarre Électron après 26 secondes // Nettoyage des audios à la sortie du passage window.addEventListener("beforeunload", () => { franklinAudio.pause(); franklinAudio.currentTime = 0; electronAudio.pause(); electronAudio.currentTime = 0; }); </script> <<audio "fond" loop volume 0.1>>
<<set $InteractionParatonnerre to "true">> <!-- Ajout de l'audio --> <audio id="para-audio2" preload="auto"> <source src="Audios para/Para_5.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Texte et instructions --> <div class="text-box" style=" position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>> **Électron** : « Attention, la foudre s’abat sur la ville. Ta maison est en danger. Utilise le paratonnerre de Monsieur Franklin pour protéger ta maison. Fais glisser la souris pour orienter le paratonnerre vers les éclairs qui tombent. » <</type>> <br><br> [[Protéger ma maison!|JeuProtection]] </div> <!-- Image de fond --> <img src="Images para/jeu.jpg" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image de l'Électron --> <div class="character-box" style=" position: absolute; top: 50%; left: 5%; transform: translateY(-50%); width: 300px;"> <img src="Electron.png" style="width: 100%;" alt="Électron"> </div> <!-- Scripts pour gérer les audios et les images --> <script> // Fonction pour arrêter les audios en cours function stopAllAudios() { const audios = document.querySelectorAll('audio'); audios.forEach(audio => { audio.pause(); audio.currentTime = 0; // Réinitialise l'audio à 0 }); } // Fonction pour nettoyer les éléments des passages précédents function cleanUp() { document.querySelectorAll('.passage-element').forEach(element => { element.remove(); }); } // Appeler les fonctions de nettoyage stopAllAudios(); cleanUp(); // Jouer l'audio de l'Électron const paraAudio2 = document.getElementById('para-audio2'); setTimeout(() => { paraAudio2.play(); }, 1000); // Délai de 1 seconde avant de jouer l'audio </script> <<audio "fond" loop volume 0.1>>
<style> html, body { height: 100%; margin: 0; padding: 0; } #gameArea { position: relative; width: 800px; height: 600px; border: 2px solid black; background-color: skyblue; overflow: hidden; margin: 0 auto; top: 50%; /* Positionné à 50% de la hauteur */ transform: translateY(-50%); /* Centré verticalement */ } #paratonnerre { position: absolute; width: 20px; height: 80px; background-color: gray; bottom: 130px; } #maison { position: absolute; width: 150px; height: 100px; background-color: brown; bottom: 0; left: 325px; border: 2px solid black; border-radius: 5px; } #maison::before { content: ""; position: absolute; top: -60px; left: -10px; border-left: 85px solid transparent; border-right: 85px solid transparent; border-bottom: 60px solid #8B4513; } .fenetre { position: absolute; width: 30px; height: 30px; background-color: lightblue; border: 1px solid black; } #fenetre1 { top: 30px; left: 15px; } #fenetre2 { top: 30px; right: 15px; } #porte { position: absolute; bottom: 0; left: 60px; width: 30px; height: 50px; background-color: #4B2E2E; border: 2px solid black; border-radius: 3px; } .eclair { position: absolute; width: 10px; height: 50px; background-color: yellow; animation: fall 3s linear infinite; } #animation { display: none; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; font-size: 24px; } @keyframes fall { 0% { top: -50px; } 100% { top: 600px; } } #pointsContainer { position: absolute; bottom: 20px; left: 20px; color: white; font-size: 20px; } </style> <img src="Images para/jeu.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <audio id="background-sound" autoplay loop> <source src="Audios para/foudre.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <div id="gameArea"> <div id="paratonnerre"></div> <div id="maison"> <div id="fenetre1" class="fenetre"></div> <div id="fenetre2" class="fenetre"></div> <div id="porte"></div> </div> <div id="animation"></div> </div> <div id="pointsContainer"> <p>Points : <span id="points">0</span> / 15</p> <p><span id="status"></span></p> </div> <script> (() => { // Variables de jeu let points = 0; let eclairsEvites = 0; let jeuTermine = false; // Initialisation du paratonnerre et suivi de la souris const gameArea = document.getElementById("gameArea"); const paratonnerre = document.getElementById("paratonnerre"); gameArea.addEventListener("mousemove", (event) => { if (!jeuTermine) { const rect = gameArea.getBoundingClientRect(); paratonnerre.style.left = `${event.clientX - rect.left - paratonnerre.offsetWidth / 2}px`; } }); // Fonction pour créer un éclair function creerEclair() { if (jeuTermine) return; const eclair = document.createElement("div"); eclair.classList.add("eclair"); // Position aléatoire de l'éclair au sommet eclair.style.left = `${Math.random() * (gameArea.offsetWidth - 10)}px`; gameArea.appendChild(eclair); // Détection des collisions avec le paratonnerre const checkCollision = setInterval(() => { const eclairRect = eclair.getBoundingClientRect(); const paratonnerreRect = paratonnerre.getBoundingClientRect(); const maisonRect = document.getElementById("maison").getBoundingClientRect(); const gameAreaRect = gameArea.getBoundingClientRect(); // Vérifie si l'éclair atteint la maison if (eclairRect.top >= gameAreaRect.bottom - maisonRect.height) { clearInterval(checkCollision); eclair.remove(); if (!jeuTermine) { finJeu("Un éclair a touché la maison ! Vous avez perdu !", false); } } // Vérifie la collision entre l'éclair et le paratonnerre else if ( eclairRect.left < paratonnerreRect.right && eclairRect.right > paratonnerreRect.left && eclairRect.bottom >= paratonnerreRect.top ) { clearInterval(checkCollision); eclair.remove(); points++; document.getElementById("points").textContent = points; if (points >= 15) { finJeu("Bravo ! Vous avez protégé la maison de 15 éclairs !", true); } } }, 20); // Supprime l'éclair après sa chute eclair.addEventListener("animationend", () => { eclair.remove(); eclairsEvites++; // Génère un nouvel éclair si le jeu n'est pas terminé if (!jeuTermine && eclairsEvites < 15) { setTimeout(creerEclair, 1000); } }); } // Lancement du premier éclair function lancerJeu() { for (let i = 0; i < 15; i++) { setTimeout(creerEclair, i * 1000); // Génère un éclair toutes les secondes } } lancerJeu(); // Fonction de fin de jeu function finJeu(message, victoire) { jeuTermine = true; document.getElementById("status").textContent = message; showAnimation(victoire); } // Fonction pour afficher l'animation de victoire/défaite function showAnimation(victory) { const animation = document.getElementById("animation"); animation.textContent = victory ? "Victoire !" : "Défaite !"; animation.style.display = 'flex'; let countdown = 4; const countdownInterval = setInterval(() => { animation.textContent = `${victory ? "Victoire !" : "Défaite !"} Retour vers la carte dans ${countdown} secondes...`; countdown--; if (countdown < 0) { clearInterval(countdownInterval); animation.style.display = 'none'; // Transition vers la carte if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } else { window.location.href = "carte.html"; // Redirection vers la carte } } }, 1000); } })(); </script> <<audio "fond" loop volume 0.1>>
<style> #pileTitle { font-size: 1.2em; /* Réduire la taille de la police du titre */ margin: 10px 0; /* Réduire l’espace au-dessus et en-dessous du titre */ color: #ff6347; position: relative; top: 50px; text-align: center; font-size: 1.8em; } #pileDescription { font-size: 1em; /* Taille de police plus petite */ line-height: 1.2; /* Réduire l’interligne pour que le texte prenne moins de place verticalement */ color: #333; text-align: center; margin: 0 auto 10px auto; /* Centrer et réduire les marges */ width: 80%; font-size: 1.2em; } #pileGameAreaWrapper { width: 640px; height: 440px; background-color: #87CEFA; margin: 20px auto; display: flex; justify-content: center; align-items: center; padding: 10px; box-sizing: border-box; position: relative; overflow-y: auto; } #pileGameArea { display: flex; justify-content: space-around; width: 600px; margin: 0 auto; height: 400px; } .pileTower { width: 150px; height: 300px; border: 2px solid black; display: flex; flex-direction: column-reverse; align-items: center; background-color: #d0eecf; } .pileBlock { text-align: center; height: 30px; line-height: 30px; font-weight: bold; color: white; cursor: pointer; } #pileBlock1 { background-color: #c0c0c0; width: 120px; color: black; } /* Zinc */ #pileBlock2 { background-color: #708090; width: 100px; } /* Tissu imbibé */ #pileBlock3 { background-color: #b87333; width: 80px; } /* Cuivre */ #pileMessage { text-align: center; margin-top: 20px; font-weight: bold; color: green; font-size: 1.4em; } #victoryMessage { font-size: 2em; font-weight: bold; color: #28a745; text-align: center; margin-top: 20px; } </style> <h1 id="pileTitle">Crée une pile voltaïque correcte dans la troisième tour !</h1> <p id="pileDescription"> Une pile voltaïque est composée dans l'ordre suivant : <strong>Zinc → Tissu imbibé → Cuivre → Zinc → Tissu imbibé → Cuivre</strong>. Déplace les blocs pour recréer cette pile ! </p> <div id="pileGameAreaWrapper"> <div id="pileGameArea"> <div id="pileTower1" class="pileTower" onclick="pileSelectTower(1)">Tour 1</div> <div id="pileTower2" class="pileTower" onclick="pileSelectTower(2)">Tour 2</div> <div id="pileTower3" class="pileTower" onclick="pileSelectTower(3)">Tour 3</div> </div> </div> <p id="pileMessage"></p> <p id="victoryMessage" style="display: none;"></p> <button id="pileRestartButton" onclick="pileRestartGame()" style="display: none;">Recommencer</button> <script> const pileTowers = [[], [], []]; let pileSelectedBlock = null; let pileSelectedTower = null; const pileCorrectOrder = [ "pileBlock1", "pileBlock2", "pileBlock3", // Zinc - Tissu - Cuivre "pileBlock1", "pileBlock2", "pileBlock3" // Zinc - Tissu - Cuivre ]; let pileGameOver = false; // Initialiser les blocs dans la première tour function pileInitializeGame() { pileGameOver = false; document.getElementById("pileMessage").textContent = ""; document.getElementById("victoryMessage").style.display = "none"; document.getElementById("pileRestartButton").style.display = "none"; // Créer les blocs et les placer dans la tour 1 const initialOrder = [ "pileBlock3", "pileBlock2", "pileBlock1", // Cuivre - Tissu - Zinc "pileBlock3", "pileBlock2", "pileBlock1" // Cuivre - Tissu - Zinc ]; initialOrder.forEach(id => { const block = document.createElement("div"); block.classList.add("pileBlock"); block.id = id; block.textContent = id === "pileBlock1" ? "Zinc" : id === "pileBlock2" ? "Tissu imbibé" : "Cuivre"; document.getElementById("pileTower1").appendChild(block); pileTowers[0].push(block); }); } pileInitializeGame(); // Fonction pour sélectionner ou déplacer un bloc function pileSelectTower(towerIndex) { if (pileGameOver) return; const tower = pileTowers[towerIndex - 1]; if (pileSelectedBlock) { // Déplace le bloc vers la tour sélectionnée const previousTower = pileTowers[pileSelectedTower - 1]; previousTower.pop(); document.getElementById("pileTower" + towerIndex).appendChild(pileSelectedBlock); tower.push(pileSelectedBlock); pileSelectedBlock = null; pileSelectedTower = null; // Vérifie la victoire pileCheckWin(); } else if (tower.length > 0) { // Sélectionne le bloc au sommet de la tour actuelle pileSelectedBlock = tower[tower.length - 1]; pileSelectedTower = towerIndex; } } // Fonction pour vérifier la condition de victoire function pileCheckWin() { const blocksInTower3 = pileTowers[2].map(block => block.id); if (blocksInTower3.length === pileCorrectOrder.length && JSON.stringify(blocksInTower3) === JSON.stringify(pileCorrectOrder)) { pileEndGame("Bravo ! Vous avez construit une pile voltaïque correcte !"); } } // Fonction de fin de jeu avec compte à rebours function pileEndGame(message) { pileGameOver = true; let pileCountdown = 5; const victoryMessageElement = document.getElementById("victoryMessage"); victoryMessageElement.style.display = "block"; victoryMessageElement.textContent = message; const pileCountdownInterval = setInterval(() => { victoryMessageElement.textContent = `${message} Retour vers la carte dans ${pileCountdown} secondes...`; pileCountdown--; if (pileCountdown < 0) { clearInterval(pileCountdownInterval); if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } else { window.location.href = 'carte.html'; } } }, 1000); document.getElementById("pileRestartButton").style.display = "inline"; } // Fonction pour recommencer le jeu function pileRestartGame() { pileTowers.forEach(tower => tower.length = 0); [1, 2, 3].forEach(i => document.getElementById("pileTower" + i).innerHTML = ""); pileInitializeGame(); } </script> <<audio "fond" loop volume 0.1>>
<html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Jeu de la Lampe à Incandescence</title> <style> /* Style global */ body { font-family: Arial, sans-serif; text-align: center; background-color: transparent; margin: 0; overflow: hidden; } /* Titre principal */ h1 { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); font-size: 3vw; /* Taille dynamique */ color: #ff6347; margin: 0; z-index: 10; } /* Message initial */ #message-initial { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #22c6ff; white-space: nowrap; animation: pulse 1.5s infinite; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); z-index: 10; } /* Lampe */ #lampe { position: absolute; width: 8%; /* Largeur proportionnelle */ aspect-ratio: 5 / 7; /* Garantit un bulbe avec forme correcte */ background-color: white; border: 0.3vw solid black; border-radius: 50% 50% 0 0; /* Forme de bulbe */ top: 40%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 1vw rgba(0, 0, 0, 0.5); z-index: 10; } /* Interrupteur */ #interrupteur { position: absolute; width: 4%; /* Largeur dynamique */ aspect-ratio: 3 / 5; /* Forme rectangulaire */ background-color: white; border: 0.2vw solid black; border-radius: 1vw; bottom: 15%; left: 50%; transform: translateX(-50%); cursor: pointer; transition: background-color 0.3s; z-index: 10; } /* Message final */ #message { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #f10b0b; z-index: 10; } /* Animation de fin */ #animation { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); color: white; display: none; justify-content: center; align-items: center; font-size: 3vw; z-index: 100; } /* Animation d'impulsion */ @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } } </style> </head> <body> <h1>Jeu de la Lampe à Incandescence</h1> <div id="message-initial">Clique sur l'interrupteur pour voir si la lampe s'allume !</div> <!-- Lampe --> <div id="lampe"></div> <!-- Interrupteur --> <div id="interrupteur"></div> <!-- Animation --> <div id="animation"></div> <!-- Message --> <div id="message"></div> <script> const interrupteur = document.getElementById('interrupteur'); const lampe = document.getElementById('lampe'); const message = document.getElementById('message'); const animation = document.getElementById('animation'); // Variable pour déterminer si la lampe s'allume let willLightUp; let hasPlayed = false; // Variable pour suivre si le joueur a déjà joué // Fonction pour générer une chance aléatoire function generateChance() { willLightUp = Math.random() < 0.45; // 45% de chance de s'allumer } // Fonction pour afficher le résultat du jeu function showResult() { if (hasPlayed) { message.textContent = "Vous avez déjà joué !"; // Message si le joueur essaie de jouer à nouveau return; // Ne rien faire si le joueur a déjà joué } hasPlayed = true; // Marquer le jeu comme joué if (willLightUp) { lampe.style.backgroundColor = 'yellow'; // Couleur de la lampe allumée interrupteur.style.backgroundColor = 'green'; // Interrupteur vert message.textContent = "Bravo ! La lampe s'allume !"; } else { interrupteur.style.backgroundColor = 'red'; // Interrupteur rouge message.textContent = "Désolé ! La lampe ne s'allume pas."; } showAnimation(willLightUp); // Appeler la fonction d'animation avec la victoire ou défaite } // Fonction pour afficher l'animation de victoire/défaite avec décompte et retour vers la carte function showAnimation(victory) { animation.textContent = victory ? "Victoire !" : "Défaite !"; animation.style.display = 'flex'; // Démarre un compte à rebours de 5 secondes let countdown = 5; const countdownInterval = setInterval(() => { animation.textContent = `${victory ? "Victoire !" : "Défaite !"} Retour vers la carte dans ${countdown} secondes...`; countdown--; // Lorsque le compte à rebours est terminé, redirige vers la carte if (countdown < 0) { clearInterval(countdownInterval); // Si SugarCube est utilisé, lance la transition vers la carte if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } else { // Sinon, redirige vers la carte (remplace l'URL par celle de ta carte) window.location.href = 'https://votre-carte-url.com'; // Remplace par l'URL de ta carte } } }, 1000); } // Générer une chance au départ generateChance(); // Événement pour le clic sur l'interrupteur interrupteur.addEventListener('click', showResult); </script> </body> </html> <img src="Lampe à incandescence/jeu-lampe.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
<html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Jeu de la Batterie Rechargeable</title> <style> /* Style global */ html, body { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; background-color: transparent; } /* Conteneur principal */ #game-container { position: absolute; width: 100%; height: 100%; background-color: transparent; } /* Titre */ h1 { position: absolute; top: 2%; left: 50%; transform: translateX(-50%); font-size: 2.5vw; color: #ff6347; margin: 0; z-index: 10; } /* Instructions */ #instructions { position: absolute; top: 6%; left: 50%; transform: translateX(-50%); font-size: 1.5vw; color: #ff6347; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); white-space: nowrap; animation: pulse 1.5s infinite; z-index: 10; } /* Aire de jeu */ #batteryPlayground { position: absolute; width: 85%; height: 65%; top: 15%; left: 50%; transform: translateX(-50%); border: 0.5vw solid black; background-color: transparent; overflow: hidden; z-index: 5; } /* Batterie */ #battery { position: absolute; width: 3%; height: 10%; top: 30%; left: 50%; transform: translate(-50%, -50%); background-color: white; border: 0.3vw solid black; border-radius: 0.5vw; z-index: 10; } #batteryFill { width: 100%; height: 0%; background-color: limegreen; position: absolute; bottom: 0; transition: height 0.3s ease; } /* Origine du projectile */ #batteryProjectileOrigin { position: absolute; width: 0.8vw; height: 0.8vw; background-color: red; border-radius: 50%; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 15; } /* Projectiles */ .projectile { position: absolute; width: 0.8vw; height: 0.8vw; background-color: yellow; border-radius: 50%; z-index: 5; } /* Compteur de temps */ #batteryCountdown { position: absolute; top: 83%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #1a4ab3; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); animation: pulse 1.5s infinite; z-index: 10; } /* Compteur de projectiles */ #batteryProjectileCount { position: absolute; top: 88%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #1a4ab3; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); animation: pulse 1.5s infinite; z-index: 10; } /* Animation de fin de partie */ #batteryAnimation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: center; font-size: 3vw; color: white; background-color: rgba(0, 0, 0, 0.7); z-index: 100; } /* Keyframes pour l'animation d'impulsion */ @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } } </style> </head> <body> <h1>Jeu de la Batterie Rechargeable</h1> <div id="instructions"> Cliquez pour envoyer des projectiles d'électricité vers la batterie ! Vous devez toucher la batterie 7 fois en 15 secondes pour gagner. </div> <div id="batteryPlayground"> <div id="battery"> <div id="batteryFill"></div> </div> <div id="batteryProjectileOrigin"></div> <div id="batteryAnimation"></div> </div> <div id="batteryCountdown">Temps restant: <span id="batteryTimerElement">15</span> secondes</div> <div id="batteryProjectileCount">Projectiles touchés: <span id="batteryHitCountElement">0</span></div> <div id="batteryMessage"></div> <script> // Variables globales spécifiques au jeu de la batterie rechargeable var batteryGameActive = false; var batteryGameEnded = false; var batteryProjectileCount = 0; var batteryTimeLeft = 15; var batteryCanShoot = true; var batteryRequiredProjectiles = 7; // Référence des éléments HTML const batteryPlayground = document.getElementById('batteryPlayground'); const battery = document.getElementById('battery'); const batteryFill = document.getElementById('batteryFill'); const batteryMessage = document.getElementById('batteryMessage'); const batteryAnimation = document.getElementById('batteryAnimation'); const batteryProjectileOrigin = document.getElementById('batteryProjectileOrigin'); const batteryTimerElement = document.getElementById('batteryTimerElement'); const batteryHitCountElement = document.getElementById('batteryHitCountElement'); function initGame() { batteryGameActive = true; batteryGameEnded = false; batteryProjectileCount = 0; batteryTimeLeft = 15; batteryCanShoot = true; batteryTimerElement.textContent = batteryTimeLeft; batteryHitCountElement.textContent = batteryProjectileCount; batteryFill.style.height = '0%'; batteryAnimation.style.display = 'none'; startTimer(); moveBattery(); } function shootProjectile() { if (!batteryGameActive || !batteryCanShoot || batteryGameEnded) return; const projectile = document.createElement('div'); projectile.className = 'projectile'; projectile.style.left = `${batteryProjectileOrigin.offsetLeft + 5}px`; projectile.style.top = `${batteryProjectileOrigin.offsetTop}px`; batteryPlayground.appendChild(projectile); const interval = setInterval(() => { projectile.style.top = `${projectile.offsetTop - 5}px`; if (isColliding(projectile, battery)) { batteryProjectileCount++; batteryHitCountElement.textContent = batteryProjectileCount; const fillPercentage = Math.min((batteryProjectileCount / batteryRequiredProjectiles) * 100, 100); batteryFill.style.height = `${fillPercentage}%`; if (batteryProjectileCount >= batteryRequiredProjectiles) { endGame(true); } clearInterval(interval); projectile.remove(); } if (projectile.offsetTop < 0) { clearInterval(interval); projectile.remove(); } }, 30); batteryCanShoot = false; setTimeout(() => { batteryCanShoot = true; }, 500); } function isColliding(projectile, battery) { const projectileRect = projectile.getBoundingClientRect(); const batteryRect = battery.getBoundingClientRect(); return !( projectileRect.top > batteryRect.bottom || projectileRect.bottom < batteryRect.top || projectileRect.left > batteryRect.right || projectileRect.right < batteryRect.left ); } function endGame(victory) { batteryGameActive = false; batteryGameEnded = true; batteryAnimation.textContent = victory ? "Victoire !" : "Défaite !"; batteryAnimation.style.display = 'flex'; let countdown = 5; const countdownInterval = setInterval(() => { batteryAnimation.textContent = `${victory ? "Victoire !" : "Défaite !"} Retour vers la carte dans ${countdown} secondes...`; countdown--; if (countdown < 0) { clearInterval(countdownInterval); if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } } }, 1000); } function startTimer() { const timerInterval = setInterval(() => { if (batteryTimeLeft <= 0) { clearInterval(timerInterval); endGame(false); } else if (!batteryGameActive || batteryGameEnded) { clearInterval(timerInterval); } else { batteryTimeLeft--; batteryTimerElement.textContent = batteryTimeLeft; } }, 1000); } function moveBattery() { const playgroundRect = batteryPlayground.getBoundingClientRect(); setInterval(() => { if (!batteryGameActive || batteryGameEnded) return; const randomX = Math.random() * (playgroundRect.width - 40); const randomY = Math.random() * (playgroundRect.height - 100); battery.style.left = `${randomX}px`; battery.style.top = `${Math.max(20, randomY)}px`; }, 1500); } document.addEventListener('mousemove', (event) => { const playgroundRect = batteryPlayground.getBoundingClientRect(); const x = event.clientX - playgroundRect.left; const y = event.clientY - playgroundRect.top; batteryProjectileOrigin.style.left = `${x}px`; batteryProjectileOrigin.style.top = `${y}px`; }); batteryPlayground.addEventListener('click', () => { if (!batteryGameActive && !batteryGameEnded) { initGame(); // Démarre le jeu seulement au premier clic } shootProjectile(); }); </script> </body> </html> <img src="Batterie rechargeable/jeu-batterie.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
<html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Jeu d'Induction Électromagnétique</title> <style> /* Style global */ body { font-family: Arial, sans-serif; text-align: center; background-color: transparent; margin: 0; overflow: hidden; } /* Titre principal */ h1 { position: absolute; top: 1.5%; left: 50%; transform: translateX(-50%); font-size: 3vw; /* Taille dynamique */ color: #ff6347; margin: 0; z-index: 10; } /* Message d'instructions */ #inductionMessage { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); font-size: 1.6vw; color: #22c6ff; font-weight: bold; white-space: nowrap; animation: pulse 1.5s infinite; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); z-index: 10; } /* Aire de jeu */ #inductionPlayground { position: absolute; width: 85%; height: 70%; top: 15%; left: 50%; transform: translateX(-50%); border: 0.5vw solid black; overflow: hidden; z-index: 5; background-color: transparent; } /* Bobine */ #inductionCoil { position: absolute; width: 7%; /* Taille relative en largeur */ aspect-ratio: 1 / 1; /* Garantit que la hauteur = largeur */ background-color: #ccc; border-radius: 50%; /* Cercle parfait */ top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background-color 0.3s; } /* Aimant */ #inductionMagnet { position: absolute; width: 3.5%; /* Taille relative */ aspect-ratio: 1 / 1; /* Cercle parfait */ background-color: red; border-radius: 50%; top: 10%; left: 50%; transform: translate(-50%, 0); cursor: pointer; z-index: 10; } /* Zone en pointillés */ #inductionDashedZone { position: absolute; width: 20%; /* Taille relative */ aspect-ratio: 1 / 1; /* Cercle parfait */ border: 0.2vw dashed black; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; } /* Affichage du temps */ #inductionTimeLeftDisplay { position: absolute; bottom: 7%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #ffff00; font-weight: bold; animation: pulse 1.5s infinite; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } /* Affichage des vies */ #inductionLivesLeftDisplay { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); font-size: 2vw; color: #ffffff; font-weight: bold; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); } /* Résultat */ #inductionResult { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 4vw; color: #ff6347; z-index: 10; display: none; opacity: 0; transition: opacity 1s ease; } /* Animation de fin */ #inductionAnimation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); color: white; display: none; justify-content: center; align-items: center; font-size: 3vw; z-index: 100; } /* Animation d'impulsion */ @keyframes pulse { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.1); } } </style> </head> <body> <h1>Jeu d'Induction Électromagnétique</h1> <div id="inductionMessage">Attrape l'aimant rouge et fais-le tourner autour de la bobine grise dans la zone en pointillée pour générer de l'électricité !</div> <!-- Cadre du jeu --> <div id="inductionPlayground"> <div id="inductionCoil"></div> <div id="inductionMagnet"></div> <div id="inductionDashedZone"></div> <div id="inductionResult"></div> </div> <div id="inductionTimeLeftDisplay">Temps restant : <span id="inductionTimeLeft">15</span> secondes</div> <div id="inductionLivesLeftDisplay">Vies restantes : <span id="inductionLivesLeft">3</span></div> <div id="inductionAnimation"></div> <script> const inductionPlayground = document.getElementById('inductionPlayground'); const inductionMagnet = document.getElementById('inductionMagnet'); const inductionCoil = document.getElementById('inductionCoil'); const inductionMessage = document.getElementById('inductionMessage'); const inductionTimeLeftDisplay = document.getElementById('inductionTimeLeft'); const inductionLivesLeftDisplay = document.getElementById('inductionLivesLeft'); const inductionDashedZone = document.getElementById('inductionDashedZone'); const inductionResult = document.getElementById('inductionResult'); const inductionAnimation = document.getElementById('inductionAnimation'); let inductionDragging = false; let inductionGameStarted = false; let inductionStartTime; let inductionSpinningTime = 0; let inductionTimeLeft = 15; let inductionGameOver = false; let inductionIsGeneratingElectricity = false; let inductionTimer; let inductionLives = 3; let inductionAngle = 0; let inductionSpeedThreshold = 0.5; let inductionSpinsNeeded = 15; let inductionCurrentSpins = 0; let inductionAutoSpinInterval; let inductionIsInZone = false; // Fonction pour déplacer l'aimant inductionPlayground.addEventListener('mousedown', (e) => { if (e.target === inductionMagnet && !inductionGameOver) { inductionDragging = true; inductionStartTime = new Date(); if (!inductionGameStarted) { inductionGameStarted = true; startCountdown(); } clearInterval(inductionAutoSpinInterval); } }); inductionPlayground.addEventListener('mousemove', (e) => { if (inductionDragging && !inductionGameOver) { const rect = inductionPlayground.getBoundingClientRect(); let x = e.clientX - rect.left - inductionMagnet.offsetWidth / 2; let y = e.clientY - rect.top - inductionMagnet.offsetHeight / 2; const margin = 5; if (x < margin) x = margin; if (y < margin) y = margin; if (x > inductionPlayground.clientWidth - inductionMagnet.offsetWidth - margin) x = inductionPlayground.clientWidth - inductionMagnet.offsetWidth - margin; if (y > inductionPlayground.clientHeight - inductionMagnet.offsetHeight - margin) y = inductionPlayground.clientHeight - inductionMagnet.offsetHeight - margin; inductionMagnet.style.left = x + 'px'; inductionMagnet.style.top = y + 'px'; const aimantCenterX = x + inductionMagnet.offsetWidth / 2; const aimantCenterY = y + inductionMagnet.offsetHeight / 2; const bobineCenterX = inductionPlayground.clientWidth / 2; const bobineCenterY = inductionPlayground.clientHeight / 2; const distance = Math.sqrt((aimantCenterX - bobineCenterX) ** 2 + (aimantCenterY - bobineCenterY) ** 2); if (distance >= 80 && distance <= 125) { const now = new Date(); const timeSpinning = (now - inductionStartTime) / 1000; if (timeSpinning > 0.1) { inductionStartTime = now; inductionSpinningTime += timeSpinning; if (inductionSpinningTime >= inductionSpeedThreshold) { inductionIsGeneratingElectricity = true; inductionMessage.textContent = "Bravo ! Tu génères de l'électricité !"; inductionCoil.style.backgroundColor = 'yellow'; if (!inductionIsInZone) { inductionIsInZone = true; inductionCurrentSpins++; if (inductionCurrentSpins >= inductionSpinsNeeded) { endGame(true); } } } } } else { inductionIsInZone = false; } } }); inductionPlayground.addEventListener('mouseup', () => { inductionDragging = false; }); function startCountdown() { inductionTimer = setInterval(() => { if (inductionTimeLeft > 0) { inductionTimeLeft--; inductionTimeLeftDisplay.textContent = inductionTimeLeft; } else { clearInterval(inductionTimer); endGame(false); } }, 1000); } function endGame(victory) { if (inductionGameOver) return; inductionGameOver = true; clearInterval(inductionTimer); const inductionAnimation = document.getElementById('inductionAnimation'); inductionAnimation.textContent = victory ? "Victoire !" : "Défaite !"; inductionAnimation.style.display = 'flex'; let countdown = 5; const countdownInterval = setInterval(() => { inductionAnimation.textContent = `${victory ? "Victoire !" : "Défaite !"} Retour vers la carte dans ${countdown} secondes...`; countdown--; if (countdown < 0) { clearInterval(countdownInterval); inductionAnimation.style.display = 'none'; // Transition vers la carte if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } else { window.location.href = "carte.html"; // Redirection vers la carte } } }, 1000); } </script> </body> </html> <img src="Induction électromagnétique/jeu-induction.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Générateur Pixii - Jeu d'Électricité</title> <style> /* Styles généraux */ body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; background-color: #f7f7f7; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; height: 100vh; overflow: hidden; } #container { text-align: center; max-width: 500px; width: 100%; } /* Nouvelle jauge avec design */ #jauge { width: 350px; /* Largeur totale de la jauge */ height: 25px; /* Hauteur de la jauge */ border-radius: 30px; background-color: #e0e0e0; /* Couleur de fond de la jauge */ margin-bottom: 30px; box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; border: 2px solid #cccccc; /* Bordure fine pour mieux voir la limite */ } #remplissage { height: 100%; width: 0%; /* Commence vide */ background: linear-gradient(90deg, #38ef7d, #11998e); /* Dégradé vert */ transition: width 0.2s ease-out; position: absolute; left: 0; top: 0; } /* Texte explicatif */ #instruction { font-size: 18px; font-weight: 500; color: #333; margin-bottom: 20px; } /* Message de victoire */ #bravoMessage { font-size: 24px; font-weight: 600; color: #28a745; display: none; margin-top: 20px; } /* Flash jaunes qui apparaissent partout */ .flash { position: absolute; width: 50px; height: 50px; border-radius: 50%; background-color: yellow; opacity: 0; animation: flashAnimation 1s ease-out forwards; } @keyframes flashAnimation { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(0); } } /* Effet de vibration */ @keyframes vibration { 0% { transform: translate(0, 0); } 25% { transform: translate(-5px, 5px); } 50% { transform: translate(5px, -5px); } 75% { transform: translate(-5px, -5px); } 100% { transform: translate(0, 0); } } .vibration { animation: vibration 0.1s ease-in-out; } /* Transition finale */ #transitionScreen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; display: none; justify-content: center; align-items: center; font-size: 2em; z-index: 100; } </style> </head> <body> <div id="container"> <!-- Texte explicatif --> <div id="instruction"> Faites défiler la molette pour générer de l'électricité ! </div> <!-- Nouvelle jauge --> <div id="jauge"> <div id="remplissage"></div> </div> <!-- Message de victoire --> <div id="bravoMessage"> Félicitations ! Vous avez généré de l'électricité ! </div> <!-- Écran de transition --> <div id="transitionScreen"> <div id="transitionText">Bravo ! Retour vers la carte dans <span id="countdown">5</span> secondes...</div> </div> </div> <script> // Script pour le jeu d'électricité (function () { const jauge = document.getElementById("remplissage"); const bravoMessage = document.getElementById("bravoMessage"); const transitionScreen = document.getElementById("transitionScreen"); const countdownElement = document.getElementById("countdown"); const body = document.body; let pourcentage = 0; let startTime = null; // Durée cible pour remplir la jauge (en secondes) const durationInSeconds = 12; // Durée totale pour ralentir const durationInMilliseconds = durationInSeconds * 1000; // Fonction pour générer des flashes jaunes function generateFlash() { const flash = document.createElement("div"); flash.classList.add("flash"); document.body.appendChild(flash); // Position aléatoire du flash flash.style.top = `${Math.random() * 100}vh`; flash.style.left = `${Math.random() * 100}vw`; // Enlève le flash après l'animation setTimeout(() => flash.remove(), 1000); } // Fonction pour ajouter un effet de vibration function vibrationScreen() { body.classList.add("vibration"); setTimeout(() => body.classList.remove("vibration"), 100); // Retire l'effet après 0.1s } // Fonction pour calculer le pourcentage de la jauge function calculerPourcentage(scrollDelta, currentTime) { let timeProgress = Math.min(currentTime / durationInMilliseconds, 1); let increment = Math.abs(scrollDelta) * 0.02; // Facteur plus petit pour ralentir return Math.min(pourcentage + increment * timeProgress, 100); } // Détection du défilement de la molette window.addEventListener("wheel", function (e) { if (pourcentage >= 100) return; // Si la jauge est pleine, ignorer let scrollDelta = e.deltaY; // Sens de la molette e.preventDefault(); if (startTime === null) startTime = new Date().getTime(); let currentTime = new Date().getTime() - startTime; pourcentage = calculerPourcentage(scrollDelta, currentTime); jauge.style.width = pourcentage + "%"; generateFlash(); vibrationScreen(); if (pourcentage >= 100) { bravoMessage.style.display = "block"; startTransition(); } }); // Fonction pour démarrer la transition function startTransition() { transitionScreen.style.display = "flex"; let countdown = 5; const interval = setInterval(() => { countdown--; countdownElement.textContent = countdown; if (countdown <= 0) { clearInterval(interval); if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); } else { window.location.href = "https://votre-carte-url.com"; } } }, 1000); } })(); </script> </body> </html>
<html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <title>Jeu de la Tension Linéaire</title> <style> /* Style global */ body { font-family: 'Arial', sans-serif; text-align: center; background-color: #eef6ff; margin: 0; overflow: hidden; } /* Conteneur principal */ .container { position: absolute; width: 90vw; /* Largeur relative à l'écran */ max-width: 30vw; /* Limite la largeur */ max-height: 85vh; /* Empêche le dépassement vertical */ padding: 2vh; /* Espacement interne dynamique */ border-radius: 1vw; /* Coins arrondis proportionnels */ box-shadow: 0 0.5vw 1vw rgba(0, 0, 0, 0.2); background-color: #ffffff; top: 7vh; /* Position ajustée en haut */ left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: space-between; /* Répartition équilibrée des éléments */ } /* Bouton */ button { font-size: 1.5vw; /* Taille du texte proportionnelle */ padding: 1vh 2vw; /* Espacement interne dynamique */ margin-top: 2vh; margin-bottom: 1vh; /* Garde de l'espace pour le bas */ color: white; background-color: #1d72b8; border: none; border-radius: 1vw; cursor: pointer; transition: background-color 0.3s; } button:hover { background-color: #145a96; } /* Titre */ h1 { font-size: 3vw; color: #0b3954; margin-bottom: 2vh; } /* Échelle linéaire */ .linear-dial { position: relative; width: 100%; height: 5vh; /* Hauteur ajustée */ margin: 2vh 0; background: linear-gradient(to right, #ff4500, #ffa500, #ffd700, #98fb98, #32cd32); border-radius: 2vw; } /* Aiguille */ .needle { position: absolute; width: 0.3vw; height: 7vh; background: red; top: -1vh; transition: left 0.1s linear; } /* Marqueurs */ .marker { position: absolute; font-size: 1.2vw; color: #333; top: 4.5vh; text-align: center; transform: translateX(-50%); } /* Informations de mission */ .mission-info { font-size: 1.5vw; color: #2b7a78; padding: 1vh; border-radius: 1vw; background-color: #def2f1; } /* Résultat */ .result { font-size: 1.5vw; margin-top: 2vh; font-weight: bold; } /* Bouton */ button { font-size: 1.5vw; /* Taille du texte proportionnelle */ padding: 1% 2%; /* Espacement interne */ margin-top: 2%; /* Espacement supérieur */ color: white; background-color: #1d72b8; border: none; border-radius: 1%; /* Coins arrondis */ cursor: pointer; transition: background-color 0.3s; margin-bottom: 1%; /* Assure que le bouton reste visible */ } button:hover { background-color: #145a96; } /* Écran de transition */ .transition-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); color: white; display: none; justify-content: center; align-items: center; font-size: 3vw; /* Taille proportionnelle */ z-index: 100; } </style> </head> <body> <div class="container"> <h1>Jeu de la Tension Linéaire</h1> <p class="mission-info">🔋 Tension Cible : <span id="tensionCible">0</span> V</p> <div class="linear-dial"> <div class="needle" id="needle"></div> <!-- Marqueurs de tension linéairement espacés --> <div class="marker" style="left: 0%;">0V</div> <div class="marker" style="left: 20%;">100V</div> <div class="marker" style="left: 40%;">200V</div> <div class="marker" style="left: 60%;">300V</div> <div class="marker" style="left: 80%;">400V</div> <div class="marker" style="left: 100%;">500V</div> </div> <button onclick="stopNeedle()">Stopper l'Aiguille</button> <div class="result" id="resultat"></div> </div> <!-- Transition écran --> <div class="transition-screen" id="transitionScreen"> <p>Bravo ! Transition vers la suite dans <span id="countdown">5</span> secondes...</p> </div> <script> let tensionCible = 0; let position = 0; let speed = 1; // Vitesse de déplacement (ajustable pour le défi) let direction = 1; // 1 pour droite, -1 pour gauche let intervalId; // Générer une nouvelle cible function nouvelleMission() { tensionCible = Math.floor(Math.random() * 500); // tension cible entre 0V et 500V document.getElementById("tensionCible").textContent = tensionCible; document.getElementById("resultat").textContent = ""; position = 0; // Réinitialise l'aiguille direction = 1; moveNeedle(); } // Fonction pour déplacer l'aiguille function moveNeedle() { const needle = document.getElementById("needle"); clearInterval(intervalId); intervalId = setInterval(() => { // Changer de direction aux extrémités if (position >= 100) direction = -1; if (position <= 0) direction = 1; // Mettre à jour la position position += direction * speed; needle.style.left = `${position}%`; }, 20); // Vitesse de mise à jour } // Calcul de la tension en fonction de la position function calculateTensionFromPosition() { return Math.round((position / 100) * 500); // Extrapoler à une tension entre 0V et 500V } // Arrêter l'aiguille et vérifier le résultat function stopNeedle() { clearInterval(intervalId); const tension = calculateTensionFromPosition(); const resultatDiv = document.getElementById("resultat"); resultatDiv.innerHTML = `Tension arrêtée : ${tension} V`; // Vérifier si l'utilisateur a réussi avec une marge de ±20V if (Math.abs(tension - tensionCible) <= 20) { resultatDiv.innerHTML += "<br><span style='color: green;'>Bravo ! Tu as réussi la mission !</span>"; showTransition(); // Afficher la transition en cas de succès } else { resultatDiv.innerHTML += "<br><span style='color: red;'>Mission échouée. Nouvelle mission en cours...</span>"; setTimeout(nouvelleMission, 2000); // Relance automatique après 2 secondes } } // Transition vers un autre passage en cas de victoire function showTransition() { const transitionScreen = document.getElementById("transitionScreen"); const countdownElement = document.getElementById("countdown"); transitionScreen.style.display = "flex"; let countdown = 5; const interval = setInterval(() => { countdown--; countdownElement.textContent = countdown; if (countdown <= 0) { clearInterval(interval); // Redirection ou transition vers un autre passage if (typeof SugarCube !== "undefined" && SugarCube.Engine) { SugarCube.Engine.play("Transition"); // Nom du passage suivant } else { window.location.href = "https://votre-carte-suivante.com"; // URL ou action pour un autre passage } } }, 1000); } // Initialiser la première mission nouvelleMission(); </script> </body> </html> <img src="Image Transformateur/T1.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;">
<div class="video-container"> <video id="maVideo" controls autoplay> <source src="ouverture.mp4" type="video/mp4"> Ton navigateur ne supporte pas les vidéos HTML5. </video> </div> <<timed 9s>> <<goto "Transition">> <</timed>>
<<audio "Régles" play>> <img src="ImageOuverture.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;"> <div class="text-box"> <div style="text-align: center;"> Bienvenue jeune aventurier. Tu t'apprêtes à voyager à travers le temps pour rendre visite à de célèbres scientifiques ayant révolutionné le monde de l’électricité. Tu vas te retrouver sur une carte virtuelle où la première invention qui est la bouteille de Leyde sera disponible. A toi de jouer et de découvrir quel est ce fantastique objet. Une fois avoir fini de découvrir cette première invention, la suivante apparaîtra sur la carte et ainsi de suite jusqu'à la dernière. Plus tu auras découvert d’invention, plus ton score augmentera pour te permettre de devenir le scientifique ultime. A toi de jouer. <div style="font-size: 30px;"> [["Jouer"|Video_ouverture]] </div> </div> </div> </div>
<img src="ImageTransition.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;"> <div class="text-box"> <div style="text-align: center;"> Bienvenue jeune aventurier. Tu t'apprêtes à voyager à travers le temps pour rendre visite à de célèbres scientifiques ayant révolutionné le monde de l’électricité. Tu vas te retrouver sur une carte virtuelle où la première invention qui est la bouteille de Leyde sera disponible. A toi de jouer et de découvrir quel est ce fantastique objet. Une fois avoir fini de découvrir cette première invention, la suivante apparaîtra sur la carte et ainsi de suite jusqu'à la dernière. Plus tu auras découvert d’invention, plus ton score augmentera pour te permettre de devenir le scientifique ultime. A toi de jouer. <div style="font-size: 30px;"> <<timed 34s>>[["Jouer"|Transition]]<</timed>> </div> </div> </div> </div> <<audio "Régles" play>>
[[Carte|Transition]] <<set $Atelier_de_Morse to "true">> <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $scene to "Atelier de Morse">> <<set $person1 to "Petit Électron">> <<set $person2 to "Samuel Morse">> <<if $visitedTelegraph and $visitedNotes and $visitedTools>> <<set $person2 to "Samuel Morse">> <div class="text-box"> <<if visited() == 1>> <<type 55ms skipkey "Control">> Vous entendez une voix derrière vous. Un homme, avec un sourire bienveillant, s’approche. <<print $person2>> : « Ah, je vois que tu es curieux ! Bienvenue dans mon atelier. Je suis Samuel Morse. Permets-moi de te montrer comment fonctionne ce télégraphe. » [[Assister à la démonstration->Démonstration Morse]] <</type>> <<else>> <<audio "V10" play>> Vous entendez une voix derrière vous. Un homme, avec un sourire bienveillant, s’approche. <<print $person2>> : « Ah, je vois que tu es curieux ! Bienvenue dans mon atelier. Je suis Samuel Morse. Permets-moi de te montrer comment fonctionne ce télégraphe. » [[Assister à la démonstration->Démonstration Morse]] <</if>> </div> <<else>> <div class="text-box"> <<if visited() == 1>><<type 55ms skipkey "Control">><<audio "V1" play>>Vous entrez dans une pièce chaleureuse, baignée d'une lumière douce venant d'une fenêtre aux carreaux anciens. L'ambiance est calme, à peine troublée par le crépitement d'un poêle dans un coin. Une table centrale attire votre attention, avec une machine étrange et des câbles qui serpentent sur le sol. Autour de vous, des croquis et des outils parsèment l'espace. <<if not $visitedTelegraph>>[[Examiner la machine télégraphique->Examiner Télégraphe]]<<audio "V1" stop>><</if>> <<if not $visitedNotes>> [[Lire les notes manuscrites->Examiner Notes]]<</if>> <<if not $visitedTools>> [[Regarder les outils->Examiner Outils]]<</if>> <</type>> <<else>> Vous entrez dans une pièce chaleureuse, baignée d'une lumière douce venant d'une fenêtre aux carreaux anciens. L'ambiance est calme, à peine troublée par le crépitement d'un poêle dans un coin. Une table centrale attire votre attention, avec une machine étrange et des câbles qui serpentent sur le sol. Autour de vous, des croquis et des outils parsèment l'espace. <<if not $visitedTelegraph>>[[Examiner la machine télégraphique->Examiner Télégraphe]]<</if>> <<if not $visitedNotes>> [[Lire les notes manuscrites->Examiner Notes]]<</if>> <<if not $visitedTools>> [[Regarder les outils->Examiner Outils]]<</if>><</if>></div> <</if>> <!-- Marqueur pour scroller --> <div id="passageEnd"></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<set $scene = "Démonstration Morse">> <<set $person1 = "Petit Électron">> <<set $person2 = "Samuel Morse">> <<audio "V1" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V5" play>><<print $person2>> se place devant la machine et tapote doucement sur une clé télégraphique. [[Continuer->Dialogue 2]]<</type>></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<set $visitedTelegraph to true>> <<set $person1 to "Petit Électron">> <<audio "V1" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<print $person1>><<audio "V2" play>> saute joyeusement devant la machine. « Voilà le fameux télégraphe de Morse ! Avec lui, on peut envoyer des messages à travers des fils, même très loin. Pas mal, hein ? » [[Retour->Atelier de Morse]]<</type>></div> <img src="Image_telegraphe/tele2.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<set $visitedNotes to true>> <<set $person1 to "Petit Électron">> <<audio "V1" stop>> <div class="text-box"><<type 55ms skipkey "Control">>Vous examinez des notes griffonnées à la plume. Les mots décrivent un 'code Morse' qui semble transformer des lettres en points et traits. [[Retour->Atelier de Morse]]<</type>></div> <<audio "V3" play>> <img src="Image_telegraphe/tele3.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<set $visitedTools to true>> <<set $person1 to "Petit Électron">> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V4" play>>Vous découvrez une série d'outils soigneusement rangés. Une clé, un tournevis, et d'autres objets vous laissent imaginer le travail minutieux nécessaire à la création de cette invention. [[Retour->Atelier de Morse]]<</type>></div> <img src="Image_telegraphe/tele4.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V5" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V6" play>><<print $person2>> : « Ce que tu vois ici, c'est un télégraphe. Il peut envoyer des signaux électriques à travers des fils. Grâce au code Morse que j’ai inventé, chaque lettre correspond à une série de points et de traits. » [[Continuer->Dialogue 3]]<</type>></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V6" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V7" play>><<print $person1>> : « Incroyable ! Vous pouvez donc parler à quelqu’un qui est très loin juste avec ça ? » [[Continuer->Dialogue 4]]<</type>></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V7" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V8" play>><<print $person2>> : « Exactement. Par exemple, voici un message d'urgence : S.O.S. Je tapote trois points, trois traits, puis trois points. Et voilà ! » [[Continuer->Dialogue 5]]<</type>></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V8" stop>> <div class="text-box"><<type 55ms skipkey "Control">><<audio "V9" play>>Voulez-vous essayer ?<br> [[Essayer le télégraphe->Mini-jeu Morse]] [[Retour->Atelier de Morse]]<</type>></div> <img src="Image_telegraphe/tele1.jpg" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<div>Électron : Voici la table de conversion Morse. Compose un message, puis regarde-le voyager à travers les fils électriques ! Une fois que tu as terminé, reviens à l'atelier : [[Retour à la carte->Transition]]</div> <iframe src="mini-jeu-morse.html" style="top: 1%; width: 100%; height: 100vh; object-fit: cover; z-index: -1;"></iframe>
[["Carte"|Transition]] <<if visited() is 1>> <<set $compteur to $compteur + 1>> <</if>> <<set $person1 to "Petit Électron">> <<set $person2 to "Alexander Graham Bell">> <<audio "V11" play>> <div class="text-box"><<type 55ms skipkey "Control">>\Bienvenue dans le laboratoire de Alexander Graham Bell, l'un des plus grands scientifiques de son époque. Tu aperçois une étrange machine qui te rappelle un peu le télégraphe, mais assez différente quand même. Mr Bell te remarque et t'invite à t'approcher. [["Bonjour, M. Bell ! Que faites-vous ?"|Salutation11]]<</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V11" stop>> <<audio "V12" play>> <div class="text-box"><<type 55ms skipkey "Control">>\<<print $person1>> : "Bonjour, M. Bell ! Que faites-vous avec cette machine étrange ? On dirait une boîte avec un fil qui en sort." <<print $person2>> (souriant) : "Bonjour, Électron ! Tu arrives à un moment historique. Je suis en train de tester une nouvelle invention qui va permettre aux gens de parler à distance, en temps réel. C'est ce qu'on appelle un téléphone." [[Parler à distance ? Mais comment est-ce possible avec seulement des fils ?|Explication2]]<</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V12" stop>> <<audio "V13" play>> <div class="text-box"><<type 30ms skipkey "Control">><<print $person1>> (intrigué) : "Parler à distance ? Mais comment est-ce possible avec seulement des fils ?" <<print $person2>> (expliquant) : "Lorsque nous parlons, notre voix crée des vibrations dans l'air. Ici, dans cette machine, un microphone transforme ces vibrations en signaux électriques. Ces signaux voyagent à travers le fil jusqu'à l'autre bout, où ils sont reconvertis en sons." [[Voir une démonstration|Demonstration2]] <</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V13" stop>> <<audio "V14" play>> <div class="text-box"><<type 30ms skipkey "Control">><<print $person1>> (émerveillé) : "Donc, vous transformez la voix en électricité et la transportez à travers des fils ? Ça semble incroyable !" <<print $person2>> (enthousiaste) : "Exactement ! Je vais te montrer. J'ai une personne à l'autre bout de cette ligne téléphonique, prête à te parler." Bell parle dans le téléphone : "Monsieur Watson, venez ici. J’ai besoin de vous." Une voix lointaine répond depuis l'autre bout du fil. [[C’est incroyable ! Vous avez entendu la voix de quelqu'un très loin !|ReactionBell]]<</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V14" stop>> <<audio "V15" play>> <div class="text-box"><<type 30ms skipkey "Control">><<print $person1>> (stupéfait) : "C’est incroyable ! Vous avez entendu la voix de quelqu'un très loin, presque comme s'il était à côté de vous !" <<print $person2>> (modeste) : "Oui, et c’est une invention qui pourrait changer la manière dont les gens communiquent à jamais. Imagine un monde où tu pourrais parler à quelqu'un de l'autre côté du pays sans quitter ta maison." [[Le futur est fascinant !|Fin11]]<</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<audio "V15" stop>> <<audio "V16" play>> <div class="text-box"><<type 30ms skipkey "Control">><<print $person1>> (enthousiaste) : "Le futur est vraiment fascinant ! Vous rendez possible des choses que je n'aurais jamais imaginées !" <<print $person2>> : "Merci, Électron. J'espère que cette invention rapprochera les gens, peu importe la distance." [["Carte"|Transition]] <</type>></div> <img src="Image_telephone/tele1.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <<audio "fond" loop volume 0.2>>
<<set $Electron_passage to "true">> <!-- Ajout de l'audio pour l'électron --> <audio id="electron-audio1" preload="auto"> <source src="Audios Leyde/Electron_Leyde.mp3" type="audio/mpeg"> Votre navigateur ne prend pas en charge l'audio. </audio> <!-- Image de fond --> <img src="Images Leyde/Leyde_3_bis.webp" style=" position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1;"> <!-- Image de l'électron --> <div id="electron-image" style=" position: absolute; top: 10%; left: 50%; transform: translateX(-50%); width: 200px;"> <img src="Electron.png" style="width: 100%;" alt="Électron"> </div> <!-- Texte et dialogues --> <div id="text-box" class="text-box" style=" position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); width: 80%; background-color: rgba(255, 255, 255, 0.9); padding: 20px; border-radius: 15px; font-size: 1.2em; color: black; z-index: 2; box-sizing: border-box;"> <<type 40ms>>\ **Électron** : "Hey ! Alors? Amusant nan? La bouteille de Leyde fonctionne comme un condensateur. Elle stocke l’électricité entre la surface intérieure et extérieure de la bouteille, séparées par le verre. Une fois qu’il y a assez de charge, PAF ! Elle se libère d’un coup. Amusant, non ?" <</type>> <br><br> [[Carte|Transition]] </div> <!-- Script pour déclencher la lecture de l'audio --> <script> const electronAudio1 = document.getElementById('electron-audio1'); // Tenter de jouer l'audio après une interaction utilisateur document.body.addEventListener('click', () => { electronAudio1.play().catch(error => { console.error("Impossible de lire l'audio :", error); }); }); // Essayer de jouer l'audio après le chargement (si possible) window.onload = () => { electronAudio.play().catch(error => { console.warn("Lecture automatique bloquée. Nécessite une interaction."); }); }; </script> <<audio "fond" loop volume 0.1>>