IPB

Bienvenue invité ( Connexion | Inscription )

> qui peut m'aider à tester un jeu ?
Options
frankie00
posté 5 May 2023, 15:28
Message #1


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 2 013
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... sad.gifs
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 !“
Go to the top of the page
 
+Quote Post
 
 Start new topic
Réponse(s)
scoch
posté 11 Jun 2023, 11:54
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 939
Inscrit : 1 Jul 2010
Membre no 156 073
Le code que j’ai posté hier, c’est pour t’aider à comprendre les nuances entre les événements de souris et tactiles.
Le 'click' fonctionne par défaut sur mobile. Par contre 'mousemove', comme son nom l’indique, est propre à la souris ; il faut donc aussi utiliser 'touchmove'.

Pour adapter ton code au tactile, il suffit de quelques modifications.

Mais avant tout, corriger l’erreur qui est mentionnée dans la console (que tu affiches dans les outils de développement du navigateur) :
tu ajoutes et enlèves un observateur d’événement lié à une fonction « deplacerSinge » que tu n’as pas créée… erreur donc.
Le singe se déplace avec cette partie de ton code :

Code
document.addEventListener("mousemove", function(e) {
    // suite du code
});


Tu lies l’événement à une fonction anonyme au lieu de le lier à la fonction « deplacerSinge ».
Commence par modifier ceci et tu n’auras plus cette erreur, et la suppresion de l’observateur d’événement pourra fonctionner :

Code
document.addEventListener("mousemove", deplacerSinge);


Et placer le code de déplacement du singe dans la fonction « deplacerSinge » :

Code
function deplacerSinge(e) {
    var x = e.clientX;
    var singe = document.getElementById("singe");
    singe.style.left = x + "px";
    singe.style.top = "830px";

    detecterCollision();
}


Maintenant, tu peux adapter au tactile.

1. Enlever l’observateur d’événement 'mousemove'

Là où tu mets :
Code
// Désactiver l'écouteur d'événements de la souris
document.removeEventListener("mousemove", deplacerSinge);


Tu dois ajouter :
Code
// Désactiver l'écouteur d'événements du doigt
document.removeEventListener("touchmove", deplacerSinge);


2. Idem pour l’ajout de l’observateur d’événement 'mousemove'

Là où tu mets :
Code
// Réactiver l'écouteur d'événements de la souris
document.addEventListener("mousemove", deplacerSinge);


Tu dois ajouter :
Code
// Réactiver l'écouteur d'événements du doigt
document.addEventListener("touchmove", deplacerSinge);


3. Là où tu mets (code corrigé ci-dessus) :

Code
document.addEventListener("mousemove", deplacerSinge);


Tu dois ajouter :

Code
document.addEventListener("touchmove", deplacerSinge);


4. Il reste à modifier la fonction « deplacerSinge » :

Code
function deplacerSinge(e) {
    var singe = document.getElementById("singe");

    // éviter le comportement par défaut (scroll sur mobile)
    e.stopImmediatePropagation();

    let x = 0;
    // touch ou pas
    if(e.changedTouches === undefined) {
        x = e.clientX;
    } else {
        x = e.changedTouches[0].clientX;
    }
    
    singe.style.left = x + "px";
    singe.style.top = "830px";

    detecterCollision();
}


Le problème qui reste c’est que tu positionnes en y le singe à 830px. Quand j’ai testé pour la première fois, ma fenêtre n’était pas assez haute pour afficher le singe… Tu devrais le positionner de façon « dynamique », par exemple, à 200 px du bas de la fenêtre :

Code
// remplacer
singe.style.top = "830px";
// par
singe.style.top = window.innerHeight - 200 + 'px';


