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

some fixes

Browse source
This commit is contained in:
henry-hiles 2021-12-13 14:35:18 -05:00
parent 25b3f97fd2
commit bb3a048d15
5 changed files with 10 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
bird.js
View file

@ -9,13 +9,15 @@ const setTop = ( top ) => birdElem.style.setProperty( "--bird-top", top )
const getTop = () => parseFloat( getComputedStyle( birdElem ).getPropertyValue( "--bird-top" ) ) const getTop = () => parseFloat( getComputedStyle( birdElem ).getPropertyValue( "--bird-top" ) )
const handleJump = ( event ) => { const handleJump = ( event ) => {
if ( event.code === "Space" ) timeSinceLastJump = 0 if ( event.code === "Space" || event.type == "click") timeSinceLastJump = 0
} }
export const setupBird = () => { export const setupBird = () => {
setTop( window.innerHeight / 2 ) setTop( window.innerHeight / 2 )
document.removeEventListener( "keydown", handleJump ) document.removeEventListener( "keydown", handleJump )
document.addEventListener( "keydown", handleJump ) document.addEventListener( "keydown", handleJump )
document.removeEventListener( "click", handleJump )
document.addEventListener( "click", handleJump )
} }
export const updateBird = ( delta ) => { export const updateBird = ( delta ) => {

BIN
images/background.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 122 KiB

After

Width:  |  Height:  |  Size: 94 KiB

Before After
Before After

4
index.html
View file

@ -12,10 +12,10 @@
<body> <body>
<h1 class="title" data-title> <h1 class="title" data-title>
Press Any Key To Start Press Any Key or Click To Start
<small data-subtitle class="subtitle"></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" draggable="false" class="bird"></img>
</body> </body>
</html> </html>

6
script.js
View file

@ -48,8 +48,10 @@ const handleLose = () => setTimeout( () => {
} }
subtitle.innerHTML = `Score: ${score}<br />Highscore: ${highscore}` subtitle.innerHTML = `Score: ${score}<br />Highscore: ${highscore}`
document.addEventListener( "keydown", handleStart, { once: true } ) document.addEventListener( "keypress", handleStart, { once: true } )
document.addEventListener( "click", handleStart, { once: true } )
}, 100 ) }, 100 )
subtitle.innerHTML = `Highscore: ${parseFloat(localStorage.getItem('highscore')) || 0}` subtitle.innerHTML = `Highscore: ${parseFloat(localStorage.getItem('highscore')) || 0}`
document.addEventListener( "keypress", handleStart, { once: true } ) document.addEventListener( "keypress", handleStart, { once: true } )
document.addEventListener( "click", handleStart, { once: true } )

3
styles.css
View file

@ -3,12 +3,10 @@
*::before { *::before {
box-sizing: border-box; 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;
width: 100vw;
height: 100vh; height: 100vh;
font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, font-family: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
@ -41,6 +39,7 @@ body {
.bird { .bird {
--bird-top: -1000; --bird-top: -1000;
--bird-size: 60px; --bird-size: 60px;
user-select: none;
position: absolute; position: absolute;
width: var(--bird-size); width: var(--bird-size);
left: var(--bird-size); left: var(--bird-size);