1
+ // Variable Bank
2
+ let move_speed = 3 ; // Change moving speed of bird
3
+ let gravity = 0.5 ; // Change gravity
4
+ let bird = document . querySelector ( '.bird' ) ;
5
+ let img = document . getElementById ( 'bird-1' ) ;
6
+
7
+ // Getting bird element properties
8
+ let bird_props = bird . getBoundingClientRect ( ) ;
9
+ let background = document . querySelector ( '.background' ) . getBoundingClientRect ( ) ;
10
+ let score_val = document . querySelector ( '.score_val' ) ;
11
+ let message = document . querySelector ( '.message' ) ;
12
+ let score_title = document . querySelector ( '.score_title' ) ;
13
+
14
+ // Start Screen
15
+ let game_state = 'Start' ;
16
+ img . style . display = 'none' ;
17
+ message . classList . add ( 'messageStyle' ) ;
18
+
19
+ function fly ( ) {
20
+ img . src = 'assets/Bird.png' ;
21
+ bird_dy = - 7.6 ;
22
+ }
23
+
24
+ function flyHandler ( e ) {
25
+ if ( game_state === 'Play' ) {
26
+ fly ( ) ;
27
+ }
28
+ }
29
+
30
+ function startGame ( ) {
31
+ if ( game_state !== 'Play' ) {
32
+ document . querySelectorAll ( '.pipe_sprite' ) . forEach ( ( e ) => {
33
+ e . remove ( ) ;
34
+ } ) ;
35
+ img . style . display = 'block' ;
36
+ bird . style . top = '40vh' ;
37
+ bird . style . left = '10vw' ;
38
+ game_state = 'Play' ;
39
+ message . innerHTML = '' ;
40
+ score_title . innerHTML = 'Score : ' ;
41
+ score_val . innerHTML = '0' ;
42
+ message . classList . remove ( 'messageStyle' ) ;
43
+ play ( ) ;
44
+ create_pipe ( ) ;
45
+ }
46
+ }
47
+
48
+ function play ( ) {
49
+ bird_dy = 0 ;
50
+ bird_props = bird . getBoundingClientRect ( ) ;
51
+
52
+ function move ( ) {
53
+ if ( game_state !== 'Play' ) return ;
54
+
55
+ let pipe_sprite = document . querySelectorAll ( '.pipe_sprite' ) ;
56
+ pipe_sprite . forEach ( ( element ) => {
57
+ let pipe_sprite_props = element . getBoundingClientRect ( ) ;
58
+ bird_props = bird . getBoundingClientRect ( ) ;
59
+
60
+ if ( pipe_sprite_props . right <= 0 ) {
61
+ element . remove ( ) ;
62
+ } else {
63
+ if (
64
+ bird_props . left < pipe_sprite_props . left + pipe_sprite_props . width &&
65
+ bird_props . left + bird_props . width > pipe_sprite_props . left &&
66
+ bird_props . top < pipe_sprite_props . top + pipe_sprite_props . height &&
67
+ bird_props . top + bird_props . height > pipe_sprite_props . top
68
+ ) {
69
+ endGame ( ) ;
70
+ return ;
71
+ } else {
72
+ if (
73
+ pipe_sprite_props . right < bird_props . left &&
74
+ pipe_sprite_props . right + move_speed >= bird_props . left &&
75
+ element . increase_score === '1'
76
+ ) {
77
+ score_val . innerHTML = parseInt ( score_val . innerHTML ) + 1 ;
78
+ element . increase_score = '0' ;
79
+ }
80
+ element . style . left = pipe_sprite_props . left - move_speed + 'px' ;
81
+ }
82
+ }
83
+ } ) ;
84
+ requestAnimationFrame ( move ) ;
85
+ }
86
+ requestAnimationFrame ( move ) ;
87
+
88
+ function apply_gravity ( ) {
89
+ if ( game_state !== 'Play' ) return ;
90
+ bird_dy += gravity ;
91
+
92
+ if ( bird_props . top <= 0 || bird_props . bottom >= background . bottom ) {
93
+ endGame ( ) ;
94
+ return ;
95
+ }
96
+ bird . style . top = bird_props . top + bird_dy + 'px' ;
97
+ bird_props = bird . getBoundingClientRect ( ) ;
98
+ requestAnimationFrame ( apply_gravity ) ;
99
+ }
100
+ requestAnimationFrame ( apply_gravity ) ;
101
+
102
+ let pipe_separation = 0 ;
103
+ let pipe_gap = 40 ; // Change gap between pipes
104
+ let initial_pipe_delay = 0 ; // Change delay before the first pipe appears
105
+
106
+ function create_pipe ( ) {
107
+ if ( game_state !== 'Play' ) return ;
108
+
109
+ if ( initial_pipe_delay > 0 ) {
110
+ initial_pipe_delay -- ;
111
+ requestAnimationFrame ( create_pipe ) ;
112
+ return ;
113
+ }
114
+
115
+ if ( pipe_separation > 110 ) {
116
+ pipe_separation = 0 ;
117
+
118
+ let pipe_posi = Math . floor ( Math . random ( ) * 43 ) + 8 ;
119
+ let pipe_sprite_inv = document . createElement ( 'div' ) ;
120
+ pipe_sprite_inv . className = 'pipe_sprite' ;
121
+ pipe_sprite_inv . style . top = pipe_posi - 70 + 'vh' ;
122
+ pipe_sprite_inv . style . left = '100vw' ;
123
+
124
+ document . body . appendChild ( pipe_sprite_inv ) ;
125
+ let pipe_sprite = document . createElement ( 'div' ) ;
126
+ pipe_sprite . className = 'pipe_sprite' ;
127
+ pipe_sprite . style . top = pipe_posi + pipe_gap + 'vh' ;
128
+ pipe_sprite . style . left = '100vw' ;
129
+ pipe_sprite . increase_score = '1' ;
130
+
131
+ document . body . appendChild ( pipe_sprite ) ;
132
+ }
133
+ pipe_separation ++ ;
134
+ requestAnimationFrame ( create_pipe ) ;
135
+ }
136
+ requestAnimationFrame ( create_pipe ) ;
137
+ }
138
+
139
+ function endGame ( ) {
140
+ game_state = 'End' ;
141
+ message . innerHTML = 'Game Over' . fontcolor ( 'red' ) + '<br> Press Any Key to Restart' ;
142
+ message . classList . add ( 'messageStyle' ) ;
143
+ img . style . display = 'none'
144
+ }
145
+
146
+ function resetGame ( ) {
147
+ document . querySelectorAll ( '.pipe_sprite' ) . forEach ( ( e ) => e . remove ( ) ) ;
148
+ bird . style . top = '40vh' ;
149
+ bird . style . left = '10vw' ;
150
+ bird_dy = 0 ;
151
+ img . style . display = 'block' ;
152
+ img . style . display = 'none' ;
153
+ game_state = 'Start' ;
154
+ }
155
+
156
+ document . addEventListener ( 'keydown' , ( e ) => {
157
+ if ( game_state === 'Start' || game_state === 'End' ) {
158
+ resetGame ( ) ;
159
+ startGame ( ) ;
160
+ }
161
+ if ( game_state === 'Play' ) {
162
+ flyHandler ( e ) ;
163
+ }
164
+ } ) ;
165
+
166
+ document . addEventListener ( 'mousedown' , ( e ) => {
167
+ if ( e . button === 0 ) {
168
+ if ( game_state === 'Start' || game_state === 'End' ) {
169
+ resetGame ( ) ;
170
+ startGame ( ) ;
171
+ }
172
+ if ( game_state === 'Play' ) {
173
+ flyHandler ( e ) ;
174
+ }
175
+ }
176
+ } ) ;
177
+
178
+ document . addEventListener ( 'touchstart' , ( e ) => {
179
+ if ( game_state === 'Start' || game_state === 'End' ) {
180
+ resetGame ( ) ;
181
+ startGame ( ) ;
182
+ }
183
+ if ( game_state === 'Play' ) {
184
+ flyHandler ( e ) ;
185
+ }
186
+ } ) ;
187
+
188
+ document . addEventListener ( 'touchend' , ( e ) => {
189
+ } ) ;
190
+
191
+ document . addEventListener ( 'orientationchange' , ( ) => {
192
+ } ) ;
193
+
194
+ let lastTouchEnd = 0 ;
195
+ document . addEventListener ( 'touchend' , ( e ) => {
196
+ let now = new Date ( ) . getTime ( ) ;
197
+ if ( now - lastTouchEnd <= 300 ) {
198
+ e . preventDefault ( ) ;
199
+ }
200
+ lastTouchEnd = now ;
201
+ } , false ) ;
202
+
203
+ function adjustPipeGap ( ) {
204
+ if ( window . innerWidth <= 600 ) { // Mobile view
205
+ pipe_gap = 8 ; // Decrease gap between pipes for mobile
206
+ } else {
207
+ pipe_gap = 40 ; // Default gap for larger screens
208
+ }
209
+ }
210
+
211
+ window . addEventListener ( 'load' , adjustPipeGap ) ;
212
+ window . addEventListener ( 'resize' , adjustPipeGap ) ;
0 commit comments