Game Over modal
This commit is contained in:
parent
a5954b084b
commit
efe36a7189
2 changed files with 10 additions and 3 deletions
|
@ -18,7 +18,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="game" style="display:none;">
|
<div id="game">
|
||||||
<canvas id="canvas" class="invisible"></canvas>
|
<canvas id="canvas" class="invisible"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<p id="score"></p>
|
<p id="score"></p>
|
||||||
|
@ -29,6 +29,7 @@
|
||||||
<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">4</span></p>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<script type="module" src="sources/js/index.js"></script>
|
<script type="module" src="sources/js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -6,6 +6,7 @@ const menuLevel = document.querySelector(".menu-level");
|
||||||
const gameZone = document.getElementById("game");
|
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 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");
|
||||||
|
@ -13,7 +14,10 @@ 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);
|
||||||
|
|
||||||
|
let gameOverModal;
|
||||||
|
|
||||||
|
|
||||||
|
audio.loop = true;
|
||||||
startSound.volume = "0.2";
|
startSound.volume = "0.2";
|
||||||
|
|
||||||
req.open("GET", "sources/levels.json");
|
req.open("GET", "sources/levels.json");
|
||||||
|
@ -54,7 +58,8 @@ game.onDie = lives => {
|
||||||
|
|
||||||
game.onGameOver = (score) => {
|
game.onGameOver = (score) => {
|
||||||
gameOverSound.play();
|
gameOverSound.play();
|
||||||
alert(`Game over !\nYour score is: ${score}`);
|
gameOver.querySelector("span").innerText = score;
|
||||||
|
gameOverModal.open();
|
||||||
};
|
};
|
||||||
|
|
||||||
function loadLevels(levels) {
|
function loadLevels(levels) {
|
||||||
|
@ -76,7 +81,7 @@ function loadGame(data) {
|
||||||
game.load(data);
|
game.load(data);
|
||||||
game.start();
|
game.start();
|
||||||
startSound.play();
|
startSound.play();
|
||||||
};
|
}
|
||||||
|
|
||||||
function updateScore(s) {
|
function updateScore(s) {
|
||||||
score.innerText = s;
|
score.innerText = s;
|
||||||
|
@ -89,6 +94,7 @@ function updateLives(l) {
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', function() {
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
M.AutoInit();
|
M.AutoInit();
|
||||||
|
gameOverModal = M.Modal.getInstance(gameOver);
|
||||||
canvas.width = gameZone.clientWidth;
|
canvas.width = gameZone.clientWidth;
|
||||||
canvas.height = gameZone.clientHeight;
|
canvas.height = gameZone.clientHeight;
|
||||||
});
|
});
|
||||||
|
|
Reference in a new issue