Implement Score Board
This commit is contained in:
parent
6737241714
commit
bc23ae7722
3 changed files with 43 additions and 9 deletions
10
index.html
10
index.html
|
@ -27,20 +27,12 @@
|
|||
<div id="gameovermodal" class="modal">
|
||||
<div class="modal-content">
|
||||
<h1 class="linear-wipe">GAME OVER</h1>
|
||||
<p>Your score : <span id="gameoverscore">4</span></p>
|
||||
<p>Your score : <span id="gameoverscore"></span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="scoreboard" class="close">
|
||||
<h1>Scoreboard</h1>
|
||||
<div class="row-score">
|
||||
<p class="player-score">12</p>
|
||||
<p class="pseudo">Kybo_</p>
|
||||
</div>
|
||||
<div class="row-score">
|
||||
<p class="player-score">12</p>
|
||||
<p class="pseudo">Kybo_</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="sources/js/index.js"></script>
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 :";
|
||||
});
|
||||
|
|
Reference in a new issue