html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--
Sprites
https://github.com/sourabhv/FlapPyBird/tree/master/assets/sprites
Flappy Bird is originally made by GEARS Studio
-->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="game">
<div class="points">
<div><img src="https://github.com/sourabhv/FlapPyBird/blob/master/assets/sprites/0.png?raw=true"></div>
</div>
<div class="background"></div>
<div class="menu" id="menu">
<div class="align"></div>
<div class="menuButtons" id="menuButtons"></div>
</div>
<div class="gameOver" id="gameOver">
<div class="align"></div>
<div class="content">
<img src="https://github.com/sourabhv/FlapPyBird/blob/master/assets/sprites/gameover.png?raw=true">
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
user-select: none;
}
html, body {
height: 100%;
}
.game {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.background {
position: absolute;
height: 100%;
width: 100%;
font-size: 0px;
}
.background > div {
height: 100%;
width: 100%;
background-image: url(https://github.com/sourabhv/FlapPyBird/blob/master/assets/sprites/background-day.png?raw=true);
background-size: 100% 100%;
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var menuButtons;
var background;
var backgroundWidth;
var bgImages;
var movementPos;
var pipes;
var started;
var pipeMin = -85; //Up
var pipeMax = -35; //Down
var pipeGap;
var speed; //ms
var offset;
var player;
var gravityAcc;
var gravityOn;
var gravitySpeed;
var jumpSpeed;
var curJumpSpeed
BROWSER
Console
Run