Enfin, une autre erreur est signalée dans la console : tu lances la lecture du fichier audio sans interaction de l’utilisateur (ce n’est plus autorisé). Il faudrait donc que tu lances la boucle sur les bananes (bananes.forEach…) une fois que la touche Esc a été appuyée (ou qu’un bouton serait clické) et que le jeu démarre. Et dans ce cas, il faut donc aussi appliquer les animations des bananes une fois que le jeu a été démarré (donc l’appliquer en JavaScript et pas directement en CSS, ou mettre en pause en CSS puis lancer la lecture en JavaScript.

Par exemple, dans CSS, ajoute à
Code
.banane { animation-play-state: paused; }


Et puis définir un événement pour démarrer le jeu avec une fonction associée. Par exemple, un click sur un bouton pour appeler une fonction « demarrerJeu » :

Code
monBoutonDemarrer.addEventListener('click', demarrerJeu);

function demarrerJeu() {
    // ici la boucle forEach des bananes

    // ici démarrer l’animation CSS de chaque banane
    bananes.forEach(function(banane) {
        banane.style.animationPlayState = 'running';
    });
}



Aussi, pourquoi afficher le lecteur audio ? Enlève donc l’attribut 'controls' sur ton premier élément audio.

En espérant que ça t’aidera à démarrer sur une bonne base.

Ce message a été modifié par scoch - 11 Jun 2023, 11:57.


--------------------
L'homme n'est que poussière... c'est dire l'importance du plumeau ! Alexandre Vialatte
Go to the top of the page
 
+Quote Post

Les messages de ce sujet
- frankie00   qui peut m'aider à tester un jeu ?   5 May 2023, 15:28
- - hellomorld   Une copie d'écran de ce que ça donne sous Sa...   5 May 2023, 19:32
|- - frankie00   Citation (hellomorld @ 5 May 2023, 20:32)...   6 May 2023, 07:35
- - hellomorld   Avec Firefox, le jeu fonctionne apparemment correc...   6 May 2023, 08:25
- - frankie00   Merci donc ça confirme ce que je pensais : il y a...   6 May 2023, 09:15
- - hellomorld   Dans les sources, on voit que Safari n'est pas...   6 May 2023, 18:54
|- - frankie00   Citation (hellomorld @ 6 May 2023, 19:54)...   6 May 2023, 22:03
- - frankie00   Voilà un lien et vous lancez le fichier html dans...   8 May 2023, 16:00
- - frankie00   =============================== voici l'animat...   1 Jun 2023, 19:56
- - scoch   Salut, la première idée d’évolution que je ...   3 Jun 2023, 11:54
- - frankie00   Oui salut tu as raison il faudrait le développer...   4 Jun 2023, 07:51
- - scoch   Puisque tu n’as pas de smartphone ou tablette, t...   10 Jun 2023, 14:23
|- - baron   Citation (scoch @ 10 Jun 2023, 15:23) Pui...   10 Jun 2023, 18:30
- - frankie00   Merci scotch c'est vraiment très aimable à t...   10 Jun 2023, 17:50
- - frankie00   Je connaissais pas cette option sur le menu dével...   11 Jun 2023, 07:01
- - scoch   Le code que j’ai posté hier, c’est pour t’a...   11 Jun 2023, 11:54
- - frankie00   Merci j'ai effectué quelques corrections dont...   11 Jun 2023, 15:35
- - scoch   Concernant ta remarque sur le changement d’orien...   11 Jun 2023, 17:53
- - scoch   Ton système de détection de collision a un probl...   11 Jun 2023, 23:19
- - frankie00   Dis donc tu es fort en programmation scoch!...   13 Jun 2023, 06:36
- - scoch   Ah ah, non, je ne suis pas fort en JavaScript, jus...   13 Jun 2023, 14:02
- - frankie00   J'ai fait de la programmation orientée objet,...   13 Jun 2023, 17:04
- - scoch   La programmation orientée objet en JavaScript est...   14 Jun 2023, 10:47
- - frankie00   J'ai programmé un jeu très simple où un sin...   16 Jul 2023, 09:10
- - frankie00   Si vous voulez tester le jeu il est ici https://ww...   14 Sep 2023, 07:05
- - Anibé   Salut ! J'avoue que je ne suis plus trop ...   14 Sep 2023, 11:14
- - frankie00   Citation (Anibé @ 14 Sep 2023, 12:14) Sa...   14 Sep 2023, 12:04

« Sujets plus anciens · Les Langages Du Web · Sujets plus récents »
 

Reply to this topicStart new topic
2 utilisateur(s) sur ce sujet (2 invité(s) et 0 utilisateur(s) anonyme(s))
0 membre(s) :

 

Modes d'affichage: Passer au mode : Standard · Passer au mode : Linéaire+ · Arborescent

Suivre ce sujet · Envoyer ce sujet · Imprimer ce sujet · S'abonner à ce forum

Nous sommes le : 1st August 2025 - 05:52
Powered By IP.Board 2.3.6 © 2025  IPS, Inc.