IPB

Bienvenue invité ( Connexion | Inscription )

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


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
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
hellomorld
posté 5 May 2023, 19:32
Message #2


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 148
Inscrit : 31 Oct 2003
Membre no 11 118




Une copie d'écran de ce que ça donne sous Safari (Ventura à jour) :
https://www.dropbox.com/s/4q1ld64h0behrew/C....36.27.jpg?dl=1

L'animation a été longue à charger.

Note : vu que tu utilises Dropbox pour les fichiers liés, tu peux aussi simplement y mettre ta page html, et en donner ici le lien.
Comme ça même si tu changes le code, le lien reste le même.


--------------------
Go to the top of the page
 
+Quote Post
frankie00
posté 6 May 2023, 07:35
Message #3


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Citation (hellomorld @ 5 May 2023, 20:32) *
Une copie d'écran de ce que ça donne sous Safari (Ventura à jour) :
https://www.dropbox.com/s/4q1ld64h0behrew/C....36.27.jpg?dl=1

L'animation a été longue à charger.

Note : vu que tu utilises Dropbox pour les fichiers liés, tu peux aussi simplement y mettre ta page html, et en donner ici le lien.
Comme ça même si tu changes le code, le lien reste le même.

Ce qui m'inquiète c'est que sur ta copie d'ecran on ne voit ni le singe ni les bananes qui tombent.
Normalement le singe se déplace tout en bas avec la souris et attrape les bananes qui tombent du haut.
Tu les as eues ?
Tu as essayé sur un autre navigateur comme Firefox ou Chrome de charger la page ?

Voici le lien du fichier animation
https://www.dropbox.com/s/tqzm3wragnbgl3k/banane.html?dl=0

P.S. sous Dropbox les fichiers sont longs à charger

Ce message a été modifié par frankie00 - 6 May 2023, 07:45.


--------------------
¶ 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
hellomorld
posté 6 May 2023, 08:25
Message #4


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 148
Inscrit : 31 Oct 2003
Membre no 11 118



Avec Firefox, le jeu fonctionne apparemment correctement, mais sous Safari en fait on ne voit pas les sprites bien qu'ils bougent (en les sélectionnant avec l'inspecteur web, on peut voir le bloc)
Fichier joint  Capture_d_____cran_2023_05_06____09.29.42.jpg ( 89.26 Ko ) Nombre de téléchargements : 23


--------------------
Go to the top of the page
 
+Quote Post
frankie00
posté 6 May 2023, 09:15
Message #5


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Merci donc ça confirme ce que je pensais : il y a un problème de programmation HTML sous safari.
Peut-être un problème de mise en cache que n'ont pas Chrome ou Firefox...
Soit il manque du code pour l'adapter à Safari, soit....
Tu entends le son "bip" quand le singe capte une banane ?
Quelle est ta version de safari et de OS, est-ce la plus récente ?

P.S. À la fin je ferai un dossier avec l'image de la banane et du singe comme ça les références ce sera en interne

Ce message a été modifié par frankie00 - 6 May 2023, 11:29.


--------------------
¶ 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
hellomorld
posté 6 May 2023, 18:54
Message #6


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 6 148
Inscrit : 31 Oct 2003
Membre no 11 118



Dans les sources, on voit que Safari n'est pas arrivé à récupérer les images de la banane et du singe.
J'ai modifié ton fichier pour les avoir en local, et ça marche !
Le problème vient donc du passage par dropbox.


--------------------
Go to the top of the page
 
+Quote Post
frankie00
posté 6 May 2023, 22:03
Message #7


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Citation (hellomorld @ 6 May 2023, 19:54) *
Dans les sources, on voit que Safari n'est pas arrivé à récupérer les images de la banane et du singe.
J'ai modifié ton fichier pour les avoir en local, et ça marche !
Le problème vient donc du passage par dropbox.

