siuygfsfs

2026-05-16 09:07:01 +00:00 · 2023-12-08 07:51:37 +01:00
parent 4968c7049e
commit 21da715c91
20 changed files with 73 additions and 9 deletions
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="./style/styleDDR.css">
+    <link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet">
+    <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico" />
+    <title>Green Green Revolution</title>
+  </head>
+  <body>
+    <span id="modalOverlay">
+      <div id="startGameModal" class="modalMessage">
+        <h3>Green Green Revolution !</h3>
+        <p>Ce jeu est une reproduction du classique DDR.</p>
+        <p>Utiliser les touches directionnelles ou D, F, J et K pour jouer. Vous pouvez aussi pause/resume, restart, et mute/unmute la musique en cliquant sur les icônes à droite du canvas.</p>
+        <button id="redirectButton">Continuer</button>
+      </div>
+      <div id="endGameModal" class="modalMessage">
+        <h3>Merci d'avoir jouer !</h3>
+        <button id="playAgainButton">Rejouer</button>
+      </div>
+    </span>
+
+    <div class="title">Green Green Revolution</div>
+    <section class="canvasArea">
+      <div class="links">
+        <a href="https://github.com/joniboy74prog/nuitdelinfo"><img src="./assets/github.png"></a>
+      </div>
+      <div class="controls">
+        <img id="muteIcon" src="./assets/sound.png">
+        <img id="pauseIcon" src="./assets/pause.png">
+        <img id="restartIcon" src="./assets/restart.png">
+      </div>
+      <div id="score">Score: 0</div>
+      <div class="combo">
+        <p id="comboCount"></p>
+        <span id="comboText">combo</span>
+      </div>
+      <canvas id="ttrCanvas" width="450" height="680"></canvas>
+    </section>
+    <div id="directions">
+      <h4>Comment jouer</h4>
+      <ul>
+        <li>Utiliser les touches directionnelles ou D, F, J et K pour jouer.</li>
+        <li>Essayer d'appuyer sur les bonnes touches lorsque les flèches bougeantes chevauchent les flèches statiques.</li>
+        <li>Un compteur montre le combo actuel.</li>
+        <li>Plus le combo est haut, plus vous obtiendez de points !</li>
+      </ul>
+      <button id="playButton">Jouer</button>
+    </div>
+    <div class="arrowImages">
+      <img id="left" src="./assets/staticLeft.png">
+      <img id="down" src="./assets/staticDown.png">
+      <img id="up" src="./assets/staticUp.png">
+      <img id="right" src="./assets/staticRight.png">
+    </div>
+    <audio id="mainSong" src="./assets/electroSportRock.mp3"></audio>
+    <audio id="endApplause" src="./assets/applause.mp3"></audio>
+  </body>
+  <script src="./src/arrowSprites.js" type="text/javascript"></script>
+  <script src="./src/scriptDDR.js" type="text/javascript"></script>
+</html>
@@ -8,6 +8,8 @@
    <link rel="stylesheet" href="style/init.css">
    <link rel="stylesheet" href="style/navbarHorizontal.css">
    <link rel="stylesheet" href="style/main.css">
+
+    <script src="./src/konami.js" type="text/javascript" defer></script>
 </head>
 <body id="accueil">

@@ -26,15 +28,15 @@
 </header>

 <main>
-        <h1>Sauvons la planète,</h1>
-        <h2>distinguons la réalité<br>des idées reçues.</h2>
-        <p id="sous-pres">
-            Défiez les idées reçues sur l'écologie avec notre quiz captivant !
-            </br>
-            Testez-vous dès maintenant pour une expérience éducative et
-            amusante.
-        </p>
-        <button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
+    <h1>Sauvons la planète,</h1>
+    <h2>distinguons la réalité<br>des idées reçues.</h2>
+    <p id="sous-pres">
+        Défiez les idées reçues sur l'écologie avec notre quiz captivant !
+        </br>
+        Testez-vous dès maintenant pour une expérience éducative et
+        amusante.
+    </p>
+    <button id="btnjouer"><a href="./jouer.html">Essayer ce jeu</a></button>
 </main>