This commit is contained in:
Ronan 2022-12-12 16:06:45 +01:00
commit 6badaced72
5 changed files with 53 additions and 18 deletions

View file

@ -22,11 +22,11 @@
<![endif]--> <![endif]-->
<nav> <nav>
<h1>Sokoban</h1> <h1>Sokoban</h1>
<ol id="level-list"> <ol id="level-list" class="not-in-win-animation">
</ol> </ol>
</nav> </nav>
<main> <main>
<div class="controls"> <div class="controls not-in-win-animation">
<div id="timer">Time</div> <div id="timer">Time</div>
<button id="pause-1">Pause</button> <button id="pause-1">Pause</button>
<button id="pause-2">Pause</button><br/> <button id="pause-2">Pause</button><br/>
@ -34,7 +34,7 @@
<input type="range" min="0" max="100" value="50" id="difficulty-slider"> <input type="range" min="0" max="100" value="50" id="difficulty-slider">
<br/> <br/>
</div> </div>
<div> <div class="not-in-win-animation">
<canvas id="canvas" width="800" height="400"></canvas> <canvas id="canvas" width="800" height="400"></canvas>
<div id="tutorial-speech-bubble" class="text-bubble"> <div id="tutorial-speech-bubble" class="text-bubble">
<div class="dialog"> <div class="dialog">

View file

@ -3,6 +3,9 @@ import { generatePlayground } from '/modules/playground.mjs'
import { Timer } from '/modules/timer.mjs' import { Timer } from '/modules/timer.mjs'
export const selectLevel = (ctx, gameState, id) => { export const selectLevel = (ctx, gameState, id) => {
console.log(ctx);
console.log(gameState);
console.log(id);
gameState.playground = generatePlayground(levelsBlueprint[id].structure, gameState.width, gameState.height); gameState.playground = generatePlayground(levelsBlueprint[id].structure, gameState.width, gameState.height);
// TODO transfer expireFunction without a fail // TODO transfer expireFunction without a fail
// const expireFunc = () => {gameState.timer.expireFunction();}; // const expireFunc = () => {gameState.timer.expireFunction();};
@ -18,15 +21,31 @@ export const fillLevelsSelection = (gameState, ctx) => {
selectionButton.setAttribute("array-index", i); selectionButton.setAttribute("array-index", i);
selectionButton.addEventListener("click", (click) => { selectionButton.addEventListener("click", (click) => {
selectLevel(ctx, gameState, click.srcElement.getAttribute("array-index")); selectLevel(ctx, gameState, click.srcElement.getAttribute("array-index"));
// let blueprint = levelsBlueprint[
// click.srcElement.getAttribute("array-index")
// ];
// gameState.playground = generatePlayground(blueprint.structure, gameState.width, gameState.height);
// gameState.timer = new Timer(blueprint.time, gameState.timer.expireFunction);
// gameState.playground.draw(ctx, gameState.width, gameState.height);
}); });
selectionButton.innerText = "Level " + i; selectionButton.innerText = "Level " + i;
listElement.appendChild(selectionButton); listElement.appendChild(selectionButton);
levelList.appendChild(listElement); levelList.appendChild(listElement);
} }
} }
export class LevelManager {
constructor(winFunction, StartingLevelId = 0) {
self.CurrentLevelId = StartingLevelId;
self.Completed = levelsBlueprint.map(() => { return false; });
self.winFunction = winFunction;
}
next(ctx, gameState) {
self.Completed[self.CurrentLevelId] = true;
console.log(self.Completed);
let allLevelsFinished = self.Completed.reduce((a, b) => {
return a && b;
}, true);
console.log(allLevelsFinished);
if (allLevelsFinished) {
self.winFunction();
}
self.CurrentLevelId++;
selectLevel(ctx, gameState, self.CurrentLevelId);
}
}

View file

