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

Add some comments

Browse source
This commit is contained in:
Ronan 2023-01-06 15:44:58 +01:00
parent b4c19ed6e0
commit b818f74190
3 changed files with 70 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
index.html
View file

@ -1,9 +1,10 @@
<!doctype html>
<html id="html" lang="">
<html id="html" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Sokoban</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -26,6 +27,7 @@
</ol>
</nav>
<div class="container">
<!-- Scoreboard -->
<aside class="left-sidebar">
<h2>Score</h2>
<div class="input-field">
@ -43,6 +45,8 @@
</tbody>
</table>
</aside>
<!-- Game -->
<main>
<article class="not-in-win-animation">
<canvas id="canvas" width="800" height="400"></canvas>
@ -58,6 +62,8 @@
</article>
</main>
<!-- Controls -->
<aside class="controls not-in-win-animation right-sidebar">
<div id="timer">Time</div>
<button id="pause-1">Pause</button>

54
modules/scoreboard.mjs
View file

@ -7,7 +7,7 @@
/**
* @class Scoreboard
* @classdesc This class is responsible for the scoreboard.
* @classdesc This class is responsible to display the scoreboard and manage scores of the gamers.
*/
export class Scoreboard {
@ -24,9 +24,9 @@ export class Scoreboard {
/**
* @description
* After name changed in the input field, this method is called.
* If the name is different from the current gamer, a new gamer is created.
* @param {String} name - The name of the gamer.
*
*/
updatedName(name) {
let previousGamer = this.currentGamer;
@ -37,23 +37,33 @@ export class Scoreboard {
if (previousGamer != this.currentGamer && previousGamer.score == 0) {
this.removeGamer(previousGamer);
console.log(this.gamers);
}
this.renderArray();
}
/**
* Add a gamer to the list of gamers.
* @param {Gamer} gamer
*/
addGamer(gamer) {
this.gamers.push(gamer);
}
/**
* Remove a gamer from the list of gamers.
* @param {Gamer} gamer
*/
removeGamer(gamer) {
this.gamers.splice(this.gamers.indexOf(gamer), 1);
}
/**
* Render the list of gamers in the table.
*/
renderArray() {
let table = document.getElementById("scoreTable");
table.innerHTML = "";
table.innerHTML = ""; // Clear the table
this.gamers.forEach((gamer, index) => {
let row = table.insertRow();
let cell1 = row.insertCell();
@ -64,17 +74,30 @@ export class Scoreboard {
}
/**
* Update the current gamer who is playing.
* @param {Gamer} gamer
*/
updateCurrentGamer(gamer) {
this.currentGamer = gamer;
}
/**
* Get the current gamer who is playing.
* @returns {Gamer} The current gamer.
*/
getCurrentGamer() {
return this.currentGamer;
}
/**
* Update the score of the current gamer in the scoreboard.
* @param {Number} score
*/
updateScoreCurrentGamer(score) {
let newScore = this.currentGamer.score + score;
this.currentGamer.updateScore(newScore);
// Update score of the gamer in the table gamers
this.gamers.forEach((gamer, index) => {
if (gamer.name == this.currentGamer.name) {
@ -93,23 +116,44 @@ export class Scoreboard {
* @classdesc This class is responsible for the gamer.
*/
export class Gamer {
/**
* @constructor
* @param {String} name
* @param {Number} score
*/
constructor(name, score) {
this.name = name;
this.score = score;
}
/**
* Set the score of the gamer.
* @param {Number} score
*/
updateScore(score) {
this.score = score;
}
/**
* Set the name of the gamer.
* @param {String} name
*/
updateName(name) {
this.name = name;
}
/**
* Get the score of the gamer.
* @returns {Number} The score of the gamer.
*/
getScore() {
return this.score;
}
/**
* Get the name of the gamer.
* @returns {String} The name of the gamer.
*/
getName() {
return this.name;
}

19
script.js
View file

@ -6,6 +6,8 @@ import { Timer } from '/modules/timer.mjs'
import { TutorialControler } from '/modules/tutorialControler.mjs'
import { Scoreboard, Gamer } from '/modules/scoreboard.mjs'
// Get the canvas and the context
let canvas = document.getElementById('canvas');
let difficultySlider = document.getElementById('difficulty-slider');
let mouseOnCanvas = false;
@ -18,6 +20,9 @@ canvas.addEventListener("mouseleave",() => {
difficultySlider.disabled = false;
});
let ctx = canvas.getContext('2d');
// Create the game state
// The game state is a global variable that contains all the information about the game
let gameState = {
playground: generatePlayground(levelsBlueprint[0].structure, canvas.width, canvas.height),
width: canvas.width,
@ -35,11 +40,14 @@ let gameState = {
tutorial: new TutorialControler(),
};
fillLevelsSelection(gameState, ctx);
window.ctx = ctx
window.addEventListener("keydown", (event) => {
if (!event.defaultPrevented && mouseOnCanvas) {
if (gameState.playable) {
// If the game is playable, the keyboard is used to move the player
switch (event.key) {
case "ArrowDown":
gameState.playground.move(MoveDirection.Down);
@ -58,10 +66,13 @@ window.addEventListener("keydown", (event) => {
break;
}
gameState.playground.draw(ctx, canvas.width, canvas.height);
// If the game is solved, the next level is loaded
if (gameState.playground.isSolved()) {
gameState.levelManager.next(ctx, gameState);
}
} else {
// If the game is not playable, the tutorial is displayed
switch (event.key) {
case "ArrowRight":
case " ":
@ -79,22 +90,20 @@ window.addEventListener("keydown", (event) => {
}
});
//let table = document.getElementById("scoreTable");
// let joueur = new Gamer("user", 0);
// joueur.Scoreboard();
// Add event listener to the input field to update the name
let inputName = document.getElementById("name");
inputName.addEventListener("input", (event) => {
console.log(event.target.value);
inputName.setAttribute('value', event.target.value);
});
// Add event listener to the submit button to update the name
let submitButton = document.getElementById("submit-name");
submitButton.addEventListener("click", () => {
let value = inputName.value;
gamestate.scoreboard.updatedName(value);
});
// Draw the playground
window.gamestate = gameState;
gameState.playground.draw(ctx);