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

16
index.html
View file

@ -8,7 +8,17 @@
<link rel="stylesheet" type="text/css" href="sources/css/style.css">
</head>
<body>
<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="col s6 offset-s3">
<div class="col s10 offset-s1" style="padding: 0">
@ -18,11 +28,9 @@
</div>
</div>
</div>
<div id="game">
<canvas id="canvas" class="invisible"></canvas>
<div id="game" class="invisible">
<canvas id="canvas"></canvas>
</div>
<p id="score"></p>
<p id="lives"></p>
<div id="gameovermodal" class="modal">
<div class="modal-content">

6
sources/css/style.css
View file

@ -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;

26
sources/js/index.js
View file

@ -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();
});