diff --git a/index.html b/index.html
index 0aa2eab..2717bb0 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
Press Any Key To Start
-
+
diff --git a/script.js b/script.js
index 7cf9c4a..7653aec 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,5 @@
-import { updateBird, setupBird, getBirdRect } from "./bird.js"
-import { updatePipes, setupPipes, getPassedPipesCount, getPipeRects, } from "./pipe.js"
+import { getBirdRect, setupBird, updateBird } from "./bird.js"
+import { getPassedPipesCount, getPipeRects, setupPipes, updatePipes } from "./pipe.js"
const title = document.querySelector( "[data-title]" )
const subtitle = document.querySelector( "[data-subtitle]" )
@@ -39,10 +39,17 @@ const handleStart = () => {
const handleLose = () => setTimeout( () => {
title.classList.remove( "hide" )
subtitle.classList.remove( "hide" )
- console.log( !( !document.cookie ) )
- const highscore = 0
- subtitle.innerHTML = `Score: ${getPassedPipesCount()}
Highscore: ${highscore}`
- document.addEventListener( "keypress", handleStart, { once: true } )
+
+ let highscore = parseFloat(localStorage.getItem('highscore'))
+ const score = getPassedPipesCount()
+ if(!highscore || score > highscore) {
+ localStorage.setItem('highscore', score)
+ highscore = score;
+ }
+
+ subtitle.innerHTML = `Score: ${score}
Highscore: ${highscore}`
+ document.addEventListener( "keydown", handleStart, { once: true } )
}, 100 )
+subtitle.innerHTML = `Highscore: ${parseFloat(localStorage.getItem('highscore')) || 0}`
document.addEventListener( "keypress", handleStart, { once: true } )
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 4642115..45f03ff 100644
--- a/styles.css
+++ b/styles.css
@@ -1,67 +1,76 @@
-*, *::after, *::before {
- box-sizing: border-box;
+*,
+*::after,
+*::before {
+ box-sizing: border-box;
}
body {
- margin: 0;
- background-image: url(images/background.png);
- background-size: cover;
- font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; overflow: hidden;
+ margin: 0;
+ background-image: url(images/background.png);
+ background-size: cover;
+ width: 100vw;
+ height: 100vh;
+ font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+ overflow: hidden;
}
.title {
- z-index: 10;
- position: absolute;
- display: flex;
- text-align: center;
- justify-content: center;
- align-items: center;
- inset: 0;
- margin: 0;
- flex-direction: column;
+ z-index: 10;
+ position: absolute;
+ display: flex;
+ text-align: center;
+ justify-content: center;
+ align-items: center;
+ inset: 0;
+ color: #eff2f5;
+ margin: 0;
+ flex-direction: column;
+ background-color: rgba(0, 0, 0, 0.2);
}
.subtitle {
- margin-top: .5rem;
+ margin-top: 0.5rem;
}
.hide {
- display: none;
+ display: none;
}
.bird {
- --bird-top: -1000;
- --bird-size: 60px;
- position: absolute;
- width: var(--bird-size);
- left: var(--bird-size);
- top: calc(var(--bird-top) * 1px);
- border-radius: 50%;
+ --bird-top: -1000;
+ --bird-size: 60px;
+ position: absolute;
+ width: var(--bird-size);
+ left: var(--bird-size);
+ top: calc(var(--bird-top) * 1px);
+ border-radius: 50%;
}
.pipe {
- position: absolute;
- top: 0;
- bottom: 0;
- width: calc(var(--pipe-width) * 1px);
- left: calc(var(--pipe-left) * 1px);
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ width: calc(var(--pipe-width) * 1px);
+ left: calc(var(--pipe-left) * 1px);
}
.pipe > .segment {
- position: absolute;
- width: 100%;
- background-size: 100% 600px;
+ position: absolute;
+ width: 100%;
+ background-size: 100% 600px;
}
.pipe > .top {
- top: 0;
- bottom: calc(var(--hole-top) * 1px);
- background-image: url(images/topPipe.png);
- background-position: bottom;
+ top: 0;
+ bottom: calc(var(--hole-top) * 1px);
+ background-image: url(images/topPipe.png);
+ background-position: bottom;
}
.pipe > .bottom {
- bottom: 0;
- top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
- background-image: url(images/bottomPipe.png);
-}
\ No newline at end of file
+ bottom: 0;
+ top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
+ background-image: url(images/bottomPipe.png);
+}