Skip to content

Commit 3f6bf40

Browse files
CodeExplainedRepoCodeExplainedRepo
authored
Add files via upload
1 parent 13f13b1 commit 3f6bf40

File tree

10 files changed

+144
-0
lines changed

10 files changed

+144
-0
lines changed

‎flappyBird - starter Template.rar‎

87.4 KB
Binary file not shown.

‎flappyBird.js‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
var cvs = document.getElementById("canvas");
2+
var ctx = cvs.getContext("2d");
3+
4+
// load images
5+
6+
var bird = new Image();
7+
var bg = new Image();
8+
var fg = new Image();
9+
var pipeNorth = new Image();
10+
var pipeSouth = new Image();
11+
12+
bird.src = "images/bird.png";
13+
bg.src = "images/bg.png";
14+
fg.src = "images/fg.png";
15+
pipeNorth.src = "images/pipeNorth.png";
16+
pipeSouth.src = "images/pipeSouth.png";
17+
18+
19+
// some variables
20+
21+
var gap = 85;
22+
var constant;
23+
24+
var bX = 10;
25+
var bY = 150;
26+
27+
var gravity = 1.5;
28+
29+
var score = 0;
30+
31+
// audio files
32+
33+
var fly = new Audio();
34+
var scor = new Audio();
35+
36+
fly.src = "sounds/fly.mp3";
37+
scor.src = "sounds/score.mp3";
38+
39+
// on key down
40+
41+
document.addEventListener("keydown",moveUp);
42+
43+
function moveUp(){
44+
bY -= 25;
45+
fly.play();
46+
}
47+
48+
// pipe coordinates
49+
50+
var pipe = [];
51+
52+
pipe[0] = {
53+
x : cvs.width,
54+
y : 0
55+
};
56+
57+
// draw images
58+
59+
function draw(){
60+
61+
ctx.drawImage(bg,0,0);
62+
63+
64+
for(var i = 0; i < pipe.length; i++){
65+
66+
constant = pipeNorth.height+gap;
67+
ctx.drawImage(pipeNorth,pipe[i].x,pipe[i].y);
68+
ctx.drawImage(pipeSouth,pipe[i].x,pipe[i].y+constant);
69+
70+
pipe[i].x--;
71+
72+
if( pipe[i].x == 125 ){
73+
pipe.push({
74+
x : cvs.width,
75+
y : Math.floor(Math.random()*pipeNorth.height)-pipeNorth.height
76+
});
77+
}
78+
79+
// detect collision
80+
81+
if( bX + bird.width >= pipe[i].x && bX <= pipe[i].x + pipeNorth.width && (bY <= pipe[i].y + pipeNorth.height || bY+bird.height >= pipe[i].y+constant) || bY + bird.height >= cvs.height - fg.height){
82+
location.reload(); // reload the page
83+
}
84+
85+
if(pipe[i].x == 5){
86+
score++;
87+
scor.play();
88+
}
89+
90+
91+
}
92+
93+
ctx.drawImage(fg,0,cvs.height - fg.height);
94+
95+
ctx.drawImage(bird,bX,bY);
96+
97+
bY += gravity;
98+
99+
ctx.fillStyle = "#000";
100+
ctx.font = "20px Verdana";
101+
ctx.fillText("Score : "+score,10,cvs.height-20);
102+
103+
requestAnimationFrame(draw);
104+
105+
}
106+
107+
draw();
108+
109+
110+
111+
112+
113+
114+
115+
116+
117+
118+
119+
120+
121+
122+
123+
124+
125+
126+
127+
128+
129+
130+
131+

‎images/bg.png‎

48.8 KB
Loading

‎images/bird.png‎

17 KB
Loading

‎images/fg.png‎

22.3 KB
Loading

‎images/pipeNorth.png‎

23.4 KB
Loading

‎images/pipeSouth.png‎

23.9 KB
Loading

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Flappy Bird using JS | by learnWD</title>
5+
</head>
6+
<body>
7+
<h3>flappyBird by LearnWD</h3>
8+
9+
<canvas id="canvas" width="288" height="512"></canvas>
10+
11+
<script src="flappyBird.js"></script>
12+
</body>
13+
</html>

‎sounds/fly.mp3‎

5.75 KB
Binary file not shown.

‎sounds/score.mp3‎

16.4 KB
Binary file not shown.

0 commit comments

Comments
 (0)