Pirogue d'Antalaha - jeu de vanille (p5.js)

README.md · 3.5 Ko

# Pirogue d'Antalaha (p5.js, niveau avancé)

## Cas d'usage
Un jeu d'arcade pour téléphone et ordinateur. Une pirogue à balancier (dessinée entièrement en code)
descend la rivière : elle ramasse des **gousses de vanille** (la dorée vaut 5 points) et évite les
**rochers** et les **vagues**. Trois vies, difficulté qui monte avec le temps, meilleur score gardé.

Contrôles : flèches ou Q / D au clavier ; glisser le doigt sur l'écran ; M pour couper le son.

## Arborescence
```
p5-jeu-pirogue/
├── index.html        Page : titre, boîte du canevas, aide, chargement des scripts dans l'ordre
├── site.json         Titre, description, mots-clés pour le portail
├── README.md         Ce fichier
├── css/
│   └── style.css     Mise en page mobile ; touch-action: none sur le canevas
├── medias/           Sons libres de droits (clic, piece, succes, erreur, victoire) en .wav
└── js/
    ├── config.js     Toutes les constantes réglables (vitesses, vies, couleurs, difficulté)
    ├── outils.js     collisionRect() et Stockage (localStorage avec repli en mémoire)
    ├── sons.js       Classe GestionnaireSons : new Audio() après le premier appui
    ├── particules.js Classe Particule : éclaboussures, étincelles, texte flottant
    ├── fond.js       Classe Fond : parallaxe à 4 couches, image d'eau via createGraphics
    ├── pirogue.js    Classe Pirogue : déplacement, inclinaison, dessin, boîte de collision
    ├── gousse.js     Classe Gousse : vanille normale ou dorée
    ├── obstacle.js   Classe Obstacle : rocher ou vague
    ├── jeu.js        Classe Jeu : machine à états, apparitions, collisions, score, interface
    └── sketch.js     setup(), draw(), clavier, souris, doigt, windowResized()
```
Ordre de chargement : p5.min.js -> config -> outils -> sons -> particules -> fond -> pirogue -> gousse -> obstacle -> jeu -> sketch.

## Notions abordées
- Programmation orientée objet : `class`, `constructor`, méthodes, propriétés, méthodes `static`
- Un fichier par classe et ordre de chargement des scripts
- Machine à états (menu / jeu / fin)
- Temps : `deltaTime`, déplacement = vitesse x durée, bornage du pas de temps
- Difficulté progressive avec `lerp()` et `constrain()`
- Collisions rectangulaires (AABB), invulnérabilité temporaire, clignotement
- Système de particules ; secousse d'écran
- Parallaxe, `createGraphics()`, modulo (`%`) pour un défilement infini
- Dessin vectoriel : `bezierVertex()`, `beginShape()`, `arc()`, `push()`/`pop()`/`translate()`/`rotate()`/`scale()`
- Monde logique 360 x 640 et canevas adaptatif (`scale()`, `windowResized()`, `resizeCanvas()`)
- Entrées : `keyIsDown()`, `keyPressed()`, `mousePressed()`, `touchStarted()`, `touches`
- Sons avec `new Audio()` après une action de l'utilisateur
- Sauvegarde du record avec `try/catch` : `localStorage` est interdit dans le bac à sable du portail, le code se rabat sur la mémoire
- `describe()` et texte alternatif pour l'accessibilité

## Idées d'exercices
1. Changer le nombre de vies ou la vitesse maximale dans `config.js`.
2. Ajouter un bonus « coeur » qui rend une vie.
3. Ajouter un état `PAUSE` (touche P).
4. Ajouter un obstacle mobile : un poisson qui traverse.
5. Ajouter une 2e couche de nuages ou de reflets dans `fond.js`.
6. Ajouter un son ambiant de vagues en boucle (fichier `vagues.wav` de la médiathèque).
7. Afficher un tableau des 5 meilleurs scores (en mémoire).
8. Faire varier le décor selon l'heure (voir le site « Horloge d'Antalaha »).