Henry-Hiles/FlappyBird
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixes and highscore now working.

Browse source
This commit is contained in:
henry-hiles 2021-12-08 14:01:46 -05:00
parent fcaa534724
commit 25b3f97fd2
3 changed files with 63 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
index.html
View file

@ -13,7 +13,7 @@
<body> <body>
<h1 class="title" data-title> <h1 class="title" data-title>
Press Any Key To Start Press Any Key To Start
<small data-subtitle class="subtitle hide"></small> <small data-subtitle class="subtitle"></small>
</h1> </h1>
<img data-bird src="images/bird.png" class="bird"></img> <img data-bird src="images/bird.png" class="bird"></img>
</body> </body>

19
script.js
View file

@ -1,5 +1,5 @@
import { updateBird, setupBird, getBirdRect } from "./bird.js" import { getBirdRect, setupBird, updateBird } from "./bird.js"
import { updatePipes, setupPipes, getPassedPipesCount, getPipeRects, } from "./pipe.js" import { getPassedPipesCount, getPipeRects, setupPipes, updatePipes } from "./pipe.js"
const title = document.querySelector( "[data-title]" ) const title = document.querySelector( "[data-title]" )
const subtitle = document.querySelector( "[data-subtitle]" ) const subtitle = document.querySelector( "[data-subtitle]" )
@ -39,10 +39,17 @@ const handleStart = () => {
const handleLose = () => setTimeout( () => { const handleLose = () => setTimeout( () => {
title.classList.remove( "hide" ) title.classList.remove( "hide" )
subtitle.classList.remove( "hide" ) subtitle.classList.remove( "hide" )
console.log( !( !document.cookie ) )
const highscore = 0 let highscore = parseFloat(localStorage.getItem('highscore'))
subtitle.innerHTML = `Score: ${getPassedPipesCount()}<br />Highscore: ${highscore}` const score = getPassedPipesCount()
document.addEventListener( "keypress", handleStart, { once: true } ) if(!highscore || score > highscore) {
localStorage.setItem('highscore', score)
highscore = score;
}
subtitle.innerHTML = `Score: ${score}<br />Highscore: ${highscore}`
document.addEventListener( "keydown", handleStart, { once: true } )
}, 100 ) }, 100 )
subtitle.innerHTML = `Highscore: ${parseFloat(localStorage.getItem('highscore')) || 0}`
document.addEventListener( "keypress", handleStart, { once: true } ) document.addEventListener( "keypress", handleStart, { once: true } )

87
styles.css
View file

@ -1,67 +1,76 @@
*, *::after, *::before { *,
box-sizing: border-box; *::after,
*::before {
box-sizing: border-box;
} }
body { body {
margin: 0; margin: 0;
background-image: url(images/background.png); background-image: url(images/background.png);
background-size: cover; 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; 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 { .title {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
display: flex; display: flex;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
inset: 0; inset: 0;
margin: 0; color: #eff2f5;
flex-direction: column; margin: 0;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.2);
} }
.subtitle { .subtitle {
margin-top: .5rem; margin-top: 0.5rem;
} }
.hide { .hide {
display: none; display: none;
} }
.bird { .bird {
--bird-top: -1000; --bird-top: -1000;
--bird-size: 60px; --bird-size: 60px;
position: absolute; position: absolute;
width: var(--bird-size); width: var(--bird-size);
left: var(--bird-size); left: var(--bird-size);
top: calc(var(--bird-top) * 1px); top: calc(var(--bird-top) * 1px);
border-radius: 50%; border-radius: 50%;
} }
.pipe { .pipe {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
width: calc(var(--pipe-width) * 1px); width: calc(var(--pipe-width) * 1px);
left: calc(var(--pipe-left) * 1px); left: calc(var(--pipe-left) * 1px);
} }
.pipe > .segment { .pipe > .segment {
position: absolute; position: absolute;
width: 100%; width: 100%;
background-size: 100% 600px; background-size: 100% 600px;
} }
.pipe > .top { .pipe > .top {
top: 0; top: 0;
bottom: calc(var(--hole-top) * 1px); bottom: calc(var(--hole-top) * 1px);
background-image: url(images/topPipe.png); background-image: url(images/topPipe.png);
background-position: bottom; background-position: bottom;
} }
.pipe > .bottom { .pipe > .bottom {
bottom: 0; bottom: 0;
top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px)); top: calc(100vh - (var(--hole-top) * 1px) + calc(var(--hole-height) * 1px));
background-image: url(images/bottomPipe.png); background-image: url(images/bottomPipe.png);
} }