nbillard/sokoban
1
1
Çatalla 0
Kod Konular Değişiklik İstekleri Sürüm Wiki Aktivite

Add some comments

Kaynağa Gözat
Bu işleme şunda yer alıyor:
Ronan 2023-01-06 15:44:58 +01:00
ebeveyn b4c19ed6e0
işleme b818f74190
3 değiştirilmiş dosya ile 70 ekleme ve 11 silme
İstatistikleri Göster Yama Dosyasını İndir Diff Dosyasını İndir Tüm dosyaları genişlet Tüm dosyaları daralt

8
index.html
Dosyayı Görüntüle

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

54
modules/scoreboard.mjs
Dosyayı Görüntüle

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

19
script.js
Dosyayı Görüntüle

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