ajout des confettis en cas de victoire (script externe)

This commit is contained in:
Younes Bezza 2024-12-25 16:08:14 +01:00
parent 8b895ee383
commit 81d1e561e1
3 changed files with 44 additions and 5 deletions

View file

@ -31,15 +31,15 @@
<div id="jeu">
<button id="debut_game" onclick="chrono()">GO!</button>
<button id="fin_game" onclick="reset()">CIAO</button>
<div id="grille">
<script type="text/javascript">grilleButtons(7,7);</script>
</div>
</div>
<button id="debut_game" class="game_button" onclick="chrono()">GO!</button>
<button id="fin_game" class="game_button" onclick="reset()">CIAO</button>
<div id="popup" class="popup">
<div class="popup-content">
@ -51,4 +51,42 @@
</div>
</div>
</body>
<footer>
<!-- confettis( bonus) -->
<!-- HTML -->
<button id="btn">Essayez-moi !</button>
<canvas id="confetti-canvas"></canvas>
<!-- JS -->
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
<script type="text/javascript">
const btn = document.querySelector('#btn');
const canvas = document.querySelector('#confetti-canvas');
function onButtonClick(){
var myConfetti = confetti.create(canvas, {
resize: true,
useWorker: true
});
myConfetti({
particleCount: 100,
spread: 160
});
}
btn.addEventListener('click', onButtonClick);
</script>
<!-- CSS -->
<style>
#confetti-canvas {
position: fixed;
z-index: 999;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
}
</style>
<!-- fin des confettis -->
</footer>
</html>

View file

@ -75,7 +75,7 @@ function cookie(){
// Fonction pour fermer la pop-up
close_popup_button.addEventListener('click', () => {
// setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
setCookie('cookiesAccepted', 'true', 1); // Stocke l'acceptation pendant 1 jour
popup.classList.remove('show');
});

View file

@ -11,7 +11,7 @@
}
#body_demineur{
background-color: rgba(128, 128, 128, 0.544);
background-color: #007BFF;
margin: 0;
@ -24,6 +24,7 @@
border-width: 2px;
border-style: double;
width: 49%;
background-color: #fff;
}