Merci beaucoup
c'est ce que je pensais mais je l'avais pas testé. Donc je proposerai à la fin un dossier avec les fichiers en local: comme ça ça marchera sur tous les navigateurs Safari compris.
Je me demande juste si je continue en faisant un jeu à plusieurs niveaux avec des bananes tombant irrégulièrement, comme de plus en plus vite, et un écriteau Game Over affichant un tableau avec des scores où on rentre son pseudo etc.
Là depuis cette version dont le lien est donné plus haut, il affiche le nombre de bananes attrapées et Game Over quand on appuie sur Escape pour arrêter: si vous avez des suggestions pour ce jeu, je suis tout à fait preneur
Ce sera un jeu pour mômes évidemment.

P.S. J'ai remplacé le lien url du singe et banane par un lien local et ça marche sur Safari, youpiie!

Ce message a été modifié par frankie00 - 7 May 2023, 07:01.


--------------------
¶ 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
frankie00
posté 8 May 2023, 16:00
Message #8


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Voilà un lien et vous lancez le fichier html dans un navigateur, n'importe lequel.
Vous appuyez sur Esc une fois le jeu démarre, une deuxième fois le jeu s'arrête.
Le singe se déplace avec la souris et doit attraper les bananes: vous vous en seriez doutés c'est une animation pour mômes.
Compliqué à programmer ce langage HTML, surtout au niveau javascript finalement...
Donc les améliorations seront pour plus tard! Je voulais faire des niveaux de jeu de + en + difficiles avec toute une progression mais c'est ardu.
Je vais poster une video décrivant le jeu
N'hésitez pas à faire commentaires et critiques

P.S. Si vous savez comment on arrive à arrêter puis faire reprendre une animation sous Javascript, n'hésitez pas à me le dire...
J'ai fini par trouver mais après moult essais: vraiment la programmation est une science expérimentale haha biggrin.gif .

Ce message a été modifié par frankie00 - 1 Jun 2023, 10:33.


--------------------
¶ 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
frankie00
posté 1 Jun 2023, 19:56
Message #9


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



===============================
voici l'animation enregistrée sur DropBox==>
https://www.dropbox.com/s/0w12ov0akfe709g/e..._croco.mov?dl=0


c'est mon premier projet en Javascript donc j'y connais pas grand chose.
À ce stade, trois options s'offrent à moi pour terminer l'animation.
1° L'interaction singe-croco est sans incidence sur le jeu: le singe et le crocodile peuvent se croiser mais s'ils se touchent, pas de pénalités. Ça reste purement ludique.
2° Chaque fois que le croco attrape le singe, le compteur redescend de 10 points... Et les crocos surgissent tous les 10 points chacun de son côté à tour de rôle.
Plus le joueur a de points, plus les crocos deviennent rapides à l'aller, plus lents au retour.
3° Quand le croco et le singe se rencontrent, soit le jeu est fini carrément en Game Over, soit si j'ai de l'énergie et du temps le singe a un crédit de mettons 3 ou 5 vies au départ et il en perdra une à chaque fois le croco l'attrape.
Mais déjà le programme est assez long: j'ai pas choisi la voie la plus simple pour programmer cela et je suis sûr qu'il en existe de + simple et + économique.

Il faut que ce soit ludique et assez simple, le public visé est disons de 6 à 12 ans.
Donc si vous avez des idées, pas trop compliquées à programmer...

Ce message a été modifié par frankie00 - 3 Jun 2023, 11:30.


--------------------
¶ 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
scoch
posté 3 Jun 2023, 11:54
Message #10


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Salut,

la première idée d’évolution que je vois serait d’adapter cela au tactile, que le jeu fonctionne sur smartphones, tablettes et écrans tactiles. Mais ça complique le code car le tactile est « multitouch ».

Il faudrait donc gérer l’éventualité d’un deuxième doigt (ou + si affinités smile.gif) qui entrerait en contact avec l’écran pendant qu’un autre doigt déplacerait le singe. J’ai développé en HTML/CSS/JS il y a quelques années un jeu éducatif pour une « table tactile » (un grand écran tactile à plat) et donc eu à gérer cette situation, notamment le cas d’une classe de très jeunes élèves autour de la table… Je n’ai plus le code que j’avais produit.


--------------------
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
frankie00
posté 4 Jun 2023, 07:51
Message #11


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Oui salut
tu as raison il faudrait le développer pour smartphone et jouer dans le sens de la largeur qui est plus grande que la hauteur au niveau de l'écran.
malheureusement je n'ai pas de smartphone donc je peux pas faire les tests et ça risque de compliquer pas mal la programmation.
Mais tu as raison: il faudrait le développer pour portable


