Somewhat working tutorial

index.html

@@ -34,13 +34,13 @@
             </div>
             <div>
                 <canvas id="canvas" width="800" height="400"></canvas>
-                <div class="text-bubble">
+                <div id="tutorial-speech-bubble" class="text-bubble">
                     <div class="dialog">
                         <div class="left-point">
                         </div>
                         <div class="left-point shifted">
                         </div>
-                        <p class="speech">Coucou</p>
+                        <p id="tutorial-box" class="speech"></p>
                     </div>
                 </div>
             </div>

modules/fillLevelsSelection.mjs

@@ -1,5 +1,6 @@
 import { levelsBlueprint } from '/modules/levels.mjs'
 import { generatePlayground } from '/modules/playground.mjs'
+import { Timer } from '/modules/timer.mjs'
 
 export const fillLevelsSelection = (gameState, ctx) => {
   let levelList = document.getElementById('level-list');
@@ -8,9 +9,11 @@ export const fillLevelsSelection = (gameState, ctx) => {
     let selectionButton = document.createElement("button");
     selectionButton.setAttribute("array-index", i);
     selectionButton.addEventListener("click", (click) => {
-      gameState.playground = generatePlayground(levelsBlueprint[
+      let blueprint = levelsBlueprint[
         click.srcElement.getAttribute("array-index")
-      ], canvas.width, canvas.height);
+      ];
+      gameState.playground = generatePlayground(blueprint.structure, canvas.width, canvas.height);
+      gameState.timer = new Timer(blueprint.time, gameState.timer.expireFunction);
       gameState.playground.draw(ctx, gameState.width, gameState.height);
     });
     selectionButton.innerText = "Level" + i;

modules/levels.mjs

@@ -2,13 +2,15 @@ import { Square } from '/modules/enums.mjs';
 
 // Blueprint for the first level
 //
-const level1Blueprint = [[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
+const level1Blueprint = {
-                                [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
+  structure:[[ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
-                                [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]];
+            [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ],
-
+            [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]],
-
+  time: 3000,
+};
 // Blueprint for the second level
-const level2Blueprint = [
+const level2Blueprint = {
+  structure: [
     [Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Floor, Square.Floor ],
     [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall],
     [Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Wall],
@@ -19,7 +21,9 @@ const level2Blueprint = [
     [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Wall ],
     [Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Floor, Square.Wall ],
     [Square.Floor, Square.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ],
-  ];
+  ],
+  time: 23000,
+};
 
 export const levelsBlueprint = [
   level1Blueprint,

modules/timer.mjs

@@ -1,6 +1,7 @@
 export class Timer {
   constructor(time, expireFunction) {
     self.time = time;
+    self.expireFunction = expireFunction;
     self.timerElement = document.getElementById('timer');
     self.pauseButton1 = document.getElementById('pause-1');
     self.pauseButton2 = document.getElementById('pause-2');
@@ -34,7 +35,7 @@ export class Timer {
         let timeStr = String(self.time).padStart(5, '0');
         self.timerElement.innerHTML = "Time : " + timeStr.slice(0, 3) + '.' + timeStr.slice(3);
         if (self.time == 0) {
-          expireFunction();
+          self.expireFunction();
           clearInterval(self.intervalControler);
           self.timeRunning = false;
         }

modules/tutorialControler.mjs

@@ -0,0 +1,31 @@
+export class TutorialControler {
+  static messages = [
+      "V'là le Jérome avec son tracteur.\nFaut vit qu'il les mettes sous l'toit avant que ça pleuve.",
+      "Je m'suis dit : \"Faudrait que je d'mandes que tu lui y fasse\"",
+      "Pi tant qu'à faire, c'pas dur. T'as qu'à appuyer sur les flèches",
+      "Ben qu'est qu't'attends ? Vas y!",
+    ];
+
+  constructor() {
+    self.finished = false;
+    self.messageBox = document.getElementById('tutorial-box');
+    self.messageId = 0;
+    self.messageBox.innerHTML = TutorialControler.messages[self.messageId];
+  }
+
+  next() {
+    if (!self.finished) {
+      self.messageId++;
+      if (self.messageId == TutorialControler.messages.length) {
+        document.getElementById('tutorial-speech-bubble').style.visibility = "hidden";
+        self.finished = true;
+      } else {
+        self.messageBox.innerHTML = TutorialControler.messages[self.messageId];
+      }
+    }
+  }
+
+  isFinished() {
+    return self.finished;
+  }
+}

script.js

@@ -3,108 +3,53 @@ import { levelsBlueprint } from '/modules/levels.mjs'
 import { MoveDirection } from '/modules/enums.mjs'
 import { fillLevelsSelection } from '/modules/fillLevelsSelection.mjs'
 import { Timer } from '/modules/timer.mjs'
+import { TutorialControler } from '/modules/tutorialControler.mjs'
 
 let canvas = document.getElementById('canvas');
 let ctx = canvas.getContext('2d');
 let gameState = {
-  playground: generatePlayground(levelsBlueprint[0], canvas.width, canvas.height),
+  playground: generatePlayground(levelsBlueprint[0].structure, canvas.width, canvas.height),
   width: canvas.width,
   height: canvas.height,
   timer: new Timer(1500, () => {
     alert("Les vaches mangent le foin");
   }),
+  playable: false,
 };
-// console.log(gameState.timer);
+
+let tutorial = new TutorialControler();
 
 fillLevelsSelection(gameState, ctx);
 window.ctx = ctx
-let playground = generatePlayground(levelsBlueprint[0], canvas.width, canvas.height);
 window.addEventListener("keydown", (event) => {
   if (!event.defaultPrevented) {
-    switch (event.key) {
+    if (gameState.playable) {
-      case "ArrowDown":
+      switch (event.key) {
-        gameState.playground.move(MoveDirection.Down);
+        case "ArrowDown":
-        break;
+          gameState.playground.move(MoveDirection.Down);
-      case "ArrowUp":
+          break;
-        gameState.playground.move(MoveDirection.Up);
+        case "ArrowUp":
-        break;
+          gameState.playground.move(MoveDirection.Up);
-      case "ArrowRight":
+          break;
-        gameState.playground.move(MoveDirection.Right);
+        case "ArrowRight":
-        break;
+          gameState.playground.move(MoveDirection.Right);
-      case "ArrowLeft":
+          break;
-        gameState.playground.move(MoveDirection.Left);
+        case "ArrowLeft":
-        break;
+          gameState.playground.move(MoveDirection.Left);
-      default:
+          break;
-        return;
+        default:
-        break;
+          return;
-    }
+          break;
-    gameState.playground.draw(ctx, canvas.width, canvas.height);
+      }
-    if (gameState.playground.isSolved()) {
+      gameState.playground.draw(ctx, canvas.width, canvas.height);
-      alert("bravo");
+      if (gameState.playground.isSolved()) {
+        alert("bravo");
+      }
+    } else {
+      tutorial.next();
+      gameState.playable = tutorial.isFinished();
     }
   }
 });
 
-window.playground = gameState.playground;
+gameState.playground.draw(ctx);
-window.up = MoveDirection.Up;
-window.down = MoveDirection.Down;
-window.left = MoveDirection.Left;
-window.right = MoveDirection.Right;
-window.width = canvas.width;
-window.height = canvas.height;
-
-//function qui met à jour le temps
-
-// let Timer = {
-//   time: 10,
-//   intervalControler: setInterval(() => {
-//     console.log(Timer.time);
-//     let txt = document.getElementById('timer');
-//     let afficher = "Time : " + Timer.time;
-//     txt.innerHTML= afficher;
-//     if (Timer.time == 0) {
-//       alert("Termine");
-//     }
-
-//     Timer.time = Timer.time <= 0 ? 0 : Timer.time -1;
-//     if (Timer.time == 0)
-//     {
-//       clearInterval(Timer.intervalControler);
-//     }
-//   }, 1000),
-// };
-
-// let time = 10;
-
-// function timer(){
-//   let txt = document.getElementById('timer');
-//   let level = 0;
-//   let afficher = "Time : " + time;
-//   txt.innerHTML= afficher;
-
-//   time = time <= 0 ? 0 : time -1;
-//   if (time == 0)
-//   {
-//     clearInterval(maVar);
-//   }
-
-// }
-
-// let maVar = setInterval(timer, 1000);
-// if (time == 0){
-//   alert('Terminé YAsmine')
-// }
-// while (document.readyState != "complete") {
-function set_time(){
-  minutes=Math.floor
-}
-
-function Pause(){
-  // time = time -10;
-}
-
-// // while (document.readyState != "complete") {
-setTimeout(1000);
-
-
-playground.draw(ctx);