From bff058002d5a982c9b06889f9361f23941c86f7d Mon Sep 17 00:00:00 2001 From: orphevs Date: Sat, 9 Dec 2017 04:20:54 +0100 Subject: [PATCH] Add Score + Game Over --- assets/css/style.css | 97 +++++++++++++++++++++++++++++++++++++- assets/fonts/prstartk.ttf | Bin 0 -> 19624 bytes index.html | 15 +++--- 3 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 assets/fonts/prstartk.ttf diff --git a/assets/css/style.css b/assets/css/style.css index 049d51c..a703e4f 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,6 +1,6 @@ @font-face{ - font-family: 'Mario Kart'; - src: url('../fonts/Mario-Kart-DS.ttf'); + font-family: 'FIANSO'; + src: url('../fonts/prstartk.ttf'); } body{ @@ -26,6 +26,98 @@ body{ .container{ max-width: 1140px; margin: auto; + position: absolute; + left: 0; + right: 0; + margin-left: auto; + margin-right: auto; +} + +.score{ + position: absolute; + right: 0px; + top: 0px; + text-align: right; + padding-top: 20px; + padding-right: 20px; +} + +.score h3{ + font-family: 'FIANSO'; + font-size: 32px; + color: #000; + margin: inherit; + padding-bottom: 8px; +} + +.score h5{ + font-family: 'FIANSO'; + font-size: 24px; + color: #000; + margin: inherit; +} + +.gameover{ + text-align: center; + position: absolute; + width: 100%; + height: 73%; + top: 0; + padding-top: 150px; + background: rgba(155, 0, 0, 0.85); + box-shadow: inset 0px 0px 60px 0px rgba(0,0,0,0.75); + +} + +.gameover h1{ + font-family: 'FIANSO'; + font-size: 64px; + color: #fff; + margin: inherit; + padding-bottom: 60px; + animation: pulse 3s infinite; +} + +@keyframes pulse{ + 0%{ + transform: scale(1); + } + 50%{ + transform: scale(1.15); + } + 100%{ + transform: scale(1); + } +} + +.gameover h4{ + font-family: 'FIANSO'; + font-size: 18px; + color: #fff; + margin: inherit; + padding-bottom: 100px; + opacity: 0.8; +} + +.gameover a{ + font-family: 'FIANSO'; + font-size: 18px; + color: #fff; + margin: inherit; + text-align: center; + border: solid 3px #fff; + border-radius: 6px; + padding: 12px 24px; + text-decoration: none; + transition: 0.3s; + position: relative; + z-index: 5; + +} + +.gameover a:hover{ + background: #fff; + color: #000; } .map{ @@ -34,6 +126,7 @@ body{ display: inline-block; padding-top: 7px; padding-bottom: 3px; + overflow: hidden; } .line{ diff --git a/assets/fonts/prstartk.ttf b/assets/fonts/prstartk.ttf new file mode 100644 index 0000000000000000000000000000000000000000..6ce26eb4fc7a5e4ea01314bb5e19b76e94b3d7ec GIT binary patch literal 19624 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 jfc5ku7{`| literal 0 HcmV?d00001 diff --git a/index.html b/index.html index fa0aee6..b8ae256 100644 --- a/index.html +++ b/index.html @@ -3,12 +3,6 @@ de_tank - - @@ -17,6 +11,15 @@
+
+

SCORE

+
999
+
+
+

GAME OVER

+

Votre score : 999

+ Rejouer +