--------------------
¶ 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
scoch
posté 10 Jun 2023, 14:23
Message #12


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
frankie00
posté 10 Jun 2023, 17:50
Message #13


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Merci scotch c'est vraiment très aimable à toi de mettre ton code à disposition.
Je suis en train de terminer la première phase et sans doute qu'après je ferai un essai.
Quand on conçoit et fabrique un jeu, il faut penser simple au début surtout si c'est pour enfants de - de 10 ans : après on peut toujours compliquer.

Ce message a été modifié par frankie00 - 10 Jun 2023, 17:52.


--------------------
¶ 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
baron
posté 10 Jun 2023, 18:30
Message #14


Macbidouilleur d'Or !
*****

Groupe : Modérateurs
Messages : 19 315
Inscrit : 22 Jul 2004
Lieu : Louvain-la-Neuve (Gaule Gelbique)
Membre no 21 291



Citation (scoch @ 10 Jun 2023, 15:23) *
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.

Avec Safari (et Monterey ici), il faut d'abord "activer le menu Développement dans la barre des menus" via les Préférences Safari > Avancées.
Ensuite, dans ce menu Développement, l'article "Passer en mode conception adaptative" (⌘^R) te permettra de simuler d'autres écrans et d'autres navigateurs.

Fichier joint  PNG50___Capture_d_____cran_2023_06_10____19.42.00.png ( 235.33 Ko ) Nombre de téléchargements : 3


Ce message a été modifié par baron - 10 Jun 2023, 18:44.
Raison de l'édition : Ajout capture d'écran


--------------------
MacBook Pro 14’’ 2021, M1 Pro, 16 Go/1 To – macOS  12.6 “Monterey”  MacBook Pro 15’’ mi-2010 Core i5 2,53 GHz, 8 Go/SSD Samsung 860EVO 1 To – Mac OSX 10.6.8  Power Macintosh G3 beige de bureau, rev.1 @ 233MHz, 288 Mo/4Go – MacOS 9.1 — + carte PCI IDE/ATA Tempo 66 Acard 6260 avec HD interne Maxtor 80 Go + graveur interne CDRW/DVD LG GCC-4520B + tablette A4 Wacom UD-0608-A + LaCie ElectronBlueIV 19" + HP ScanJet 6100C   B-Box 3 + HP LaserJet 4000 N  
La recherche dans MacBidouille vous paraît obscure ? J'ai rédigé une proposition de FAQ. Le moteur logiciel a un peu changé depuis mais ça peut aider quand même.
Les corsaires mettent en berne…
Go to the top of the page
 
+Quote Post
frankie00
posté 11 Jun 2023, 07:01
Message #15


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Je connaissais pas cette option sur le menu développement de Safari
merci baron


--------------------
¶ 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
scoch
posté 11 Jun 2023, 11:54
Message #16


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
frankie00
posté 11 Jun 2023, 15:35
Message #17


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Merci j'ai effectué quelques corrections dont celle de virer le lecteur audio et immobiliser les bananes au début.
Le singe est maintenant toujours sur la ligne du bas quelle que soit la hauteur de l'écran donc j'ai du corriger cela entre temps.
Par contre vu que le smartphone est plus haut que large, soit le contraire des écrans, il faudra que je tourne l'ensemble de 90° vers la gauche et ça je sais pas faire: mais je vais trouver.

Merci tes conseils me seront très utiles car comme tu vois je débute....


--------------------
¶ 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
scoch
posté 11 Jun 2023, 17:53
Message #18


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
scoch
posté 11 Jun 2023, 23:19
Message #19


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
frankie00
posté 13 Jun 2023, 06:36
Message #20


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Dis donc tu es fort en programmation scoch!! Tu as programmé des jeux ou autre chose en Javascript ?
J'ai tenu compte de toutes tes remarques et ai corrigé en fonction de ce que tu as dit
encore merci...


--------------------
¶ 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
scoch
posté 13 Jun 2023, 14:02
Message #21


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
Inscrit : 1 Jul 2010
Membre no 156 073



