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, 17:53
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 939
Inscrit : 1 Jul 2010
Membre no 156 073
Concernant ta remarque sur le changement d’orientation portrait/paysage d’un smartphone ou d’une tablette, certaines choses se gèrent en CSS avec les media queries :

Code
@media screen and (orientation: portrait) {
    /* ici les règles spécifiques pour cette orientation */
}
@media screen and (orientation: landscape) {
    /* ici les règles spécifiques pour cette orientation */
}


Pour le reste, on surveille le redimensionnement de la fenêtre en JavaScript :

Code
window.addEventListener('resize', function() {
    // le code
});



Deux ou trois premières remarques :

L’animation de fond ne recouvre pas tout l’écran quand la fenêtre est plus haute que large notamment.

Dans CSS, modifie :
Code
.body {
    background-position: center;
    /* utiliser l’unité vh basée sur la hauteur du viewport (fenêtre) */
    height: 100vh;
}


Dans l’animation CSS des bananes, tu définis une hauteur « statique » (en pixel). Utilise plutôt l’unité vh (1vh = 1% de la hauteur de la fenêtre).

Code
@keyframes tomber {
    0% {
        transform: translate(-50%, -10vh) rotate(0deg);
    }
    100% {
        transform: translate(-50%, 100vh) rotate(360deg);
    }
}


Une idée en passant : si tu veux éviter que les bananes tombent toujours des mêmes endroits, tu pourrais mettre un peu d’aléatoire avec JavaScript (il faudrait observer l’animation CSS et modifier la position à chaque répétition de l’animation).

Code
const bananes = [...document.querySelectorAll('.banane')];
bananes.forEach(function(banane) {
    banane.addEventListener('animationiteration', function() {
        const x = Math.random() * window.innerWidth;
        this.style.left = Math.floor((x / window.innerWidth) * 100) + '%';
    });
});



Aussi, pour démarrer ou mettre en pause le jeu, ne pas utiliser seulement les touches Esc ou Espace car il n’y en a pas sur smartphone et tablette. Il faut donc des boutons, et éventuellement conserver les contrôles au clavier.

Enfin, tu as mis un élément audio par banane + un autre, et tu n’utilises que ce dernier.




Pour partir sur de bonnes bases, le scénario d’affichage de base serait :

1. Écran d’accueil (splash) qui pourrait afficher :
- le titre du jeu
- un bouton pour démarrer
- d’éventuelles consignes

Durant l’affichage de l’écran d’accueil, ce serait bien de surveiller le chargement de toutes les ressources (anim de fond, images, sons, typos…). Afficher donc un message « chargement en cours… », et quand tout est chargé, supprimer ce message et afficher le bouton de démarrage.

Code
window.addEventListener('load', function() {
    // toutes les ressources sont chargées
    // supprimer le message de chargement
    const messageChargement = document.getElementById('message-chargement');
    messageChargement.parentNode.removeChild(messageChargement);
    // créer et ajouter le bouton de démarrage
    const bouton = document.createElement('button');
    bouton.id = 'bouton-demarrer';
    bouton.addEventListener('click', function() {
        // supprimer l’écran d’accueil
        const ecranAccueil = document.getElementById('ecran-accueil');
        ecranAccueil.parentNode.removeChild(ecranAccueil);
        // créer l’écran du jeu…
        creerEcranJeu();
    });
    document.getElementById('ecran-accueil').appendChild(bouton);
});


2. Écran du jeu :
- une animation de fond
- un champ score et son label
- un bouton play/stop => basculer la propriété animation-play-state de 'paused' à 'running' sur les bananes
- un singe
- des bananes

Soit afficher l’écran du jeu qui serait codé en HTML avec CSS display: none; => display: block; ou mieux, générer ce contenu en JavaScript (il n’y a pas grand chose) :

- un div conteneur (l’écran du jeu)
- un div pour le score
- un div pour la légende du score (les grouper ?)
- un bouton
- un div #singe
- des div .banane

Code
function creerEcranJeu() {
    // le code
}



--------------------
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:46
Powered By IP.Board 2.3.6 © 2025  IPS, Inc.