adding game over modal front
This commit is contained in:
parent
4d0c09fa1f
commit
26a530aa53
2 changed files with 36 additions and 3 deletions
|
@ -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>
|
|
@ -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;
|
||||||
|
|
Reference in a new issue