-
Notifications
You must be signed in to change notification settings - Fork 0
/
flappyBird.js
107 lines (69 loc) · 1.93 KB
/
flappyBird.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");
// load images
var bird = new Image();
var bg = new Image();
var fg = new Image();
var pipeNorth = new Image();
var pipeSouth = new Image();
bird.src = "images/bird.png";
bg.src = "images/bg.png";
fg.src = "images/fg.png";
pipeNorth.src = "images/pipeNorth.png";
pipeSouth.src = "images/pipeSouth.png";
// some variables
var gap = 85;
var constant;
var bX = 10;
var bY = 150;
var gravity = 1.5;
var score = 0;
// audio files
var fly = new Audio();
var scor = new Audio();
fly.src = "sounds/fly.mp3";
scor.src = "sounds/score.mp3";
// on key down
document.addEventListener("keydown", moveUp);
function moveUp() {
bY -= 25;
fly.play();
}
// pipe coordinates
var pipe = [];
pipe[0] = {
x: cvs.width,
y: 0
};
// draw images
function draw() {
ctx.drawImage(bg, 0, 0);
for (var i = 0; i < pipe.length; i++) {
constant = pipeNorth.height + gap;
ctx.drawImage(pipeNorth, pipe[i].x, pipe[i].y);
ctx.drawImage(pipeSouth, pipe[i].x, pipe[i].y + constant);
pipe[i].x--;
if (pipe[i].x == 125) {
pipe.push({
x: cvs.width,
y: Math.floor(Math.random() * pipeNorth.height) - pipeNorth.height
});
}
// detect collision
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) {
location.reload(); // reload the page
}
if (pipe[i].x == 5) {
score++;
scor.play();
}
}
ctx.drawImage(fg, 0, cvs.height - fg.height);
ctx.drawImage(bird, bX, bY);
bY += gravity;
ctx.fillStyle = "#000";
ctx.font = "20px Verdana";
ctx.fillText("Score : " + score, 10, cvs.height - 20);
requestAnimationFrame(draw);
}
draw();