IUT_Informatique/Snake
Archived
1
0
Fork 0
Code Activity

Setup score & lives display

Browse source
This commit is contained in:
Ethanell 2021-03-26 22:49:00 +01:00
parent 960c5fc56c
commit c1204aae32
3 changed files with 32 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
index.html
View file

@ -8,7 +8,17 @@
<link rel="stylesheet" type="text/css" href="sources/css/style.css"> <link rel="stylesheet" type="text/css" href="sources/css/style.css">
</head> </head>
<body> <body>
<h1 class="linear-wipe">KyFlo Snake</h1> <div class="row">
<div class="col s2">
<p class="stats" id="score">Score: </p>
<p class="stats" id="lives">Lives: </p>
</div>
<div class="col s8">
<h1 class="linear-wipe">KyFlo Snake</h1>
</div>
<div class="col s2">
</div>
</div>
<div class="row" id="menu"> <div class="row" id="menu">
<div class="col s6 offset-s3"> <div class="col s6 offset-s3">
<div class="col s10 offset-s1" style="padding: 0"> <div class="col s10 offset-s1" style="padding: 0">
@ -18,11 +28,9 @@
</div> </div>
</div> </div>
</div> </div>
<div id="game"> <div id="game" class="invisible">
<canvas id="canvas" class="invisible"></canvas> <canvas id="canvas"></canvas>
</div> </div>
<p id="score"></p>
<p id="lives"></p>
<div id="gameovermodal" class="modal"> <div id="gameovermodal" class="modal">
<div class="modal-content"> <div class="modal-content">

6
sources/css/style.css
View file

@ -21,7 +21,7 @@ body{
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
h1{ h1, .stats {
font-family: 'Press Start 2P', cursive; font-family: 'Press Start 2P', cursive;
text-align: center; text-align: center;
color: yellow; color: yellow;
@ -29,6 +29,10 @@ h1{
padding-top: 80px; padding-top: 80px;
} }
.stats {
padding-top: 2vh;
}
#menu{ #menu{
margin: 0; margin: 0;
margin-top: 150px; margin-top: 150px;

26
sources/js/index.js
View file

@ -21,11 +21,11 @@ let gameOverModal;
audio.loop = true; audio.loop = true;
audio.volume = "1"; audio.volume = 0.1;
startSound.volume = "0.2"; startSound.volume = 0.2;
eatSound.volume = "0.2"; eatSound.volume = 0.2;
dieSound.volume = "0.2"; dieSound.volume = 0.2;
gameOverSound.volume = "0.2"; gameOverSound.volume = 0.2;
req.open("GET", "sources/levels.json"); req.open("GET", "sources/levels.json");
req.onerror = () => console.error("Fail to load XML request"); req.onerror = () => console.error("Fail to load XML request");
@ -45,12 +45,14 @@ game.onStart = () => {
updateLives(game.lives); updateLives(game.lives);
updateScore(game.score); updateScore(game.score);
menu.classList.add("invisible"); menu.classList.add("invisible");
canvas.classList.remove("invisible"); gameZone.classList.remove("invisible");
canvas.width = gameZone.clientWidth;
canvas.height = gameZone.clientHeight;
}; };
game.onStop = () => { game.onStop = () => {
menu.classList.remove("invisible"); menu.classList.remove("invisible");
canvas.classList.add("invisible"); gameZone.classList.add("invisible");
}; };
game.onEat = (score) => { game.onEat = (score) => {
@ -59,14 +61,17 @@ game.onEat = (score) => {
}; };
game.onDie = lives => { game.onDie = lives => {
dieSound.currentTime = 0;
dieSound.play(); dieSound.play();
updateLives(lives); updateLives(lives);
}; };
game.onGameOver = (score) => { game.onGameOver = (score) => {
dieSound.pause();
gameOverSound.play(); gameOverSound.play();
gameOver.querySelector("span").innerText = score; gameOver.querySelector("span").innerText = score;
gameOverModal.open(); gameOverModal.open();
updateLives(0);
if (score > 0) { if (score > 0) {
scores.push({name: playerName.value, score: score}); scores.push({name: playerName.value, score: score});
@ -96,11 +101,11 @@ function loadGame(data) {
} }
function updateScore(s) { function updateScore(s) {
score.innerText = s; score.innerText = `Score: ${s}`;
} }
function updateLives(l) { function updateLives(l) {
lives.innerText = l; lives.innerText = `Lives: ${l}`;
} }
function reloadScoreBoard() { function reloadScoreBoard() {
@ -124,12 +129,9 @@ function reloadScoreBoard() {
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
M.AutoInit(); M.AutoInit();
gameOverModal = M.Modal.getInstance(gameOver); gameOverModal = M.Modal.getInstance(gameOver);
canvas.width = gameZone.clientWidth;
canvas.height = gameZone.clientHeight;
}); });
audio.addEventListener("canplaythrough", () => { audio.addEventListener("canplaythrough", () => {
audio.volume = 0.1;
audio.play(); audio.play();
}); });