@ -25,7 +25,23 @@ const level2Blueprint = {
time: 23000, time: 23000,
}; };
const level3Blueprint = {
structure: [
[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.Floor, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall, Square.Wall,],
[Square.Wall, Square.Floor, Square.Box, Square.Floor, Square.Destination, Square.Destination, Square.Destination, Square.Wall, Square.Wall, Square.Wall,],
[Square.Wall, Square.Wall, Square.Destination, Square.Box, Square.Box, Square.Destination, Square.Floor, Square.Floor, Square.Wall, Square.Wall,],
[Square.Wall, Square.Wall, Square.Destination, Square.Destination, Square.Floor, Square.Box, Square.Box, Square.Floor, Square.Wall, Square.Wall,],
[Square.Wall, Square.Wall, Square.Destination, Square.Box, Square.Box, Square.Floor, Square.Box, Square.Floor, Square.Floor, Square.Floor],
[Square.Wall, Square.Wall, Square.Player, Square.Destination, Square.Destination, Square.Box, Square.Box, Square.Floor, Square.Floor, Square.Wall,],
[Square.Wall, Square.Wall, Square.Floor, Square.Floor, Square.Floor, 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, Square.Wall,],
],
time: 8000,
}
export const levelsBlueprint = [ export const levelsBlueprint = [
level1Blueprint, level1Blueprint,
level2Blueprint, // level2Blueprint,
// level3Blueprint,
] ]

View file

@ -2,8 +2,6 @@ export class Timer {
readDifficulty(slider) { readDifficulty(slider) {
self.difficulty = 1.5 - slider.value * 0.01; self.difficulty = 1.5 - slider.value * 0.01;
self.time = self.originalTime * self.difficulty; self.time = self.originalTime * self.difficulty;
console.log("difficulty: " + self.difficulty);
console.log("time: " + self.time);
} }
constructor(time, expireFunction) { constructor(time, expireFunction) {
@ -48,8 +46,8 @@ export class Timer {
if (self.timeRunning) { if (self.timeRunning) {
let timeStr = String(self.time).padStart(5, '0'); let timeStr = String(self.time).padStart(5, '0');
self.timerElement.innerHTML = "Time : " + timeStr.slice(0, 3) + '.' + timeStr.slice(3); self.timerElement.innerHTML = "Time : " + timeStr.slice(0, 3) + '.' + timeStr.slice(3);
if (self.time == 0) { if (self.time <= 0) {
this.expireFunction(); self.expireFunction();
clearInterval(self.intervalControler); clearInterval(self.intervalControler);
self.timeRunning = false; self.timeRunning = false;
} }

View file

@ -1,7 +1,7 @@
import { generatePlayground } from '/modules/playground.mjs' import { generatePlayground } from '/modules/playground.mjs'
import { levelsBlueprint } from '/modules/levels.mjs' import { levelsBlueprint } from '/modules/levels.mjs'
import { MoveDirection } from '/modules/enums.mjs' import { MoveDirection } from '/modules/enums.mjs'
import { fillLevelsSelection, selectLevel } from '/modules/levelSelection.mjs' import { fillLevelsSelection, selectLevel, LevelManager } from '/modules/levelSelection.mjs'
import { Timer } from '/modules/timer.mjs' import { Timer } from '/modules/timer.mjs'
import { TutorialControler } from '/modules/tutorialControler.mjs' import { TutorialControler } from '/modules/tutorialControler.mjs'
@ -25,6 +25,9 @@ let gameState = {
alert("Les vaches mangent le foin"); alert("Les vaches mangent le foin");
}), }),
playable: false, playable: false,
levelManager: new LevelManager( () => {
alert("Toutes les bottes sont rangées");
} ),
levelId: 0, levelId: 0,
}; };
@ -54,8 +57,7 @@ window.addEventListener("keydown", (event) => {
} }
gameState.playground.draw(ctx, canvas.width, canvas.height); gameState.playground.draw(ctx, canvas.width, canvas.height);
if (gameState.playground.isSolved()) { if (gameState.playground.isSolved()) {
gameState.levelId++; gameState.levelManager.next(ctx, gameState);
selectLevel(ctx, gameState, gameState.levelId);
} }
} else { } else {
tutorial.next(); tutorial.next();