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, 23:19
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 939
Inscrit : 1 Jul 2010
Membre no 156 073
Ton système de détection de collision a un problème, ton score s’incrémente à toute vitesse. C’est ce qui t’as aussi posé des problèmes de lecture de l’audio, semble-t-il.
Le plus simple : en cas de collision, supprimer la banane. Tu ne l’as sans doute pas fait parce que tu ne sais pas supprimer ou créer des éléments.

Voici le code complet du scénario que j’ai présenté dans le post précédent.
Il faut réunir toutes les images et l’audio dans un dossier « assets ».
J’ai commenté pas mal le code.

Les nouvelles notions pour toi au niveau du code :

créer un élément et l’insérer dans un élément parent :
Code
// créer un élément div
const truc = document.createElement('div');
// éventuellement lui ajouter un attribut
truc.setAttribute('id', 'truc');
// éventuellement lui ajouter une classe CSS
truc.classList.add('ma-classe');
// éventuellement des observateurs d’événement
truc.addEventListener('evenement', fonction);
// puis l’insérer dans un élément qui devient son parent
unElement.appendChild(truc);


supprimer un élément :

Code
// supprimer l’élément
truc.parentNode.removeChild(truc);


générer un nombre aléatoire avec Math.random() qui retourne un nombre compris entre 0 et 1 :
Code
//compris entre 0 * 8 et 1 * 8
let n = Math.random() * 8;


HTML
<!doctype html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Titre UNIQUE du document</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,
*:before,
*:after {
box-sizing: border-box;
}

body {
margin: 0;
line-height: 1.5;
height: 100vh;
overflow: hidden;
font-family: 'Comic Sans MS', 'Comic Sans', 'Chalkboard SE', 'Comic Neue', sans-serif;
}

/* -----------------------------------------------------------
ÉCRAN D’ACCUEIL
----------------------------------------------------------- */

#ecran-accueil {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color: orange;
}

@keyframes animChargement {
to {
opacity: .2;
}
}

#bloc-chargement-ou-bouton {
opacity: 1;
animation: animChargement 1s infinite alternate;
}

#bloc-chargement-ou-bouton p,
#bouton-demarrer {
margin: 0;
padding: 1rem 3rem;
}

#bouton-demarrer {
appearance: none;
border: none;
border-radius: .5rem;
background-color: white;
color: black;
font-size: 100%;
line-height: 1;
cursor: pointer;
}

/* seulement pour les appareils dont le pointeur principal supporte le survol */
@media (hover: hover) {
#bouton-demarrer:hover {
background-color: black;
color: white;
}
}


/* on cache cet élément qui est là seulement pour précharger les ressources du jeu */
#ressources {
position: absolute;
top: -1px;
left: -1px;
width: 1px;
height: 1px;
overflow: hidden;
}




/* -----------------------------------------------------------
ÉCRAN DU JEU
----------------------------------------------------------- */
#ecran-jeu {
position: relative;
height: 100%;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-image: url(assets/Ort.gif);
/*cursor: none;*/
}

#score-conteneur {
position: relative;
z-index: 2;
padding-top: 1.5rem;
display: flex;
justify-content: center;
gap: 1.5rem;
align-items: center;
font-size: 2rem;
}

.label-score {
text-shadow: 1px 1px 0 white;
}

#banana-counter {
display: inline-block;
padding: 1rem;
border-radius: .5rem;
background-color: yellow;
}

#bouton-play-pause {
position: absolute;
z-index: 99;
top: 1.5rem;
right: 1.5rem;
appearance: none;
border: none;
padding: 1rem;
border-radius: .5rem;
background-color: white;
color: black;
font-size: 100%;
line-height: 1;
cursor: pointer;
}
/* seulement pour les appareils dont le pointeur principal supporte le survol */
@media (hover: hover) {
#bouton-play-pause:hover {
background-color: black;
color: white;
}
}

#singe {
position: absolute;
bottom: 15vh;
left: 50%;
width: 100px;
height: 100px;
background-image: url(assets/dessin_singe.png);
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}

/* Animer l'image de banane */
@keyframes tomber {
0% {
transform: translate(-50%, -10vh) rotate(0deg);
}

100% {
transform: translate(-50%, 100vh) rotate(360deg);
}
}

.banane {
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
top: 80px;
animation: tomber 3s linear infinite backwards;
transform-origin: center center;
background-image: url("assets/banane_reduit.png");
background-repeat: no-repeat;
background-size: contain;
}
</style>
</head>

<body>

<div id="ecran-accueil">
<h1>Titre du jeu</h1>
<div id="bloc-chargement-ou-bouton">
<p>Merci de patienter…</p>
</div>
<div id="instructions">
<p>Instructions…</p>
</div>
</div>

<!-- on cache en CSS cet élément qui est là seulement pour précharger les ressources du jeu -->
<div id="ressources">
<img src="assets/dessin_singe.png" alt="">
<img src="assets/banane_reduit.png" alt="">
<img src="assets/Ort.gif" alt="">
<audio src="assets/sf_ni.mp3" preload></audio>
</div>


<script>
/* -----------------------------------------------------------
VARIABLES GLOBALES
----------------------------------------------------------- */
// Compteur initial
let bananaCounter = 0;
let gamePaused = false;




/* -----------------------------------------------------------
CHARGEMENT DES RESSOURCES
----------------------------------------------------------- */
// chargement de toutes les ressources
window.addEventListener('load', function () {

// code
console.log('Ressources chargées');
// supprimer le message de chargement
const messageChargement = document.querySelector('#bloc-chargement-ou-bouton p');
messageChargement.parentNode.removeChild(messageChargement);
// créer et ajouter le bouton de démarrage
const bouton = document.createElement('button');
bouton.id = 'bouton-demarrer';
bouton.textContent = 'Démarrer';
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('bloc-chargement-ou-bouton').appendChild(bouton);

});// fin de window load





