diff --git a/index.html b/index.html
index f6190b6..ec9cd45 100644
--- a/index.html
+++ b/index.html
@@ -27,20 +27,12 @@
GAME OVER
-
Your score : 4
+
Your score :
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 :";
+});