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

index.html · 2.8 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Pirogue d'Antalaha - jeu p5.js (niveau avancé)
  ============================================================
  Une pirogue à balancier ramasse des gousses de vanille et évite
  les rochers et les vagues. Clavier OU doigt.

  Cette page est volontairement courte : tout le jeu est dans
  les fichiers du dossier js/. Ordre de chargement (important) :
    p5.min.js -> config -> outils -> sons -> particules -> fond
    -> pirogue -> gousse -> obstacle -> jeu -> sketch
  Chaque fichier ne dépend que de ceux chargés AVANT lui
  (sketch.js, le dernier, assemble le tout).
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <title>Pirogue d'Antalaha</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Pirogue d'Antalaha</h1>
  </header>

  <main>
    <!-- Le canevas du jeu sera inséré ici par p5 (voir setup() dans js/sketch.js) -->
    <div id="conteneur-jeu" role="img"
         aria-label="Jeu : une pirogue à balancier glisse sur l'eau, ramasse des gousses de vanille et évite des rochers et des vagues. Se joue aux flèches du clavier, à Q et D, ou en glissant le doigt."></div>

    <section class="aide">
      <h2>Comment jouer</h2>
      <ul>
        <li><strong>Clavier</strong> : flèches gauche/droite, ou Q / D.</li>
        <li><strong>Téléphone</strong> : glisse le doigt sur le jeu.</li>
        <li>Ramasse les gousses de vanille (la dorée vaut 5 points).</li>
        <li>Évite les rochers et les vagues : tu as 3 vies.</li>
        <li>Touche M pour couper ou remettre le son.</li>
      </ul>
    </section>

    <noscript>
      <p class="avertissement">Ce jeu a besoin de JavaScript. Activez-le dans votre navigateur pour jouer.</p>
    </noscript>
  </main>

  <footer>
    <p>Code ouvert : chaque classe du jeu a son fichier dans <code>js/</code>.</p>
  </footer>

  <script src="/libs/p5.min.js"></script>
  <script src="js/config.js"></script>      <!-- constantes réglables -->
  <script src="js/outils.js"></script>      <!-- collisions + stockage du record -->
  <script src="js/sons.js"></script>        <!-- gestion des sons (Audio) -->
  <script src="js/particules.js"></script>  <!-- classe Particule -->
  <script src="js/fond.js"></script>        <!-- classe Fond (parallaxe) -->
  <script src="js/pirogue.js"></script>     <!-- classe Pirogue -->
  <script src="js/gousse.js"></script>      <!-- classe Gousse -->
  <script src="js/obstacle.js"></script>    <!-- classe Obstacle -->
  <script src="js/jeu.js"></script>         <!-- classe Jeu (machine à états) -->
  <script src="js/sketch.js"></script>      <!-- setup(), draw(), entrées -->
</body>
</html>