/* -----------------------------------------------------------
CRÉER L’ÉCRAN DU JEU
----------------------------------------------------------- */
function creerEcranJeu() {

console.log('creerEcranJeu');
// créer le conteneur #ecran-jeu
const ecranJeu = document.createElement('div');
ecranJeu.id = 'ecran-jeu';
// le score et son label
const scoreConteneur = document.createElement('div');
scoreConteneur.id = 'score-conteneur';
scoreConteneur.innerHTML = '<span class="label-score">Score : </span><span class="counter" id="banana-counter">0</span>';
ecranJeu.appendChild(scoreConteneur);
// le bouton play/pause
const boutonPlayPause = document.createElement('button');
boutonPlayPause.id = 'bouton-play-pause';
boutonPlayPause.textContent = 'Pause';
boutonPlayPause.addEventListener('click', function () {
playPauseJeu();
});
ecranJeu.appendChild(boutonPlayPause);
// barre Espace play/pause
window.addEventListener('keyup', function (e) {
if (e.keyCode === 32) {
playPauseJeu();
}
});
// le singe
const singe = document.createElement('div');
singe.id = 'singe';
ecranJeu.appendChild(singe);
// insérer l’écran du jeu
document.body.appendChild(ecranJeu);
// les bananes
const nombreBananes = 8;
for (let i = 0; i < nombreBananes; i++) {
creerBanane();
}
// tout y est : mettre en place l’interactivité
initialiserDeplacementDuSingeEtCollision();

}// fin de creerEcranJeu


function creerBanane() {

const delaiMax = 12;
const largeurBanane = 50;
const banane = document.createElement('div');
banane.classList.add('banane');
// délai d’animation aléatoire : entre 0 et 12 sec
banane.style.animationDelay = Math.random() * delaiMax + 's';
// positionnement aléatoire
const x = Math.random() * (window.innerWidth - largeurBanane);
banane.style.left = Math.floor((x / window.innerWidth) * 100) + '%';
// position aléatoire à chaque répétition de l’animation
banane.addEventListener('animationiteration', function () {
const x = Math.random() * window.innerWidth;
this.style.left = Math.floor((x / window.innerWidth) * 100) + '%';
});
document.getElementById('ecran-jeu').appendChild(banane);

}// fin de creerBanane





/* -----------------------------------------------------------
DÉPLACEMENT DU SINGE ET DÉTECTION DE COLLISION
----------------------------------------------------------- */
function initialiserDeplacementDuSingeEtCollision() {

document.addEventListener('mousemove', deplacerSinge);
document.addEventListener('touchmove', deplacerSinge);

}// fin de initialiserDeplacementDuSingeEtCollision

function deplacerSinge(e) {

const 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;
}
// on soustrait la moitié de la largeur du singe pour le centrer sous le pointeur
singe.style.left = x - 50 + 'px';

detecterCollision();

}// fin de deplacerSinge

function detecterCollision() {

const singe = document.getElementById('singe');
const bananes = [...document.querySelectorAll('.banane')];
// jeu en pause ?
if (gamePaused) {
return; // Sortir de la fonction si le jeu est en pause
}

bananes.forEach(function (banane) {
const rect1 = singe.getBoundingClientRect();
const rect2 = banane.getBoundingClientRect();
if (
rect1.left < rect2.left + rect2.width &&
rect1.left + rect1.width > rect2.left &&
rect1.top < rect2.top + rect2.height &&
rect1.top + rect1.height > rect2.top
) {
// le parent de la banane supprime son enfant banane
banane.parentNode.removeChild(banane);
// on en crée une nouvelle
creerBanane();

// le fichier audio
// on crée un élément audio
const audio = document.createElement('audio');
audio.setAttribute('src', 'assets/sf_ni.mp3');
// à la fin de la lecture, il se supprime
audio.addEventListener('ended', function (e) {
// le parent de l’audio supprime son enfant audio
// this est l’élément auquel on a ajouté l’observateur d’événement
this.parentNode.removeChild(this);
});
audio.play();
// on insère l’élément audio dans l’écran du jeu
document.getElementById('ecran-jeu').appendChild(audio);

console.log('collision');
// Incrémentation du compteur
bananaCounter++;
// Mise à jour de la valeur du compteur
document.getElementById('banana-counter').textContent = bananaCounter.toString();

}// fin de if collision

});// fin de bananes.forEach

}// fin de detecterCollision





/* -----------------------------------------------------------
PLAY / PAUSE DU JEU
----------------------------------------------------------- */
function playPauseJeu() {

const boutonPlayPause = document.getElementById('bouton-play-pause');
const bananes = [...document.querySelectorAll('.banane')];
if (gamePaused) {
gamePaused = false;
boutonPlayPause.textContent = 'Pause';
bananes.forEach(function (banane) {
banane.style.animationPlayState = 'running';
});
document.addEventListener('mousemove', deplacerSinge);
document.addEventListener('touchmove', deplacerSinge);
} else {
gamePaused = true;
boutonPlayPause.textContent = 'Play';
bananes.forEach(function (banane) {
banane.style.animationPlayState = 'paused';
});
document.removeEventListener('mousemove', deplacerSinge);
document.removeEventListener('touchmove', deplacerSinge);
}

}// fin de playPauseJeu
</script>
</body>

</html>
Raison de l'édition : Balises BBCode [HTML] plutôt que [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.