diff --git a/index.html b/index.html index 4fe3733..49c7ba6 100644 --- a/index.html +++ b/index.html @@ -34,13 +34,13 @@
-
+
-

Coucou

+

diff --git a/modules/fillLevelsSelection.mjs b/modules/fillLevelsSelection.mjs index 399315c..4e72d7d 100644 --- a/modules/fillLevelsSelection.mjs +++ b/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; diff --git a/modules/levels.mjs b/modules/levels.mjs index c182b78..93317c0 100644 --- a/modules/levels.mjs +++ b/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 ], - [ Square.Wall, Square.Destination, Square.Box, Square.Floor, Square.Player, Square.Wall ], - [ Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall ]]; - - +const level1Blueprint = { + structure:[[ 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, diff --git a/modules/timer.mjs b/modules/timer.mjs index f04e667..9cbf081 100644 --- a/modules/timer.mjs +++ b/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; } diff --git a/modules/tutorialControler.mjs b/modules/tutorialControler.mjs new file mode 100644 index 0000000..91326ea --- /dev/null +++ b/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; + } +} diff --git a/script.js b/script.js index 0ba78bf..f36abd7 100644 --- a/script.js +++ b/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) { - case "ArrowDown": - gameState.playground.move(MoveDirection.Down); - break; - case "ArrowUp": - gameState.playground.move(MoveDirection.Up); - break; - case "ArrowRight": - gameState.playground.move(MoveDirection.Right); - break; - case "ArrowLeft": - gameState.playground.move(MoveDirection.Left); - break; - default: - return; - break; - } - gameState.playground.draw(ctx, canvas.width, canvas.height); - if (gameState.playground.isSolved()) { - alert("bravo"); + if (gameState.playable) { + switch (event.key) { + case "ArrowDown": + gameState.playground.move(MoveDirection.Down); + break; + case "ArrowUp": + gameState.playground.move(MoveDirection.Up); + break; + case "ArrowRight": + gameState.playground.move(MoveDirection.Right); + break; + case "ArrowLeft": + gameState.playground.move(MoveDirection.Left); + break; + default: + return; + break; + } + gameState.playground.draw(ctx, canvas.width, canvas.height); + if (gameState.playground.isSolved()) { + alert("bravo"); + } + } else { + tutorial.next(); + gameState.playable = tutorial.isFinished(); } } }); -window.playground = gameState.playground; -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); +gameState.playground.draw(ctx);