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 : 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... 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é 10 Jun 2023, 14:23
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 851
Inscrit : 1 Jul 2010
Membre no 156 073
Puisque tu n’as pas de smartphone ou tablette, tu peux simuler les événements tactiles à partir des outils de développement du navigateur, en activant la simulation d’un appareil.
Sur les navigateurs Chromium (Google Chrome, Brave, etc) et Firefox : click droit > « Inspecter », dans les outils qui s’affichent « Toggle Device Toolbar » ou « Vue adaptative » (Firefox). Je ne suis pas chez moi, pas de Mac sous la main pour Safari.

Ci-dessous, différents codes pour les différentes étapes de gestion du tactile ou de la souris.
Je précise que je n’ai pas fait ça depuis longtemps, que j’improvise et que, pour la simplicité, je m’en tiens à du code classique (pas de fonctions fléchées etc). Quelqu’un·e passera peut-être pour corriger ou améliorer.

Étapes :
0. Créer un élément div pour mener les tests
1. Prendre connaissance de l’ordre de diffusion des événements
2. Éviter le comportement par défaut des événements (par ex. le 'click' sur tactile)
3. Récupérer les coordonnées de l’événement
4. Déplacer l’élément sous le pointeur (souris ou doigt)
5. Code complet (à optimiser)


0. Créer un élément div pour mener les tests

Code
document.addEventListener('DOMContentLoaded', function() {
    // créer un élément div pour tester
    creerElementDeTest();
});

function creerElementDeTest() {
    const div = document.createElement('div');
    div.setAttribute('id', 'machin');
    div.style.position = 'absolute';
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'orange';
    div.style.cursor = 'pointer';
    document.body.appendChild(div);
}


1. Prendre connaissance de l’ordre de diffusion des événements

Les navigateurs tactiles prennent en compte des événements de souris pour faire fonctionner les pages web qui ne sont codées que pour la souris.

On ajoute à l’élément des observateurs d’événement :

Code
document.addEventListener('DOMContentLoaded', function() {
    // créer un élément div pour tester
    creerElementDeTest();
    // lui ajouter des observateurs d’événement
    ajouterObservateursEvenement();
});

function ajouterObservateursEvenement() {
    const el = document.getElementById('machin');
    // entrée du pointer sur l’élément
    el.addEventListener('mouseenter', afficherEvenement, false);
    el.addEventListener('mouseover', afficherEvenement, false);
    // appui du pointer
    el.addEventListener('mousedown', afficherEvenement, false);
    el.addEventListener('touchstart', afficherEvenement, false);
    // relâchement du pointer
    el.addEventListener('mouseup', afficherEvenement, false);
    el.addEventListener('click', afficherEvenement, false);
    el.addEventListener('touchend', afficherEvenement, false);
    // sortie du pointer sur l’élément
    el.addEventListener('mouseleave', afficherEvenement, false);
    el.addEventListener('mouseout', afficherEvenement, false);
    el.addEventListener('touchcancel', afficherEvenement, false);
}

function afficherEvenement(evenement) {
    console.log(evenement.type);
}


2. Éviter le comportement par défaut (par ex. le 'click' sur tactile)

Code
function afficherEvenement(evenement) {
    // éviter le comportement par défaut
    evenement.preventDefault();
    console.log(evenement.type);
}


3. Récupérer les coordonnées de l’événement

Pour la souris : evenement.clientX et evenement.clientY.
Pour tactile, on prend le premier doigt : evenement.changedTouches[0].clientX et evenement.changedTouches[0].clientY.

On doit donc distinguer un événement de souris d’un événement tactile :

Code
function afficherEvenement(evenement) {
    // éviter le comportement par défaut
    evenement.preventDefault();
    // touch ou pas
    // il existe d’autres méthodes de détection
    if(evenement.changedTouches === undefined) {
        console.log('Pas touch', evenement.type);
        // coordonnées de l’événement
        console.log('x :', evenement.clientX, 'y :', evenement.clientY);
    } else {
        console.log('Touch', evenement.type);
        // coordonnées de l’événement (du premier pointer tactile)
        console.log('x :', evenement.changedTouches[0].clientX, 'y :', evenement.changedTouches[0].clientY);
    }
}


