1+ const canvas = document . getElementById ( "canvas" ) ;
2+ const ctx = canvas . getContext ( "2d" ) ;
3+ const canvasH = canvas . height ;
4+ const canvasW = canvas . width ;
5+ let scoreAudio = new Audio ( 'score.mp3' ) ;
6+ let hitAudio = new Audio ( 'hit.mp3' ) ;
7+ let paddlehit = new Audio ( 'paddlehit.mp3' ) ;
8+ let rightPressed = false ;
9+ let leftPressed = false ;
10+ let x ,
11+ y ,
12+ dy ,
13+ dx ,
14+ interval ,
15+ radius ,
16+ paddleW ,
17+ paddleX ,
18+ paddleY ,
19+ brickW ,
20+ brickH ,
21+ brickOffset ;
22+ let bricks = [ ] ;
23+ let score = 0 ;
24+ let brickCount = 14 ;
25+ let brickRows = 9 ;
26+ setVariables ( ) ;
27+ drawBall ( ) ;
28+ drawPaddle ( ) ;
29+ createBrickArray ( ) ;
30+ drawBricks ( ) ;
31+ drawScore ( ) ;
32+ paddleNavigation ( ) ;
33+ // startGame()
34+
35+ function drawScore ( ) {
36+ ctx . beginPath ( ) ;
37+ ctx . fillStyle = "#000" ;
38+ ctx . fill ( ) ;
39+ ctx . fillText ( "Score: " + score , 9 , 10 ) ;
40+ ctx . closePath ( ) ;
41+ }
42+ function createBrickArray ( ) {
43+ for ( let j = 0 ; j < brickRows ; j ++ ) {
44+ bricks [ j ] = [ ] ;
45+ for ( let i = 0 ; i < brickCount ; i ++ ) {
46+ bricks [ j ] [ i ] = { x : 0 , y : 0 , isVisible : true } ;
47+ }
48+ }
49+ }
50+
51+ function drawBricks ( ) {
52+ for ( let j = 0 ; j < brickRows ; j ++ ) {
53+ for ( let i = 0 ; i < brickCount ; i ++ ) {
54+ if ( bricks [ j ] [ i ] . isVisible ) {
55+ const brickX = 18 + i * ( brickW + brickOffset ) ;
56+ const brickY = ( 10 + brickOffset ) * ( j + 1 ) ;
57+ bricks [ j ] [ i ] . x = brickX ;
58+ bricks [ j ] [ i ] . y = brickY ;
59+ ctx . beginPath ( ) ;
60+ ctx . rect ( brickX , brickY , brickW , brickH ) ;
61+ ctx . fillStyle = "green" ;
62+ ctx . fill ( ) ;
63+ ctx . closePath ( ) ;
64+ }
65+ }
66+ }
67+ }
68+
69+ function paddleNavigation ( ) {
70+ document . addEventListener ( "keydown" , handleKeyDown ) ;
71+ document . addEventListener ( "keyup" , handleKeyUp ) ;
72+
73+ function handleKeyDown ( e ) {
74+ if ( e . key === "ArrowRight" ) {
75+ rightPressed = true ;
76+ }
77+ if ( e . key === "ArrowLeft" ) {
78+ leftPressed = true ;
79+ }
80+ }
81+
82+ function handleKeyUp ( e ) {
83+ if ( e . key === "ArrowRight" ) {
84+ rightPressed = false ;
85+ }
86+ if ( e . key === "ArrowLeft" ) {
87+ leftPressed = false ;
88+ }
89+ }
90+ }
91+
92+ function detectCollision ( ) {
93+ if ( x + dx >= canvasW || x + dx < 0 ) {
94+ dx = - dx ;
95+ }
96+
97+ if ( y + dy > canvasH - radius ) {
98+ if ( x + dx > paddleX && x + dx < paddleX + paddleW ) {
99+ paddlehit . play ( ) ;
100+ dy = - dy ;
101+ dx = dx + ( x + dx - paddleX ) / 100 ;
102+ }
103+ }
104+
105+ if ( y + dy < 0
106+ ) {
107+ dy = - dy ;
108+ }
109+
110+ for ( let b = 0 ; b < bricks . length ; b ++ ) {
111+ for ( let i = 0 ; i < bricks [ b ] . length ; i ++ ) {
112+ const brick = bricks [ b ] [ i ] ;
113+ if ( brick . isVisible ) {
114+ if (
115+ x > brick . x &&
116+ x < brick . x + brickW &&
117+ y > brick . y &&
118+ y < brick . y + brickH
119+ ) {
120+ bricks [ b ] [ i ] . isVisible = false ;
121+ score += 1 ;
122+ scoreAudio . play ( ) ;
123+ document . getElementById ( "score" ) . innerHTML = "Score: " + score ;
124+ dy = - dy ;
125+ checkYouWon ( ) ;
126+ }
127+ }
128+ }
129+ }
130+ }
131+
132+ function startGame ( ) {
133+ if ( ! interval ) {
134+ interval = setInterval ( ( ) => {
135+ if ( rightPressed ) {
136+ paddleX = paddleX + 6 ;
137+ }
138+ if ( leftPressed ) {
139+ paddleX = paddleX - 6 ;
140+ }
141+ detectCollision ( ) ;
142+ x = x + dx ;
143+ y = y + dy ;
144+ checkGameover ( ) ;
145+ ctx . clearRect ( 0 , 0 , canvasW , canvasH ) ;
146+ drawPaddle ( ) ;
147+ drawBall ( ) ;
148+ drawBricks ( ) ;
149+ drawScore ( ) ;
150+ } , 20 ) ;
151+ }
152+ }
153+
154+ function checkGameover ( ) {
155+ if ( y === canvasH ) {
156+ hitAudio . play ( ) ;
157+ alert ( "game over" ) ;
158+ clearInterval ( interval ) ;
159+ interval = null ;
160+ setVariables ( ) ;
161+ }
162+ }
163+
164+ function checkYouWon ( ) {
165+ if ( score === 126 ) {
166+ alert ( "You Won !!" ) ;
167+ clearInterval ( interval ) ;
168+ interval = null ;
169+ setVariables ( ) ;
170+ }
171+ }
172+
173+ function setVariables ( ) {
174+ x = canvasW / 2 ;
175+ y = canvasH - 40 ;
176+ dx = 5 ;
177+ dy = - 5 ;
178+ radius = 15 ;
179+ paddleW = 100 ;
180+ paddleX = canvasW / 2 - paddleW / 2 ;
181+ paddleY = canvasH - 25 ;
182+
183+ brickW = 40 ;
184+ brickH = 10 ;
185+ brickOffset = 8 ;
186+ }
187+
188+ function drawBall ( ) {
189+ ctx . beginPath ( ) ;
190+ ctx . arc ( x , y , radius , 0 , 2 * Math . PI , false ) ;
191+ ctx . fillStyle = "rgb(145, 216, 31)" ;
192+ ctx . fill ( ) ;
193+ ctx . closePath ( ) ;
194+ }
195+
196+ function drawPaddle ( ) {
197+ ctx . beginPath ( ) ;
198+ ctx . rect ( paddleX , paddleY , paddleW , 20 ) ;
199+ ctx . fillStyle = "rgb(58, 8, 45)" ;
200+ ctx . fill ( ) ;
201+ ctx . closePath ( ) ;
202+ }
0 commit comments