IUT_Informatique/Snake
Archived
1
0
Fork 0
Code Activity

Adding scorebaord

Browse source
This commit is contained in:
Kybo09 2021-03-25 09:25:41 +01:00
parent 26a530aa53
commit bd7fa3714b
2 changed files with 73 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
index.html
View file

@ -29,6 +29,20 @@
<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>
<div id="scoreboard" class="close">
<h1>Scoreboard</h1>
<div class="row-score">
<p class="player-score">12</p>
<p class="pseudo">Kybo_</p>
</div>
<div class="row-score">
<p class="player-score">12</p>
<p class="pseudo">Kybo_</p>
</div>
</div>
<script type="module" src="sources/js/index.js"></script> <script type="module" src="sources/js/index.js"></script>
</body> </body>
</html> </html>

59
sources/css/style.css
View file

@ -67,6 +67,65 @@ h1{
text-align: center; text-align: center;
} }
#scoreboard{
width: 400px;
color: rgb(0, 255, 200);
height: 100%;
position: fixed;
top: 0;
border: 1px solid rgb(0, 255, 200);
background-color: rgba(0, 0, 0, 0.5);
border-right: none;
border-top: none;
border-bottom: none;
right: 0;
transition-duration: 0.8s;
}
#scoreboard.close{
transform: translateX(300px);
}
#scoreboard.close .row-score{
display: none;
}
#scoreboard.close h1{
text-orientation: upright;
writing-mode: vertical-rl;
margin-top: 250px;
padding-left: 30px;
}
#scoreboard h1{
width: auto;
font-size: 35px;
margin: 0;
padding: 0;
padding: 10px;
padding-top: 40px;
color:#FF4294;
padding-bottom: 40px;
}
#scoreboard .row-score{
width: 100%;
font-size: 50px;
font-family: 'Teko', sans-serif;
padding: 0 50px;
margin-bottom: 20px;
}
.pseudo{
margin: 0;
}
#scoreboard .player-score{
float: right;
margin: 0;
}
#menu button{ #menu button{
display: block; display: block;
text-align: center; text-align: center;