first commit
This commit is contained in:
henry-hiles
commit
e5f9c2ea99
9 changed files with 259 additions and 0 deletions
30
bird.js
Normal file
30
bird.js
Normal file
|
|
@ -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()
|
||||
BIN
images/background.png
Normal file
BIN
images/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
images/bird.png
Normal file
BIN
images/bird.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
images/bottomPipe.png
Normal file
BIN
images/bottomPipe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
images/topPipe.png
Normal file
BIN
images/topPipe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
21
index.html
Normal file
21
index.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="script.js" type="module"></script>
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1 class="title" data-title>
|
||||
Press Any Key To Start
|
||||
<small data-subtitle class="subtitle hide"></small>
|
||||
</h1>
|
||||
<img data-bird src="images/bird.png" class="bird"></img>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
81
pipe.js
Normal file
81
pipe.js
Normal file
|
|
@ -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() )
|
||||
60
script.js
Normal file
60
script.js
Normal file
|
|
@ -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()}<br />Highscore: ${highscore}`
|
||||
document.addEventListener( "keypress", handleStart, { once: true } )
|
||||
}, 100 )
|
||||
|
||||
document.addEventListener( "keypress", handleStart, { once: true } )
|
||||
67
styles.css
Normal file
67
styles.css
Normal file
|
|
@ -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);
|
||||
}
|
||||
Reference in a new issue