4. Déplacer l’élément sous le pointeur (souris ou doigt)

Certains événement ne nous intéressent pas dans cet exemple. On ne garde que les nécessaires dans la fonction d’ajout d’observateurs d’événement, et on crée deux fonctions associées « demarrer » et « arreter ».
Dans la fonction « démarrer » on démarre l’observation du déplacement du pointeur.
Dans la fonction « arreter » on arrête l’observation du déplacement du pointeur.

Code
function ajouterObservateursEvenement() {
    const el = document.getElementById('machin');
    // appui du pointer
    el.addEventListener('mousedown', demarrer, false);
    el.addEventListener('touchstart', demarrer, false);
    // relâchement ou sortie du pointer
    el.addEventListener('mouseup', arreter, false);
    el.addEventListener('mouseleave', arreter, false);
    el.addEventListener('touchend', arreter, false);
    el.addEventListener('touchcancel', arreter, false);
}

function demarrer(evenement) {
    console.log('demarrer', evenement.type);
    const el = document.getElementById('machin');
    // éviter le comportement par défaut
    evenement.preventDefault();
    // enlever l’observateur 'touchstart' pour éviter de prendre en compte un autre doigt qui entrerait en contact avec l’élément
    el.removeEventListener('touchstart', demarrer, false);
    // démarrer l’observation du déplacement du pointer
    window.addEventListener('mousemove', deplacer, false);
    window.addEventListener('touchmove', deplacer, false);
}

function arreter(evenement) {
    console.log('arreter', evenement.type);
    const el = document.getElementById('machin');
    // éviter le comportement par défaut
    evenement.preventDefault();
    // ajouter à nouveau l’observateur 'touchstart'
    el.addEventListener('touchstart', demarrer, false);
    // enlever l’observation du déplacement du pointer
    window.removeEventListener('mousemove', deplacer, false);
    window.removeEventListener('touchmove', deplacer, false);
}

function deplacer(evenement) {
    // éviter que l’événement soit observé aussi pour le défilement (scroll) de la fenêtre
    evenement.stopImmediatePropagation();
    // largeur et hauteur de l’élément pour contraindre son déplacement à la zone d’affichage (viewport = fenêtre)
    const largeur = 100;
    const hauteur = 100;
    // demi largeur et demi hauteur de l’élément pour pouvoir le centrer sous le pointeur
    const demiLargeur = largeur * .5;  
    const demiHauteur = hauteur * .5;
    let posX = 0;
    let posY = 0;
    console.log('deplacer', evenement.type);
    // touch ou pas
    // il existe d’autres méthodes de détection
    if(evenement.changedTouches === undefined) {
        console.log('Pas touch', evenement.type);
        // coordonnées de l’événement
        console.log('x :', evenement.clientX, 'y :', evenement.clientY);
        // définir les positions x et y
        posX = evenement.clientX - demiLargeur;
        posY = evenement.clientY - demiHauteur;
    } else {
        console.log('Touch', evenement.type);
        // coordonnées de l’événement (du premier pointer tactile)
        console.log('x :', evenement.changedTouches[0].clientX, 'y :', evenement.changedTouches[0].clientY);
        // définir les positions x et y
        posX = evenement.changedTouches[0].clientX - demiLargeur;
        posY = evenement.changedTouches[0].clientY - demiHauteur;
    }
    // ajustements pour contraindre le déplacement à la zone de la fenêtre
    if(posX < 0) { posX = 0 }
    else if(posX > (window.innerWidth - largeur)) { posX = window.innerWidth - largeur }
    if(posY < 0) { posY = 0 }
    else if(posY > (window.innerHeight - hauteur)) { posY = window.innerHeight - hauteur }
    console.log('posX :', posX, 'posY :', posY);
    // déplacer l’élément
    const el = document.getElementById('machin');
    el.style.left = posX + 'px';
    el.style.top = posY + 'px';
}


5. Code complet (à optimiser)

