IUT_Informatique/Snake
Archived
1
0
Fork 0
Code Activity

Merge branch 'front' into 'master'

Browse source 
adding game over modal front

See merge request p1905458/snake!2
This commit is contained in:
Ethanell 2021-03-25 07:55:14 +00:00
commit a5954b084b
2 changed files with 36 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -18,12 +18,17 @@
</div> </div>
</div> </div>
</div> </div>
<div id="game"> <div id="game" style="display:none;">
<canvas id="canvas" class="invisible"></canvas> <canvas id="canvas" class="invisible"></canvas>
</div> </div>
<p id="score"></p> <p id="score"></p>
<p id="lives"></p> <p id="lives"></p>
<div id="gameovermodal" class="modal">
<div class="modal-content">
<h1 class="linear-wipe">GAME OVER</h1>
<p>Your score : <span id="gameoverscore">4</span></p>
</div>
<script type="module" src="sources/js/index.js"></script> <script type="module" src="sources/js/index.js"></script>
</body> </body>
</html> </html>

30
sources/css/style.css
View file

@ -1,4 +1,5 @@
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap');
html{ html{
height: 100%; height: 100%;
@ -33,12 +34,39 @@ h1{
} }
#menu>div{
#menu>div, #gameovermodal{
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);
padding: 50px; padding: 50px;
border: 1px solid rgb(0, 255, 200); border: 1px solid rgb(0, 255, 200);
} }
.modal .modal-content{
padding: 0;
}
#gameovermodal{
padding: 20px;
margin-top: 20vh;
background-color: rgba(0, 0, 0, 0.863);
}
#gameovermodal h1{
margin: 0;
color: #FF4294;
padding: 0;
margin-bottom: 20px;
}
#gameovermodal p{
color:rgb(0, 255, 200);
font-size: 80px;
margin: 0;
font-family: 'Teko', sans-serif;
text-align: center;
}
#menu button{ #menu button{
display: block; display: block;
text-align: center; text-align: center;