diff --git a/index.html b/index.html index f6190b6..ec9cd45 100644 --- a/index.html +++ b/index.html @@ -27,20 +27,12 @@

Scoreboard

-
-

12

-

Kybo_

-
-
-

12

-

Kybo_

-
diff --git a/sources/js/Game.js b/sources/js/Game.js index 0f05d5a..6498550 100644 --- a/sources/js/Game.js +++ b/sources/js/Game.js @@ -132,6 +132,7 @@ export class Game { if (this.onGameOver && typeof this.onGameOver === "function") this.onGameOver(this.score); this.stop(); + this.score = 0; } else { if (this.onDie && typeof this.onDie === "function") this.onDie(this.lives); diff --git a/sources/js/index.js b/sources/js/index.js index d0fb3e5..276224b 100644 --- a/sources/js/index.js +++ b/sources/js/index.js @@ -7,12 +7,15 @@ const gameZone = document.getElementById("game"); const score = document.getElementById("score"); const lives = document.getElementById("lives"); const gameOver = document.getElementById("gameovermodal"); +const scoreBoard = document.getElementById("scoreboard"); +const playerName = document.querySelector("input"); const audio = new Audio("sources/sound/main.mp3"); const startSound = new Audio("sources/sound/onStart.mp3"); const eatSound = new Audio("sources/sound/onEat.mp3"); const dieSound = new Audio("sources/sound/onDie.mp3"); const gameOverSound = new Audio("sources/sound/onGameOver.mp3"); const game = new Game(canvas); +const scores = []; let gameOverModal; @@ -60,6 +63,11 @@ game.onGameOver = (score) => { gameOverSound.play(); gameOver.querySelector("span").innerText = score; gameOverModal.open(); + + if (score > 0) { + scores.push({name: playerName.value, score: score}); + reloadScoreBoard(); + } }; function loadLevels(levels) { @@ -91,6 +99,23 @@ function updateLives(l) { lives.innerText = l; } +function reloadScoreBoard() { + scoreBoard.querySelectorAll("div").forEach(d => d.remove()); + for (const s of scores.sort(s => s.score).reverse()) { + const e = document.createElement("div"); + e.classList.add("row-score"); + const p1 = document.createElement("p"); + p1.classList.add("player-score"); + p1.innerText = s.score; + e.insertAdjacentElement("beforeend", p1); + const p2 = document.createElement("p"); + p2.classList.add("pseudo"); + p2.innerText = s.name ? s.name : "Unknown"; + e.insertAdjacentElement("beforeend", p2); + scoreBoard.insertAdjacentElement("beforeend", e); + } +} + document.addEventListener('DOMContentLoaded', function() { M.AutoInit(); @@ -103,3 +128,19 @@ audio.addEventListener("canplaythrough", () => { audio.volume = 0.1; audio.play(); }); + +scoreBoard.addEventListener("mousemove", () => { + scoreBoard.classList.remove("close"); +}); + +scoreBoard.addEventListener("mouseout", () => { + scoreBoard.classList.add("close"); +}); + +playerName.addEventListener("focusin", () => { + playerName.placeholder = ""; +}); + +playerName.addEventListener("focusout", () => { + playerName.placeholder = "Choose a nickname :"; +});