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


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 5 016
Inscrit : 1 Jul 2010
Membre no 156 073
La programmation orientée objet en JavaScript est différente du modèle classique et surprend vraiment les développeurs qui passent de, par exemple, Java à JavaScript.
D’abord, pas de typage fort, ensuite, surprise !, une instance d’objet peut modifier le constructeur (classe) et toutes les instances héritent des modifications.
Les fonctions de la classe ne sont pas copiées directement dans l'objet, elles sont liées grâce à une chaîne de référence appelée chaîne prototype.
En 2015, a été introduit le mot-clé class (accompagné de extends, super, …) qui permet d’éviter de passer par la chaîne prototype mais sans ne rien changer à la « nature » de JavaScript, Mozilla qualifie cela de « sucre syntaxique ».

Pour du JavaScript avec typage fort, il faut se tourner vers le langage TypeScript.

Pour créer des animations avec JavaScript (et SVG par exemple), je te recommande la bibliothèque GSAP.

Si tu as vraiment envie de créer des jeux, regarde plutôt du côté de Unity (C#).


--------------------
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 : 4th November 2025 - 21:23
Powered By IP.Board 2.3.6 © 2025  IPS, Inc.