diff --git a/sources/css/style.css b/sources/css/style.css
index 789e86c..caf35ec 100644
--- a/sources/css/style.css
+++ b/sources/css/style.css
@@ -21,7 +21,7 @@ body{
backdrop-filter: blur(5px);
}
-h1{
+h1, .stats {
font-family: 'Press Start 2P', cursive;
text-align: center;
color: yellow;
@@ -29,6 +29,10 @@ h1{
padding-top: 80px;
}
+.stats {
+ padding-top: 2vh;
+}
+
#menu{
margin: 0;
margin-top: 150px;
diff --git a/sources/js/index.js b/sources/js/index.js
index 556d520..c11478a 100644
--- a/sources/js/index.js
+++ b/sources/js/index.js
@@ -21,11 +21,11 @@ let gameOverModal;
audio.loop = true;
-audio.volume = "1";
-startSound.volume = "0.2";
-eatSound.volume = "0.2";
-dieSound.volume = "0.2";
-gameOverSound.volume = "0.2";
+audio.volume = 0.1;
+startSound.volume = 0.2;
+eatSound.volume = 0.2;
+dieSound.volume = 0.2;
+gameOverSound.volume = 0.2;
req.open("GET", "sources/levels.json");
req.onerror = () => console.error("Fail to load XML request");
@@ -45,12 +45,14 @@ game.onStart = () => {
updateLives(game.lives);
updateScore(game.score);
menu.classList.add("invisible");
- canvas.classList.remove("invisible");
+ gameZone.classList.remove("invisible");
+ canvas.width = gameZone.clientWidth;
+ canvas.height = gameZone.clientHeight;
};
game.onStop = () => {
menu.classList.remove("invisible");
- canvas.classList.add("invisible");
+ gameZone.classList.add("invisible");
};
game.onEat = (score) => {
@@ -59,14 +61,17 @@ game.onEat = (score) => {
};
game.onDie = lives => {
+ dieSound.currentTime = 0;
dieSound.play();
updateLives(lives);
};
game.onGameOver = (score) => {
+ dieSound.pause();
gameOverSound.play();
gameOver.querySelector("span").innerText = score;
gameOverModal.open();
+ updateLives(0);
if (score > 0) {
scores.push({name: playerName.value, score: score});
@@ -96,11 +101,11 @@ function loadGame(data) {
}
function updateScore(s) {
- score.innerText = s;
+ score.innerText = `Score: ${s}`;
}
function updateLives(l) {
- lives.innerText = l;
+ lives.innerText = `Lives: ${l}`;
}
function reloadScoreBoard() {
@@ -124,12 +129,9 @@ function reloadScoreBoard() {
document.addEventListener('DOMContentLoaded', function() {
M.AutoInit();
gameOverModal = M.Modal.getInstance(gameOver);
- canvas.width = gameZone.clientWidth;
- canvas.height = gameZone.clientHeight;
});
audio.addEventListener("canplaythrough", () => {
- audio.volume = 0.1;
audio.play();
});