Code
document.addEventListener('DOMContentLoaded', function() {
    // créer un élément div pour tester
    creerElementDeTest();
    // lui ajouter des observateurs d’événement
    ajouterObservateursEvenement();
});

function creerElementDeTest() {
    const div = document.createElement('div');
    div.setAttribute('id', 'machin');
    div.style.position = 'absolute';
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.backgroundColor = 'orange';
    div.style.cursor = 'pointer';
    document.body.appendChild(div);
}

function ajouterObservateursEvenement() {
    const el = document.getElementById('machin');
    // appui du pointer
    el.addEventListener('mousedown', demarrer, false);
    el.addEventListener('touchstart', demarrer, false);
    // relâchement ou sortie du pointer
    el.addEventListener('mouseup', arreter, false);
    el.addEventListener('mouseleave', arreter, false);
    el.addEventListener('touchend', arreter, false);
    el.addEventListener('touchcancel', arreter, false);
}

function demarrer(evenement) {
    console.log('demarrer', evenement.type);
    const el = document.getElementById('machin');
    // éviter le comportement par défaut
    evenement.preventDefault();
    // enlever l’observateur 'touchstart' pour éviter de prendre en compte un autre doigt qui entrerait en contact avec l’élément
    el.removeEventListener('touchstart', demarrer, false);
    // démarrer l’observation du déplacement du pointer
    window.addEventListener('mousemove', deplacer, false);
    window.addEventListener('touchmove', deplacer, false);
}

function arreter(evenement) {
    console.log('arreter', evenement.type);
    const el = document.getElementById('machin');
    // éviter le comportement par défaut
    evenement.preventDefault();
    // ajouter à nouveau l’observateur 'touchstart'
    el.addEventListener('touchstart', demarrer, false);
    // enlever l’observation du déplacement du pointer
    window.removeEventListener('mousemove', deplacer, false);
    window.removeEventListener('touchmove', deplacer, false);
}

function deplacer(evenement) {
    // éviter que l’événement soit observé aussi pour le défilement (scroll) de la fenêtre
    evenement.stopImmediatePropagation();
    // largeur et hauteur de l’élément pour contraindre son déplacement à la zone d’affichage (viewport = fenêtre)
    const largeur = 100;
    const hauteur = 100;
    // demi largeur et demi hauteur de l’élément pour pouvoir le centrer sous le pointeur
    const demiLargeur = largeur * .5;  
    const demiHauteur = hauteur * .5;
    let posX = 0;
    let posY = 0;
    console.log('deplacer', evenement.type);
    // touch ou pas
    // il existe d’autres méthodes de détection
    if(evenement.changedTouches === undefined) {
        console.log('Pas touch', evenement.type);
        // coordonnées de l’événement
        console.log('x :', evenement.clientX, 'y :', evenement.clientY);
        // définir les positions x et y
        posX = evenement.clientX - demiLargeur;
        posY = evenement.clientY - demiHauteur;
    } else {
        console.log('Touch', evenement.type);
        // coordonnées de l’événement (du premier pointer tactile)
        console.log('x :', evenement.changedTouches[0].clientX, 'y :', evenement.changedTouches[0].clientY);
        // définir les positions x et y
        posX = evenement.changedTouches[0].clientX - demiLargeur;
        posY = evenement.changedTouches[0].clientY - demiHauteur;
    }
    // ajustements pour contraindre le déplacement à la zone de la fenêtre
    if(posX < 0) { posX = 0 }
    else if(posX > (window.innerWidth - largeur)) { posX = window.innerWidth - largeur }
    if(posY < 0) { posY = 0 }
    else if(posY > (window.innerHeight - hauteur)) { posY = window.innerHeight - hauteur }
    console.log('posX :', posX, 'posY :', posY);
    // déplacer l’élément
    const el = document.getElementById('machin');
    el.style.left = posX + 'px';
    el.style.top = posY + 'px';
}


Edit : typo

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


--------------------
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
1 utilisateur(s) sur ce sujet (1 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 : 2nd June 2024 - 18:36
Powered By IP.Board 2.3.6 © 2024  IPS, Inc.