Ah ah, non, je ne suis pas fort en JavaScript, juste un peu expérimenté wink.gif
Dans le cas d’un vrai développement de jeu, il faudrait s’orienter vers de la Programmation Orientée Objet. Mais bon, tu peux déjà faire des trucs en n’utilisant que des fonctions, comme dans mon code ci-dessus.


--------------------
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
frankie00
posté 13 Jun 2023, 17:04
Message #22


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



J'ai fait de la programmation orientée objet, des langages de la famille des C++ et autres....
Le problème avec l'informatique c'est qu'il faut tout le temps se tenir au courant de tout et tout le temps se former à de nouveaux langages, ce qui finit par devenir épuisant.

et dans le monde du travail , ils recherchent des spécialistes sur un type de compétence bien précis et pas une autre.
Mais Javascript ça me va et une partie est orientée objet avec par exemple des sélecteurs enfants dans les CSS.
Je pensais que Javascript serait suffisant pour des animations et jeux pour enfants mais c'est pas si simple en fait.


--------------------
¶ 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
scoch
posté 14 Jun 2023, 10:47
Message #23


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 4 803
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
frankie00
posté 16 Jul 2023, 09:10
Message #24


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



J'ai programmé un jeu très simple où un singe doit attraper des bananes tombant des arbres et des crocodiles essaient de temps à autre lui piquer ses bananes.
Visuellement on m'a dit que c'était assez réussi et c'est une jeu purement ludique sans aucune violence bien entendu.
Je cherche les commentaires, critiques et remarques que pourraient faire des enfants de moins de 10 ans sur ce jeu.
Si vous avez des enfants de cette tranche d'âge, je vous l'envoie en MP

Ce message a été modifié par frankie00 - 16 Jul 2023, 09:12.
Fichier(s) joint(s)
Fichier joint  Capture_d___e__cran_2023_07_16_a___08.50.40.jpg ( 467.83 Ko ) Nombre de téléchargements : 12
 


--------------------
¶ 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
frankie00
posté 14 Sep 2023, 07:05
Message #25


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Si vous voulez tester le jeu il est ici
https://www.dropbox.com/scl/fi/o1nv2mqrua2e...wwqphe&dl=0


--------------------
¶ 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
Anibé
posté 14 Sep 2023, 11:14
Message #26


Macbidouilleur de vermeil !
****

Groupe : Membres
Messages : 1 021
Inscrit : 14 Jun 2005
Lieu : Saintes (17)
Membre no 40 909



Salut !
J'avoue que je ne suis plus trop amatrice de jeux sur ordinateurs, mais je trouve très poétique l'idée de crocodiles végétariens qui essaient de piquer les bananes du singe ! biggrin.gif
Bravo pour cette jolie idée ! wub.gif

Ce message a été modifié par Anibé - 14 Sep 2023, 11:15.


--------------------
Pourquoi MacIntosh ? Parce que !!! (depuis 1984)
Actuel : Mac Mini M1 2020 - Ventura 13.5.2 - Puce Apple M1 - Mémoire 8 Go
Mais toujours fidèle : Mac Mini - 10.6.8 (Snow Léo)
Membre du club des AIPBP (Anciens Inscrits Pas Beaucoup de Posts) Voir la règle d'éligibilité

Souvenir, souvenir : https://leboisdeshetres.zeblog.com/ ;-)
Go to the top of the page
 
+Quote Post
frankie00
posté 14 Sep 2023, 12:04
Message #27


Macbidouilleur d'Or !
*****

Groupe : Membres
Messages : 1 944
Inscrit : 22 Dec 2011
Lieu : Paris
Membre no 173 181



Citation (Anibé @ 14 Sep 2023, 12:14) *
Salut !
J'avoue que je ne suis plus trop amatrice de jeux sur ordinateurs, mais je trouve très poétique l'idée de crocodiles végétariens qui essaient de piquer les bananes du singe ! biggrin.gif
Bravo pour cette jolie idée ! wub.gif

Hé oui comme quoi les idées vegan peuvent diffuser aussi chez les animaux qui se mettent à respecter eux aussi la vie animale ohmy.gif


--------------------
¶ 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

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

 



Nous sommes le : 29th March 2024 - 07:13