IUT_Informatique/Snake
Archived
1
0
Fork 0
Code Activity

Details

Browse source
This commit is contained in:
Kybo09 2021-03-30 10:55:33 +02:00
parent cad95c81c6
commit a341136245
2 changed files with 25 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
index.html
View file

@ -9,16 +9,10 @@
</head> </head>
<body> <body>
<div class="row"> <div class="row">
<div class="col s2">
<p class="stats" id="score">Score: </p> <div class="col s12">
<p class="stats" id="lives">Lives: </p>
<p class="stats" id="speed">Speed: </p>
</div>
<div class="col s8">
<h1 class="linear-wipe">KyFlo Snake</h1> <h1 class="linear-wipe">KyFlo Snake</h1>
</div> </div>
<div class="col s2">
</div>
</div> </div>
<div class="row" id="menu"> <div class="row" id="menu">
<div class="col s6 offset-s3"> <div class="col s6 offset-s3">
@ -31,6 +25,11 @@
</div> </div>
<div id="game" class="invisible"> <div id="game" class="invisible">
<canvas id="canvas"></canvas> <canvas id="canvas"></canvas>
<div class="col s6 offset-s3 row statsgame">
<p class="stats col s4" id="score">Score: </p>
<p class="stats col s4" id="lives">Lives: </p>
<p class="stats col s4" id="speed">Speed: </p>
</div>
</div> </div>
<div id="gameovermodal" class="modal"> <div id="gameovermodal" class="modal">

20
sources/css/style.css
View file

@ -21,7 +21,7 @@ body{
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
} }
h1, .stats { h1{
font-family: 'Press Start 2P', cursive; font-family: 'Press Start 2P', cursive;
text-align: center; text-align: center;
color: yellow; color: yellow;
@ -30,9 +30,20 @@ h1, .stats {
} }
.stats { .stats {
padding-top: 2vh; font-family: 'Press Start 2P', cursive;
text-align: center;
color:#fff242;
padding: 0;
margin: 0;
font-size: 20px;
} }
.stats:last-child{
font-size: 15px;
padding-top: 5px;
}
#menu{ #menu{
margin: 0; margin: 0;
margin-top: 150px; margin-top: 150px;
@ -40,6 +51,11 @@ h1, .stats {
} }
#menu>div{
animation:slit-in-vertical .45s ease-out both
}
@keyframes slit-in-vertical{0%{transform:translateZ(-800px) rotateY(90deg);opacity:0}54%{transform:translateZ(-160px) rotateY(87deg);opacity:1}100%{transform:translateZ(0) rotateY(0)}}
#menu>div, #gameovermodal{ #menu>div, #gameovermodal{
background-color: rgba(0, 0, 0, 0.5); background-color: rgba(0, 0, 0, 0.5);