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 957 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 !“ |
|
|
4 Jun 2023, 07:51
Message
#2
|
|
Macbidouilleur d'Or ! Groupe : Membres Messages : 1 957 Inscrit : 22 Dec 2011 Lieu : Paris Membre no 173 181 |
Oui salut
tu as raison il faudrait le développer pour smartphone et jouer dans le sens de la largeur qui est plus grande que la hauteur au niveau de l'écran. malheureusement je n'ai pas de smartphone donc je peux pas faire les tests et ça risque de compliquer pas mal la programmation. Mais tu as raison: il faudrait le développer pour portable -------------------- ¶ 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 : 2nd June 2024 - 18:57 |