commit e5f9c2ea99fc3914206623f29088096ca827c9f5 Author: henry-hiles Date: Fri Nov 26 12:38:45 2021 -0500 first commit diff --git a/bird.js b/bird.js new file mode 100644 index 0000000..c24d204 --- /dev/null +++ b/bird.js @@ -0,0 +1,30 @@ +const birdElem = document.querySelector( "[data-bird]" ) +const BIRD_SPEED = 0.5 +const JUMP_DURATION = 150 + +let timeSinceLastJump = Number.POSITIVE_INFINITY + +const setTop = ( top ) => birdElem.style.setProperty( "--bird-top", top ) + +const getTop = () => parseFloat( getComputedStyle( birdElem ).getPropertyValue( "--bird-top" ) ) + +const handleJump = ( event ) => { + if ( event.code === "Space" ) timeSinceLastJump = 0 +} + +export const setupBird = () => { + setTop( window.innerHeight / 2 ) + document.removeEventListener( "keydown", handleJump ) + document.addEventListener( "keydown", handleJump ) +} + +export const updateBird = ( delta ) => { + if ( timeSinceLastJump < JUMP_DURATION ) + setTop( getTop() - BIRD_SPEED * delta ) + else + setTop( getTop() + BIRD_SPEED * delta ) + + timeSinceLastJump += delta +} + +export const getBirdRect = () => birdElem.getBoundingClientRect() \ No newline at end of file diff --git a/images/background.png b/images/background.png new file mode 100644 index 0000000..4c6ff94 Binary files /dev/null and b/images/background.png differ diff --git a/images/bird.png b/images/bird.png new file mode 100644 index 0000000..a5cd6ab Binary files /dev/null and b/images/bird.png differ diff --git a/images/bottomPipe.png b/images/bottomPipe.png new file mode 100644 index 0000000..690ea81 Binary files /dev/null and b/images/bottomPipe.png differ diff --git a/images/topPipe.png b/images/topPipe.png new file mode 100644 index 0000000..5075de6 Binary files /dev/null and b/images/topPipe.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..0aa2eab --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + + + + + Document + + + +

+ Press Any Key To Start + +

+ + + \ No newline at end of file diff --git a/pipe.js b/pipe.js new file mode 100644 index 0000000..7455eed --- /dev/null +++ b/pipe.js @@ -0,0 +1,81 @@ +const HOLE_HEIGHT = 200 +const PIPE_WIDTH = 138 +const PIPE_INTERVAL = 1500 +const PIPE_SPEED = 0.5 +let pipes = [] +let timeSinceLastPipe +let passedPipeCount + +const createPipe = () => { + const pipeElem = document.createElement( "div" ) + const topElem = createPipeSegment( "top" ) + const bottomElem = createPipeSegment( "bottom" ) + pipeElem.append( topElem ) + pipeElem.append( bottomElem ) + pipeElem.classList.add( "pipe" ) + pipeElem.style.setProperty( + "--hole-top", + randomNumberBetween( + HOLE_HEIGHT * 1.5, + window.innerHeight - HOLE_HEIGHT * 0.5 + ) + ) + const pipe = { + get left () { + return parseFloat( + getComputedStyle( pipeElem ).getPropertyValue( "--pipe-left" ) + ) + }, + set left ( value ) { + pipeElem.style.setProperty( "--pipe-left", value ) + }, + remove: () => { + pipes = pipes.filter( p => p !== pipe ) + pipeElem.remove() + }, + rects: () => [ + topElem.getBoundingClientRect(), + bottomElem.getBoundingClientRect(), + ] + } + pipe.left = window.innerWidth + document.body.append( pipeElem ) + pipes.push( pipe ) +} + +const createPipeSegment = ( position ) => { + const segment = document.createElement( "div" ) + segment.classList.add( "segment", position ) + return segment +} + +const randomNumberBetween = ( min, max ) => Math.floor( Math.random() * ( max - min + 1 ) + min ) + +export const setupPipes = () => { + document.documentElement.style.setProperty( "--pipe-width", PIPE_WIDTH ) + document.documentElement.style.setProperty( "--hole-height", HOLE_HEIGHT ) + pipes.forEach( pipe => pipe.remove() ) + timeSinceLastPipe = PIPE_INTERVAL + passedPipeCount = 0 +} + +export const updatePipes = ( delta ) => { + timeSinceLastPipe += delta + + if ( timeSinceLastPipe > PIPE_INTERVAL ) { + timeSinceLastPipe -= PIPE_INTERVAL + createPipe() + } + + pipes.forEach( pipe => { + if ( pipe.left + PIPE_WIDTH < 0 ) { + passedPipeCount++ + return pipe.remove() + } + pipe.left = pipe.left - delta * PIPE_SPEED + } ) +} + +export const getPassedPipesCount = () => passedPipeCount + +export const getPipeRects = () => pipes.flatMap( pipe => pipe.rects() ) \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..aa56385 --- /dev/null +++ b/script.js @@ -0,0 +1,60 @@ +import { updateBird, setupBird, getBirdRect } from "./bird.js" +import { + updatePipes, + setupPipes, + getPassedPipesCount, + getPipeRects, +} from "./pipe.js" + +const title = document.querySelector( "[data-title]" ) +const subtitle = document.querySelector( "[data-subtitle]" ) + +let lastTime +const updateLoop = ( time ) => { + if ( lastTime == null ) { + lastTime = time + window.requestAnimationFrame( updateLoop ) + return + } + const delta = time - lastTime + updateBird( delta ) + updatePipes( delta ) + if ( checkLose() ) return handleLose() + lastTime = time + window.requestAnimationFrame( updateLoop ) +} + +const checkLose = () => { + const birdRect = getBirdRect() + const insidePipe = getPipeRects().some( rect => isCollision( birdRect, rect ) ) + const outsideWorld = birdRect.top < 0 || birdRect.bottom > window.innerHeight + return outsideWorld || insidePipe +} + +const isCollision = ( rect1, rect2 ) => { + return ( + rect1.left < rect2.right && + rect1.top < rect2.bottom && + rect1.right > rect2.left && + rect1.bottom > rect2.top + ) +} + +const handleStart = () => { + title.classList.add( "hide" ) + setupBird() + setupPipes() + lastTime = null + window.requestAnimationFrame( updateLoop ) +} + +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 } ) +}, 100 ) + +document.addEventListener( "keypress", handleStart, { once: true } ) \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..4642115 --- /dev/null +++ b/styles.css @@ -0,0 +1,67 @@ +*, *::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; +} + +.title { + z-index: 10; + position: absolute; + display: flex; + text-align: center; + justify-content: center; + align-items: center; + inset: 0; + margin: 0; + flex-direction: column; +} + +.subtitle { + margin-top: .5rem; +} + +.hide { + 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%; +} + +.pipe { + 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; +} + +.pipe > .top { + 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