<!
DOCTYPEht
ml>
<ht
mll
ang="
en"
>
<head>
<met
achar
set
="UTF-
8">
<met
aname="
viewpor
t"cont
ent
="wi
dth=dev
ice-
widt
h,i
nit
ial
-scal
e=1.
0">
<t
it
le>Fl
appyBi
rd</
ti
tl
e>
<st
yle>
body{
mar
gin:
0;
paddi
ng:
0;
di
spl
ay:
flex;
j
ust
if
y-cont
ent
:cent
er;
al
i
gn-
it
ems:
cent
er;
hei
ght
:100v
h;
backgr
ound-
col
or:
#70c5ce;
f
ont
-f
ami
l
y:Ar
ial
,sans-
ser
if
;
ov
erf
low:
hidden;
#game-
cont
ainer{
posi
ti
on:
rel
ati
ve;
wi
dth:
400px;
hei
ght
:600px;
backgr
ound-
col
or:
#70c5ce;
ov
erf
low:
hidden;
bor
der
:2pxsol
i
d#000;
#bi
rd{
posi
ti
on:
absol
ute;
wi
dth:
40px;
hei
ght
:30px;
backgr
ound-
col
or:
#ff
cc00;
bor
der
-r
adi
us:
50%50%50%50%/60%60%40%40%;
l
eft
:50px;
t
op:
300px;
z-
index:
10;
.
pipe{
posi
ti
on:
absol
ute;
wi
dth:
60px;
backgr
ound-
col
or:
#5cb85c;
bor
der
:2pxsol
i
d#4cae4c;
r
ight
:-60px;
.
pipe-
top{
t
op:
0;
bor
der
-bot
tom:
none;
bor
der
-r
adi
us:
5px5px00;
.
pipe-
bot
tom {
bot
tom:
0;
bor
der
-t
op:
none;
bor
der
-r
adi
us:
005px5px;
#scor
e{
posi
ti
on:
absol
ute;
t
op:
20px;
l
eft
:20px;
f
ont
-si
ze:
24px;
f
ont
-wei
ght
:bol
d;
col
or:
whi
te;
t
ext
-shadow:
2px2px4pxr
gba(
0,0,
0,0.
5);
z-
index:
100;
#game-
over{
posi
ti
on:
absol
ute;
t
op:
50%;
l
eft
:50%;
t
ransf
orm:
transl
ate(
-50%,
-50%)
;
backgr
ound-
col
or:
rgba(
0,0,
0,0.
7);
col
or:
whi
te;
paddi
ng:
20px;
bor
der
-r
adi
us:
10px;
t
ext
-al
i
gn:
cent
er;
di
spl
ay:
none;
z-
index:
200;
#r
est
art
-bt
n{
mar
gin-
top:
15px;
paddi
ng:
10px20px;
backgr
ound-
col
or:
#5cb85c;
bor
der
:none;
bor
der
-r
adi
us:
5px;
col
or:
whi
te;
f
ont
-wei
ght
:bol
d;
cur
sor
:poi
nter
;
#r
est
art
-bt
n:hov
er{
backgr
ound-
col
or:
#4cae4c;
</
sty
le>
</
head>
<body
>
<di
vid="
game-
cont
ainer
">
<di
vid="
bir
d"></
div
>
<di
vid="
scor
e">0</
div
>
<di
vid="
game-
over
">
<h2>GameOv
er!
</h2>
<p>Yourscor
e:<spani
d="
fi
nal
-scor
e">0</
span></
p>
<but
toni
d="
rest
art
-bt
n">Pl
ayAgai
n</
but
ton>
</
div
>
</
div
>
<scr
ipt
>
/
/Gamev
ari
abl
es
constbi
rd=document
.get
Element
ByI
d('
bi
rd'
);
constgameCont
ainer=document
.get
Element
ByI
d('
game-
cont
ainer
')
;
constscor
eDi
spl
ay=document
.get
Element
ByI
d('
scor
e')
;
constgameOv
erDi
spl
ay=document
.get
Element
ByI
d('
game-
over
')
;
constf
inal
Scor
eDi
spl
ay=document
.get
Element
ByI
d('
fi
nal
-scor
e')
;
constr
est
art
Btn=document
.get
Element
ByI
d('
rest
art
-bt
n')
;
l
etbi
rdPosi
ti
on=300;
l
etbi
rdVel
oci
ty=0;
l
etgr
avi
ty=0.
5;
l
etgameRunni
ng=t
rue;
l
etscor
e=0;
l
etpi
pes=[
];
l
etpi
peGap=150;
l
etpi
peFr
equency=1500;
//mi
l
li
seconds
l
etl
ast
PipeTi
me=0;
l
etgameSpeed=2;
/
/Gamedi
mensi
ons
constgameHei
ght=gameCont
ainer
.of
fset
Hei
ght
;
constgameWi
dth=gameCont
ainer
.of
fset
Widt
h;
/
/Ini
ti
ali
zebi
rdposi
ti
on
bi
rd.
sty
le.
top=bi
rdPosi
ti
on+'
px'
;
/
/Jumpf
unct
ion
f
unct
ionj
ump(
){
i
f(!
gameRunni
ng)r
etur
n;
bi
rdVel
oci
ty=-
10;
/
/Ev
entl
i
stener
s
document
.addEv
ent
List
ener
('
key
down'
,f
unct
ion(
e){
i
f(e.
code==='
Space'
){
j
ump(
);
}
);
gameCont
ainer
.addEv
ent
List
ener
('
cl
ick'
,f
unct
ion(
){
j
ump(
);
}
);
r
est
art
Btn.
addEv
ent
List
ener
('
cl
ick'
,r
est
art
Game)
;
/
/Gamel
oop
f
unct
iongameLoop(
ti
mest
amp){
i
f(!
gameRunni
ng)r
etur
n;
/
/Updat
ebi
rdposi
ti
on
bi
rdVel
oci
ty+=gr
avi
ty;
bi
rdPosi
ti
on+=bi
rdVel
oci
ty;
bi
rd.
sty
le.
top=bi
rdPosi
ti
on+'
px'
;
/
/Checkf
orcol
l
isi
onswi
thgr
oundorcei
l
ing
i
f(bi
rdPosi
ti
on<=0|
|bi
rdPosi
ti
on>=gameHei
ght-bi
rd.
off
set
Hei
ght
){
endGame(
);
r
etur
n;
/
/Gener
atenewpi
pes
i
f(t
imest
amp-l
ast
PipeTi
me>pi
peFr
equency
){
cr
eat
ePi
pe(
);
l
ast
PipeTi
me=t
imest
amp;
/
/Mov
epi
pesandcheckf
orcol
l
isi
ons
mov
ePi
pes(
);
r
equest
Ani
mat
ionFr
ame(
gameLoop)
;
/
/Cr
eat
eanewpi
pe
f
unct
ioncr
eat
ePi
pe(
){
constmi
nHei
ght=50;
constmaxHei
ght=gameHei
ght-pi
peGap-mi
nHei
ght
;
constt
opHei
ght=Mat
h.f
loor
(Mat
h.r
andom(
)*(
maxHei
ght-mi
nHei
ght+1)
)+mi
nHei
ght
;
constt
opPi
pe=document
.cr
eat
eEl
ement
('
di
v'
);
t
opPi
pe.
className='
pi
pepi
pe-
top'
;
t
opPi
pe.
sty
le.
hei
ght=t
opHei
ght+'
px'
;
t
opPi
pe.
sty
le.
ri
ght='
0px'
;
constbot
tomPi
pe=document
.cr
eat
eEl
ement
('
di
v'
);
bot
tomPi
pe.
className='
pi
pepi
pe-
bot
tom'
;
bot
tomPi
pe.
sty
le.
hei
ght=(
gameHei
ght-t
opHei
ght-pi
peGap)+'
px'
;
bot
tomPi
pe.
sty
le.
ri
ght='
0px'
;
gameCont
ainer
.appendChi
l
d(t
opPi
pe)
;
gameCont
ainer
.appendChi
l
d(bot
tomPi
pe)
;
pi
pes.
push(
{
t
op:
topPi
pe,
bot
tom:
bot
tomPi
pe,
passed:
fal
se,
x:
gameWi
dth
}
);
/
/Mov
eal
lpi
pes
f
unct
ionmov
ePi
pes(
){
f
or(
leti
=0;
i<pi
pes.
lengt
h;i
++){
constpi
pe=pi
pes[
i]
;
pi
pe.
x-=gameSpeed;
pi
pe.
top.
sty
le.
ri
ght=(
gameWi
dth-pi
pe.
x)+'
px'
;
pi
pe.
bot
tom.
sty
le.
ri
ght=(
gameWi
dth-pi
pe.
x)+'
px'
;
/
/Checkf
orcol
l
isi
onwi
thbi
rd
i
f(
(
bir
dPosi
ti
on<pi
pe.
top.
off
set
Hei
ght|
|
bi
rdPosi
ti
on>gameHei
ght-pi
pe.
bot
tom.
off
set
Hei
ght-bi
rd.
off
set
Hei
ght
)&&
pi
pe.
x<50+bi
rd.
off
set
Widt
h&&
pi
pe.
x>50-60
){
endGame(
);
r
etur
n;
/
/Checki
fbi
rdpassedt
hepi
pe
i
f(!
pipe.
passed&&pi
pe.
x<50-60){
pi
pe.
passed=t
rue;
scor
e++;
scor
eDi
spl
ay.
text
Cont
ent=scor
e;
/
/Remov
epi
pest
hatar
eof
fscr
een
i
f(pi
pe.
x<-
60){
gameCont
ainer
.r
emov
eChi
l
d(pi
pe.
top)
;
gameCont
ainer
.r
emov
eChi
l
d(pi
pe.
bot
tom)
;
pi
pes.
spl
i
ce(
i,1)
;
i
--
;
/
/Endt
hegame
f
unct
ionendGame(
){
gameRunni
ng=f
alse;
f
inal
Scor
eDi
spl
ay.
text
Cont
ent=scor
e;
gameOv
erDi
spl
ay.
sty
le.
displ
ay='
bl
ock'
;
/
/Rest
artt
hegame
f
unct
ionr
est
art
Game(
){
/
/Resetbi
rd
bi
rdPosi
ti
on=300;
bi
rdVel
oci
ty=0;
bi
rd.
sty
le.
top=bi
rdPosi
ti
on+'
px'
;
/
/Cl
earpi
pes
pi
pes.
for
Each(
pipe=>{
gameCont
ainer
.r
emov
eChi
l
d(pi
pe.
top)
;
gameCont
ainer
.r
emov
eChi
l
d(pi
pe.
bot
tom)
;
}
);
pi
pes=[
];
/
/Resetscor
e
scor
e=0;
scor
eDi
spl
ay.
text
Cont
ent=scor
e;
/
/Hi
degameov
erdi
spl
ay
gameOv
erDi
spl
ay.
sty
le.
displ
ay='
none'
;
/
/St
artgame
gameRunni
ng=t
rue;
l
ast
PipeTi
me=per
for
mance.
now(
);
r
equest
Ani
mat
ionFr
ame(
gameLoop)
;
/
/St
artt
hegame
r
equest
Ani
mat
ionFr
ame(
gameLoop)
;
</
scr
ipt
>
</
body
>
</
html
>