nbillard/sokoban
1
1
Fork 0
Code Issues Pull requests Releases Wiki Activity

Somewhat working tutorial

Browse source
This commit is contained in:
nbillard 2022-12-06 07:19:10 +01:00
parent 7eb2e47993
commit 3110f8adc2
6 changed files with 82 additions and 98 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -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>

7
modules/fillLevelsSelection.mjs
View file

@ -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;

16
modules/levels.mjs
View file

@ -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 = {
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 ]];
[ 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,

3
modules/timer.mjs
View file

@ -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;
}

31
modules/tutorialControler.mjs Normal file
View file

@ -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;
}
}

77
script.js
View file

@ -3,24 +3,27 @@ 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) {
if (gameState.playable) {
switch (event.key) {
case "ArrowDown":
gameState.playground.move(MoveDirection.Down);
@ -42,69 +45,11 @@ window.addEventListener("keydown", (event) => {
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);