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 id="gameovermodal" class="modal">
|
||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<h1 class="linear-wipe">GAME OVER</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div id="scoreboard" class="close">
|
<div id="scoreboard" class="close">
|
||||||
<h1>Scoreboard</h1>
|
<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>
|
</div>
|
||||||
|
|
||||||
<script type="module" src="sources/js/index.js"></script>
|
<script type="module" src="sources/js/index.js"></script>
|
||||||
|
|
|
@ -132,6 +132,7 @@ export class Game {
|
||||||
if (this.onGameOver && typeof this.onGameOver === "function")
|
if (this.onGameOver && typeof this.onGameOver === "function")
|
||||||
this.onGameOver(this.score);
|
this.onGameOver(this.score);
|
||||||
this.stop();
|
this.stop();
|
||||||
|
this.score = 0;
|
||||||
} else {
|
} else {
|
||||||
if (this.onDie && typeof this.onDie === "function")
|
if (this.onDie && typeof this.onDie === "function")
|
||||||
this.onDie(this.lives);
|
this.onDie(this.lives);
|
||||||
|
|
|
@ -7,12 +7,15 @@ const gameZone = document.getElementById("game");
|
||||||
const score = document.getElementById("score");
|
const score = document.getElementById("score");
|
||||||
const lives = document.getElementById("lives");
|
const lives = document.getElementById("lives");
|
||||||
const gameOver = document.getElementById("gameovermodal");
|
const gameOver = document.getElementById("gameovermodal");
|
||||||
|
const scoreBoard = document.getElementById("scoreboard");
|
||||||
|
const playerName = document.querySelector("input");
|
||||||
const audio = new Audio("sources/sound/main.mp3");
|
const audio = new Audio("sources/sound/main.mp3");
|
||||||
const startSound = new Audio("sources/sound/onStart.mp3");
|
const startSound = new Audio("sources/sound/onStart.mp3");
|
||||||
const eatSound = new Audio("sources/sound/onEat.mp3");
|
const eatSound = new Audio("sources/sound/onEat.mp3");
|
||||||
const dieSound = new Audio("sources/sound/onDie.mp3");
|
const dieSound = new Audio("sources/sound/onDie.mp3");
|
||||||
const gameOverSound = new Audio("sources/sound/onGameOver.mp3");
|
const gameOverSound = new Audio("sources/sound/onGameOver.mp3");
|
||||||
const game = new Game(canvas);
|
const game = new Game(canvas);
|
||||||
|
const scores = [];
|
||||||
|
|
||||||
let gameOverModal;
|
let gameOverModal;
|
||||||
|
|
||||||
|
@ -60,6 +63,11 @@ game.onGameOver = (score) => {
|
||||||
gameOverSound.play();
|
gameOverSound.play();
|
||||||
gameOver.querySelector("span").innerText = score;
|
gameOver.querySelector("span").innerText = score;
|
||||||
gameOverModal.open();
|
gameOverModal.open();
|
||||||
|
|
||||||
|
if (score > 0) {
|
||||||
|
scores.push({name: playerName.value, score: score});
|
||||||
|
reloadScoreBoard();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
function loadLevels(levels) {
|
function loadLevels(levels) {
|
||||||
|
@ -91,6 +99,23 @@ function updateLives(l) {
|
||||||
lives.innerText = 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() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
M.AutoInit();
|
M.AutoInit();
|
||||||
|
@ -103,3 +128,19 @@ audio.addEventListener("canplaythrough", () => {
|
||||||
audio.volume = 0.1;
|
audio.volume = 0.1;
|
||||||
audio.play();
|
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