qui peut m'aider à tester un jeu ? |
Bienvenue invité ( Connexion | Inscription )
qui peut m'aider à tester un jeu ? |
5 May 2023, 15:28
Message
#1
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 1 961 Inscrit : 22 Dec 2011 Lieu : Paris Membre no 173 181 |
Je commence une animation pour enfant et elle marche en HTML-javascript sous Chrome et Firefox.
Mais pas sur Safari... s Comme je suis sous Mojave et j'ai une version ancienne de Safari je voudrais savoir si quelqu'un peut simplement charger la page html ci-dessous sur safari -avec si possible le dernier OS et la version de Safari la plus récente!- et voir si ça fonctionne... ou pas Merci d'avance CODE <!DOCTYPE html> <html> <head> <style> #score-container { position: fixed; top: 0; left: 50%; transform: translateX(-50%); background-color: green; font-size: 24px; font-family: Comic Sans MS, sans-serif; text-align: center; padding: 10px; width: 150px; height: 50px; } .container { display: flex; justify-content: center; font-family: Comic Sans MS, sans-serif; align-items: center; height: 100vh; flex-direction: column; text-align: center; } h3 { margin-top: 0; font-size: 1.5em; border-top: 1px solid white; border-bottom: 1px solid white; border-left: 1px solid white; border-right: 1px solid white; } .counter { background-color: yellow; font-size: 36px; padding: 20px; border-radius: 20%; margin-top: 20px; } #bananes { position: absolute; height: 100vh; width: 100%; overflow: hidden; } /* Définir la taille du singe */ #singe { background-image: url("https://www.dropbox.com/s/g3ikhc6881f8q23/dessin_singe.png?dl=1"); background-repeat: no-repeat; background-size: contain; position: absolute; width: 100px; height: 100px; } body { cursor: none; background-image: url("https://i.gifer.com/Ort.gif"); background-repeat: no-repeat; background-size: cover; height: 100%; position: relative; margin: 0; padding: 0; overflow: hidden; } /* Animer l'image de banane */ @keyframes tomber { 0% { transform: translate(-50%, -100px) rotate(0deg); } 100% { transform: translate(-50%, 800px) rotate(360deg); } } /* Appliquer l'animation à l'image de banane */ .banane { position: absolute; width: 50px; height: 50px; top: 80px; animation: tomber 3s linear infinite; transform-origin: center center; background-image: url("https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=0"); background-repeat: no-repeat; background-size: contain; } #singe { position: fixed; bottom: 0px; left: 50%; transform: translateX(-50%); } </style> </head> <body> <p>Cliquez sur le bouton Play ci-dessous pour écouter le fichier audio :</p> <audio controls> <source src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1" type="audio/mpeg"> Votre navigateur ne supporte pas la lecture audio. </audio> <div id="score-container"> <h3>Score:</h3> <span class="counter" id="banana-counter">1</span> </div> <div id="banane"> <audio id="audio" src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div id="singe"></div> <div class="banana" style="left: 10%; animation-delay: 0s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 25%; animation-delay: 3s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 35%; animation-delay: 4.5s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 45%; animation-delay: 6.5s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 65%; animation-delay: 8s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 75%; animation-delay: 2.5s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 85%; animation-delay: 10.5s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> <div class="banane" style="left: 95%; animation-delay: 5.5s; background-image: url('https://www.dropbox.com/s/ktfl0wt7rlv7rul/banane_reduit.png?dl=1');"> <audio src="https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1"></audio> </div> </body> <script> // Créer un objet Audio pour charger et jouer le fichier audio var audio = new Audio('https://www.dropbox.com/s/4s7nm3vbf866s36/sf_ni.mp3?raw=1'); // Ajouter un événement de chargement pour l'objet Audio audio.addEventListener('loadeddata', function() { console.log('Audio chargé'); }); // Fonction pour jouer le fichier audio function jouerAudio() { if (audio.paused) { audio.currentTime = 0; audio.play(); } } // Appeler la fonction jouerAudio() lorsque le singe attrape une banane // Par exemple, vous pouvez ajouter un appel à la fonction jouerAudio() à la fin de la fonction tomber() qui anime la banane function tomber() { // ... jouerAudio(); // Appel à la fonction jouerAudio() pour jouer le fichier audio lorsque la banane est attrapée } // jouer le son const bananas = document.querySelectorAll('.banane'); bananas.forEach((banana) => { banana.addEventListener('animationend', () => { banana.querySelector('audio').play(); }); }); // Code JavaScript ici document.addEventListener("click", function(event) { if (event.target.classList.contains("banane")) { if (!audio.paused) { audio.pause(); } audio.currentTime = 0; audio.play(); } }); document.addEventListener("mousemove", function(e) { var x = e.clientX; var singe = document.getElementById("singe"); singe.style.left = x + "px"; singe.style.top = "830px"; detecterCollision(); }); function detecterCollision() { var singe = document.getElementById("singe"); var bananes = document.querySelectorAll(".banane"); bananes.forEach(function(banane) { var rect1 = singe.getBoundingClientRect(); var rect2 = banane.getBoundingClientRect(); if (rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x && rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y) { if (!audio.paused) { audio.pause(); } audio.currentTime = 0; audio.play(); } }); } </script> </html> Ce message a été modifié par frankie00 - 5 May 2023, 17:42. -------------------- ¶ Mon blog informatique est la Vague en Creux
¶ MacBook Pro de 2021 avec OS 14.4 Sonoma, 13 pouces, 16 Go de mémoire RAM, processeur M1, SSD de 500Go ¶ Autre MacBook Pro de 2015 avec OS 10.14.5 Mojave 15 pouces Retina, 16 Go de mémoire RAM, processeur quadri-core 2.5 GHz Intel Core , double carte graphique et SSD 512 Go ¶ Nous sommes 2 sur ce site: Jean Pass & Dem Eilleur qui vous saluons bien !“ |
|
|
Nous sommes le : 14th June 2024 - 13:32 |