├── 2D Breakout Game JavaScript - FULL GAME ├── components.js ├── game.js ├── img │ ├── SOUND_OFF.png │ ├── SOUND_ON.png │ ├── bg.jpg │ ├── bg1.jpg │ ├── gameover.png │ ├── level.png │ ├── life.png │ ├── score.png │ └── youwon.png ├── index.html └── sounds │ ├── brick_hit.mp3 │ ├── life_lost.mp3 │ ├── paddle_hit.mp3 │ ├── wall.mp3 │ └── win.mp3 ├── 2D Breakout Game JavaScript - PART 1 - Starter Template files ├── components.js ├── game.js ├── img │ ├── SOUND_OFF.png │ ├── SOUND_ON.png │ ├── bg.jpg │ ├── bg1.jpg │ ├── level.png │ ├── life.png │ └── score.png ├── index.html └── sounds │ ├── brick_hit.mp3 │ ├── life_lost.mp3 │ ├── paddle_hit.mp3 │ ├── wall.mp3 │ └── win.mp3 ├── 2D Breakout Game JavaScript - PART 2 - Starter Template files ├── components.js ├── game.js ├── img │ ├── SOUND_OFF.png │ ├── SOUND_ON.png │ ├── bg.jpg │ ├── bg1.jpg │ ├── level.png │ ├── life.png │ └── score.png ├── index.html └── sounds │ ├── brick_hit.mp3 │ ├── life_lost.mp3 │ ├── paddle_hit.mp3 │ ├── wall.mp3 │ └── win.mp3 └── README.md /2D Breakout Game JavaScript - FULL GAME/components.js: -------------------------------------------------------------------------------- 1 | /////// LOAD IMAGES //////// 2 | 3 | // LOAD BG IMAGE 4 | const BG_IMG = new Image(); 5 | BG_IMG.src = "img/bg.jpg"; 6 | 7 | const LEVEL_IMG = new Image(); 8 | LEVEL_IMG.src = "img/level.png"; 9 | 10 | const LIFE_IMG = new Image(); 11 | LIFE_IMG.src = "img/life.png"; 12 | 13 | const SCORE_IMG = new Image(); 14 | SCORE_IMG.src = "img/score.png"; 15 | 16 | 17 | /////// END LOAD IMAGES //////// 18 | 19 | // ************************ // 20 | 21 | /////// LOAD SOUNDS //////// 22 | 23 | const WALL_HIT = new Audio(); 24 | WALL_HIT.src = "sounds/wall.mp3"; 25 | 26 | const LIFE_LOST = new Audio(); 27 | LIFE_LOST.src = "sounds/life_lost.mp3"; 28 | 29 | const PADDLE_HIT = new Audio(); 30 | PADDLE_HIT.src = "sounds/paddle_hit.mp3"; 31 | 32 | const WIN = new Audio(); 33 | WIN.src = "sounds/win.mp3"; 34 | 35 | const BRICK_HIT = new Audio(); 36 | BRICK_HIT.src = "sounds/brick_hit.mp3"; 37 | 38 | 39 | /////// END LOAD SOUNDS //////// 40 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/game.js: -------------------------------------------------------------------------------- 1 | // SELECT CANVAS ELEMENT 2 | const cvs = document.getElementById("breakout"); 3 | const ctx = cvs.getContext("2d"); 4 | 5 | // ADD BORDER TO CANVAS 6 | cvs.style.border = "1px solid #0ff"; 7 | 8 | // MAKE LINE THIK WHEN DRAWING TO CANVAS 9 | ctx.lineWidth = 3; 10 | 11 | // GAME VARIABLES AND CONSTANTS 12 | const PADDLE_WIDTH = 100; 13 | const PADDLE_MARGIN_BOTTOM = 50; 14 | const PADDLE_HEIGHT = 20; 15 | const BALL_RADIUS = 8; 16 | let LIFE = 3; // PLAYER HAS 3 LIVES 17 | let SCORE = 0; 18 | const SCORE_UNIT = 10; 19 | let LEVEL = 1; 20 | const MAX_LEVEL = 3; 21 | let GAME_OVER = false; 22 | let leftArrow = false; 23 | let rightArrow = false; 24 | 25 | // CREATE THE PADDLE 26 | const paddle = { 27 | x : cvs.width/2 - PADDLE_WIDTH/2, 28 | y : cvs.height - PADDLE_MARGIN_BOTTOM - PADDLE_HEIGHT, 29 | width : PADDLE_WIDTH, 30 | height : PADDLE_HEIGHT, 31 | dx :5 32 | } 33 | 34 | // DRAW PADDLE 35 | function drawPaddle(){ 36 | ctx.fillStyle = "#2e3548"; 37 | ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height); 38 | 39 | ctx.strokeStyle = "#ffcd05"; 40 | ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height); 41 | } 42 | 43 | // CONTROL THE PADDLE 44 | document.addEventListener("keydown", function(event){ 45 | if(event.keyCode == 37){ 46 | leftArrow = true; 47 | }else if(event.keyCode == 39){ 48 | rightArrow = true; 49 | } 50 | }); 51 | document.addEventListener("keyup", function(event){ 52 | if(event.keyCode == 37){ 53 | leftArrow = false; 54 | }else if(event.keyCode == 39){ 55 | rightArrow = false; 56 | } 57 | }); 58 | 59 | // MOVE PADDLE 60 | function movePaddle(){ 61 | if(rightArrow && paddle.x + paddle.width < cvs.width){ 62 | paddle.x += paddle.dx; 63 | }else if(leftArrow && paddle.x > 0){ 64 | paddle.x -= paddle.dx; 65 | } 66 | } 67 | 68 | // CREATE THE BALL 69 | const ball = { 70 | x : cvs.width/2, 71 | y : paddle.y - BALL_RADIUS, 72 | radius : BALL_RADIUS, 73 | speed : 4, 74 | dx : 3 * (Math.random() * 2 - 1), 75 | dy : -3 76 | } 77 | 78 | // DRAW THE BALL 79 | function drawBall(){ 80 | ctx.beginPath(); 81 | 82 | ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); 83 | ctx.fillStyle = "#ffcd05"; 84 | ctx.fill(); 85 | 86 | ctx.strokeStyle = "#2e3548"; 87 | ctx.stroke(); 88 | 89 | ctx.closePath(); 90 | } 91 | 92 | // MOVE THE BALL 93 | function moveBall(){ 94 | ball.x += ball.dx; 95 | ball.y += ball.dy; 96 | } 97 | 98 | // BALL AND WALL COLLISION DETECTION 99 | function ballWallCollision(){ 100 | if(ball.x + ball.radius > cvs.width || ball.x - ball.radius < 0){ 101 | ball.dx = - ball.dx; 102 | WALL_HIT.play(); 103 | } 104 | 105 | if(ball.y - ball.radius < 0){ 106 | ball.dy = -ball.dy; 107 | WALL_HIT.play(); 108 | } 109 | 110 | if(ball.y + ball.radius > cvs.height){ 111 | LIFE--; // LOSE LIFE 112 | LIFE_LOST.play(); 113 | resetBall(); 114 | } 115 | } 116 | 117 | // RESET THE BALL 118 | function resetBall(){ 119 | ball.x = cvs.width/2; 120 | ball.y = paddle.y - BALL_RADIUS; 121 | ball.dx = 3 * (Math.random() * 2 - 1); 122 | ball.dy = -3; 123 | } 124 | 125 | // BALL AND PADDLE COLLISION 126 | function ballPaddleCollision(){ 127 | if(ball.x < paddle.x + paddle.width && ball.x > paddle.x && paddle.y < paddle.y + paddle.height && ball.y > paddle.y){ 128 | 129 | // PLAY SOUND 130 | PADDLE_HIT.play(); 131 | 132 | // CHECK WHERE THE BALL HIT THE PADDLE 133 | let collidePoint = ball.x - (paddle.x + paddle.width/2); 134 | 135 | // NORMALIZE THE VALUES 136 | collidePoint = collidePoint / (paddle.width/2); 137 | 138 | // CALCULATE THE ANGLE OF THE BALL 139 | let angle = collidePoint * Math.PI/3; 140 | 141 | 142 | ball.dx = ball.speed * Math.sin(angle); 143 | ball.dy = - ball.speed * Math.cos(angle); 144 | } 145 | } 146 | 147 | // CREATE THE BRICKS 148 | const brick = { 149 | row : 1, 150 | column : 5, 151 | width : 55, 152 | height : 20, 153 | offSetLeft : 20, 154 | offSetTop : 20, 155 | marginTop : 40, 156 | fillColor : "#2e3548", 157 | strokeColor : "#FFF" 158 | } 159 | 160 | let bricks = []; 161 | 162 | function createBricks(){ 163 | for(let r = 0; r < brick.row; r++){ 164 | bricks[r] = []; 165 | for(let c = 0; c < brick.column; c++){ 166 | bricks[r][c] = { 167 | x : c * ( brick.offSetLeft + brick.width ) + brick.offSetLeft, 168 | y : r * ( brick.offSetTop + brick.height ) + brick.offSetTop + brick.marginTop, 169 | status : true 170 | } 171 | } 172 | } 173 | } 174 | 175 | createBricks(); 176 | 177 | // draw the bricks 178 | function drawBricks(){ 179 | for(let r = 0; r < brick.row; r++){ 180 | for(let c = 0; c < brick.column; c++){ 181 | let b = bricks[r][c]; 182 | // if the brick isn't broken 183 | if(b.status){ 184 | ctx.fillStyle = brick.fillColor; 185 | ctx.fillRect(b.x, b.y, brick.width, brick.height); 186 | 187 | ctx.strokeStyle = brick.strokeColor; 188 | ctx.strokeRect(b.x, b.y, brick.width, brick.height); 189 | } 190 | } 191 | } 192 | } 193 | 194 | // ball brick collision 195 | function ballBrickCollision(){ 196 | for(let r = 0; r < brick.row; r++){ 197 | for(let c = 0; c < brick.column; c++){ 198 | let b = bricks[r][c]; 199 | // if the brick isn't broken 200 | if(b.status){ 201 | if(ball.x + ball.radius > b.x && ball.x - ball.radius < b.x + brick.width && ball.y + ball.radius > b.y && ball.y - ball.radius < b.y + brick.height){ 202 | BRICK_HIT.play(); 203 | ball.dy = - ball.dy; 204 | b.status = false; // the brick is broken 205 | SCORE += SCORE_UNIT; 206 | } 207 | } 208 | } 209 | } 210 | } 211 | 212 | // show game stats 213 | function showGameStats(text, textX, textY, img, imgX, imgY){ 214 | // draw text 215 | ctx.fillStyle = "#FFF"; 216 | ctx.font = "25px Germania One"; 217 | ctx.fillText(text, textX, textY); 218 | 219 | // draw image 220 | ctx.drawImage(img, imgX, imgY, width = 25, height = 25); 221 | } 222 | 223 | // DRAW FUNCTION 224 | function draw(){ 225 | drawPaddle(); 226 | 227 | drawBall(); 228 | 229 | drawBricks(); 230 | 231 | // SHOW SCORE 232 | showGameStats(SCORE, 35, 25, SCORE_IMG, 5, 5); 233 | // SHOW LIVES 234 | showGameStats(LIFE, cvs.width - 25, 25, LIFE_IMG, cvs.width-55, 5); 235 | // SHOW LEVEL 236 | showGameStats(LEVEL, cvs.width/2, 25, LEVEL_IMG, cvs.width/2 - 30, 5); 237 | } 238 | 239 | // game over 240 | function gameOver(){ 241 | if(LIFE <= 0){ 242 | showYouLose(); 243 | GAME_OVER = true; 244 | } 245 | } 246 | 247 | // level up 248 | function levelUp(){ 249 | let isLevelDone = true; 250 | 251 | // check if all the bricks are broken 252 | for(let r = 0; r < brick.row; r++){ 253 | for(let c = 0; c < brick.column; c++){ 254 | isLevelDone = isLevelDone && ! bricks[r][c].status; 255 | } 256 | } 257 | 258 | if(isLevelDone){ 259 | WIN.play(); 260 | 261 | if(LEVEL >= MAX_LEVEL){ 262 | showYouWin(); 263 | GAME_OVER = true; 264 | return; 265 | } 266 | brick.row++; 267 | createBricks(); 268 | ball.speed += 0.5; 269 | resetBall(); 270 | LEVEL++; 271 | } 272 | } 273 | 274 | // UPDATE GAME FUNCTION 275 | function update(){ 276 | movePaddle(); 277 | 278 | moveBall(); 279 | 280 | ballWallCollision(); 281 | 282 | ballPaddleCollision(); 283 | 284 | ballBrickCollision(); 285 | 286 | gameOver(); 287 | 288 | levelUp(); 289 | } 290 | 291 | // GAME LOOP 292 | function loop(){ 293 | // CLEAR THE CANVAS 294 | ctx.drawImage(BG_IMG, 0, 0); 295 | 296 | draw(); 297 | 298 | update(); 299 | 300 | if(! GAME_OVER){ 301 | requestAnimationFrame(loop); 302 | } 303 | } 304 | loop(); 305 | 306 | 307 | // SELECT SOUND ELEMENT 308 | const soundElement = document.getElementById("sound"); 309 | 310 | soundElement.addEventListener("click", audioManager); 311 | 312 | function audioManager(){ 313 | // CHANGE IMAGE SOUND_ON/OFF 314 | let imgSrc = soundElement.getAttribute("src"); 315 | let SOUND_IMG = imgSrc == "img/SOUND_ON.png" ? "img/SOUND_OFF.png" : "img/SOUND_ON.png"; 316 | 317 | soundElement.setAttribute("src", SOUND_IMG); 318 | 319 | // MUTE AND UNMUTE SOUNDS 320 | WALL_HIT.muted = WALL_HIT.muted ? false : true; 321 | PADDLE_HIT.muted = PADDLE_HIT.muted ? false : true; 322 | BRICK_HIT.muted = BRICK_HIT.muted ? false : true; 323 | WIN.muted = WIN.muted ? false : true; 324 | LIFE_LOST.muted = LIFE_LOST.muted ? false : true; 325 | } 326 | 327 | // SHOW GAME OVER MESSAGE 328 | /* SELECT ELEMENTS */ 329 | const gameover = document.getElementById("gameover"); 330 | const youwin = document.getElementById("youwin"); 331 | const youlose = document.getElementById("youlose"); 332 | const restart = document.getElementById("restart"); 333 | 334 | // CLICK ON PLAY AGAIN BUTTON 335 | restart.addEventListener("click", function(){ 336 | location.reload(); // reload the page 337 | }) 338 | 339 | // SHOW YOU WIN 340 | function showYouWin(){ 341 | gameover.style.display = "block"; 342 | youwon.style.display = "block"; 343 | } 344 | 345 | // SHOW YOU LOSE 346 | function showYouLose(){ 347 | gameover.style.display = "block"; 348 | youlose.style.display = "block"; 349 | } 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/SOUND_OFF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/SOUND_OFF.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/SOUND_ON.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/SOUND_ON.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/bg.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/bg1.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/gameover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/gameover.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/level.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/life.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/score.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/img/youwon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/img/youwon.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2D Breakout Game - JavScript 6 | 7 | 8 | 50 | 51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 | 59 |
Play Again!
60 |
61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/sounds/brick_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/sounds/brick_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/sounds/life_lost.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/sounds/life_lost.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/sounds/paddle_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/sounds/paddle_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/sounds/wall.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/sounds/wall.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - FULL GAME/sounds/win.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - FULL GAME/sounds/win.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/components.js: -------------------------------------------------------------------------------- 1 | /////// LOAD IMAGES //////// 2 | 3 | 4 | 5 | /////// END LOAD IMAGES //////// 6 | 7 | // ************************ // 8 | 9 | /////// LOAD SOUNDS //////// 10 | 11 | 12 | 13 | /////// END LOAD SOUNDS //////// 14 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/game.js: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////// 2 | //* BreakOut JavaScript - Code Explained *// 3 | //////////////////////////////////////////// -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/SOUND_OFF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/SOUND_OFF.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/SOUND_ON.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/SOUND_ON.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/bg.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/bg1.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/level.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/life.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/img/score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/img/score.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/brick_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/brick_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/life_lost.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/life_lost.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/paddle_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/paddle_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/wall.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/wall.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/win.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 1 - Starter Template files/sounds/win.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/components.js: -------------------------------------------------------------------------------- 1 | /////// LOAD IMAGES //////// 2 | 3 | // LOAD BG IMAGE 4 | const BG_IMG = new Image(); 5 | BG_IMG.src = "img/bg.jpg"; 6 | 7 | /////// END LOAD IMAGES //////// 8 | 9 | // ************************ // 10 | 11 | /////// LOAD SOUNDS //////// 12 | 13 | 14 | 15 | /////// END LOAD SOUNDS //////// 16 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/game.js: -------------------------------------------------------------------------------- 1 | // SELECT CANVAS ELEMENT 2 | const cvs = document.getElementById("breakout"); 3 | const ctx = cvs.getContext("2d"); 4 | 5 | // ADD BORDER TO CANVAS 6 | cvs.style.border = "1px solid #0ff"; 7 | 8 | // MAKE LINE THIK WHEN DRAWING TO CANVAS 9 | ctx.lineWidth = 3; 10 | 11 | // GAME VARIABLES AND CONSTANTS 12 | const PADDLE_WIDTH = 100; 13 | const PADDLE_MARGIN_BOTTOM = 50; 14 | const PADDLE_HEIGHT = 20; 15 | const BALL_RADIUS = 8; 16 | let LIFE = 3; // PLAYER HAS 3 LIVES 17 | let leftArrow = false; 18 | let rightArrow = false; 19 | 20 | // CREATE THE PADDLE 21 | const paddle = { 22 | x : cvs.width/2 - PADDLE_WIDTH/2, 23 | y : cvs.height - PADDLE_MARGIN_BOTTOM - PADDLE_HEIGHT, 24 | width : PADDLE_WIDTH, 25 | height : PADDLE_HEIGHT, 26 | dx :5 27 | } 28 | 29 | // DRAW PADDLE 30 | function drawPaddle(){ 31 | ctx.fillStyle = "#2e3548"; 32 | ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height); 33 | 34 | ctx.strokeStyle = "#ffcd05"; 35 | ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height); 36 | } 37 | 38 | // CONTROL THE PADDLE 39 | document.addEventListener("keydown", function(event){ 40 | if(event.keyCode == 37){ 41 | leftArrow = true; 42 | }else if(event.keyCode == 39){ 43 | rightArrow = true; 44 | } 45 | }); 46 | document.addEventListener("keyup", function(event){ 47 | if(event.keyCode == 37){ 48 | leftArrow = false; 49 | }else if(event.keyCode == 39){ 50 | rightArrow = false; 51 | } 52 | }); 53 | 54 | // MOVE PADDLE 55 | function movePaddle(){ 56 | if(rightArrow && paddle.x + paddle.width < cvs.width){ 57 | paddle.x += paddle.dx; 58 | }else if(leftArrow && paddle.x > 0){ 59 | paddle.x -= paddle.dx; 60 | } 61 | } 62 | 63 | // CREATE THE BALL 64 | const ball = { 65 | x : cvs.width/2, 66 | y : paddle.y - BALL_RADIUS, 67 | radius : BALL_RADIUS, 68 | speed : 4, 69 | dx : 3 * (Math.random() * 2 - 1), 70 | dy : -3 71 | } 72 | 73 | // DRAW THE BALL 74 | function drawBall(){ 75 | ctx.beginPath(); 76 | 77 | ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); 78 | ctx.fillStyle = "#ffcd05"; 79 | ctx.fill(); 80 | 81 | ctx.strokeStyle = "#2e3548"; 82 | ctx.stroke(); 83 | 84 | ctx.closePath(); 85 | } 86 | 87 | // MOVE THE BALL 88 | function moveBall(){ 89 | ball.x += ball.dx; 90 | ball.y += ball.dy; 91 | } 92 | 93 | // BALL AND WALL COLLISION DETECTION 94 | function ballWallCollision(){ 95 | if(ball.x + ball.radius > cvs.width || ball.x - ball.radius < 0){ 96 | ball.dx = - ball.dx; 97 | } 98 | 99 | if(ball.y - ball.radius < 0){ 100 | ball.dy = -ball.dy; 101 | } 102 | 103 | if(ball.y + ball.radius > cvs.height){ 104 | LIFE--; // LOSE LIFE 105 | resetBall(); 106 | } 107 | } 108 | 109 | // RESET THE BALL 110 | function resetBall(){ 111 | ball.x = cvs.width/2; 112 | ball.y = paddle.y - BALL_RADIUS; 113 | ball.dx = 3 * (Math.random() * 2 - 1); 114 | ball.dy = -3; 115 | } 116 | 117 | // BALL AND PADDLE COLLISION 118 | function ballPaddleCollision(){ 119 | if(ball.x < paddle.x + paddle.width && ball.x > paddle.x && paddle.y < paddle.y + paddle.height && ball.y > paddle.y){ 120 | 121 | // CHECK WHERE THE BALL HIT THE PADDLE 122 | let collidePoint = ball.x - (paddle.x + paddle.width/2); 123 | 124 | // NORMALIZE THE VALUES 125 | collidePoint = collidePoint / (paddle.width/2); 126 | 127 | // CALCULATE THE ANGLE OF THE BALL 128 | let angle = collidePoint * Math.PI/3; 129 | 130 | 131 | ball.dx = ball.speed * Math.sin(angle); 132 | ball.dy = - ball.speed * Math.cos(angle); 133 | } 134 | } 135 | 136 | // DRAW FUNCTION 137 | function draw(){ 138 | drawPaddle(); 139 | 140 | drawBall(); 141 | } 142 | 143 | // UPDATE GAME FUNCTION 144 | function update(){ 145 | movePaddle(); 146 | 147 | moveBall(); 148 | 149 | ballWallCollision(); 150 | 151 | ballPaddleCollision(); 152 | } 153 | 154 | // GAME LOOP 155 | function loop(){ 156 | // CLEAR THE CANVAS 157 | ctx.drawImage(BG_IMG, 0, 0); 158 | 159 | draw(); 160 | 161 | update(); 162 | 163 | requestAnimationFrame(loop); 164 | } 165 | loop(); 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/SOUND_OFF.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/SOUND_OFF.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/SOUND_ON.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/SOUND_ON.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/bg.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/bg1.jpg -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/level.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/level.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/life.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/life.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/img/score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/img/score.png -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 2D Breakout Game - JavScript 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/brick_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/brick_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/life_lost.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/life_lost.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/paddle_hit.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/paddle_hit.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/wall.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/wall.mp3 -------------------------------------------------------------------------------- /2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/win.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeExplainedRepo/2D-Breakout-Game-JavaScript/d3903312529aea0e3b541b691dc3eaaad84b5bc4/2D Breakout Game JavaScript - PART 2 - Starter Template files/sounds/win.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 2D-Breakout-Game-JavaScript 2 | 3 | Code Explained Says Hi. 4 | 5 | Welcome to another tutorial, where we're going to create a game called "2D Breakout" using JavaScript and HTML 5, the tutorial is created especially for beginners in JavaScript. We will discuss the logic behind every line of code, And try to break down things as much as we can. and after that, we will open our text editors and start typing the code. 6 | 7 | In the 2D Breakout game, you need to break all the bricks using a bouncing ball, a ball that you need to prevent from leaving the game area using the paddle. 8 | 9 | This tutorial will be long, that's why I chose to split it into two parts. 10 | 11 | In the first part, we will be able, to draw the paddle and the ball, we will be able to control the paddle using the left and the right arrows on the keyboard, we will make the ball moves, and we will also implement the collision detection logic, so when the ball hits a wall it must change the direction. 12 | 13 | When the ball hit the paddle, the ball should go in a definite direction based on where the ball hit the paddle so the paddle won't act like a wall. which means you can determine where the ball goes when you hit it with the paddle. 14 | 15 | In the second part, we will implement the bricks in the game, add a collision detection function, when the ball hit a brick, the brick must disappear and then increment the player's score. 16 | 17 | The player has 3 lives, when he loses a life, we reset the ball position and give him a chance to continue playing, when he loses all the 3 lives, it's a game over, we show him a game over message, and a "play again" button to play over. 18 | 19 | To win the game, the player has to break all the bricks on each level, and he has to complete 7 levels, when he passes from a level to another, the number of bricks increases and also the speed of the ball. 20 | 21 | We will also implement some sounds in the game, and we will create a button for when you want to turn ON/OFF the sounds. 22 | 23 | **************************************************************** 24 | The video tutorial for the 1st part : https://www.youtube.com/watch?v=FyZ4_T0GZ1U 25 | 26 | The video tutorial for the 2nd part : Coming Soon 27 | 28 | ***************************************************************** 29 | 30 | Support Us, by a LIKE, COMMENT, SUBSCRIBE. as I put a lot of time to create these tutorials, and make them accessible by anyone for free. 31 | 32 | ***************************************************************** 33 | 34 | Here you can find other tutorials, that you might like to see: 35 | 36 | Ping Pong Game Using JavaScript 37 | https://youtu.be/nl0KXCa5pJk 38 | 39 | Create a Multiple Choice Quiz Using JavaScript 40 | https://youtu.be/49pYIMygIcU 41 | 42 | Tetris Game Using JavaScript 43 | https://youtu.be/HEsAr2Yt2do 44 | 45 | Snake Game Using JavaScript 46 | https://youtu.be/9TcU2C1AACw 47 | 48 | Flappy Bird Game Using JavaScript 49 | https://youtu.be/L07i4g-zhDA 50 | 51 | --------------------------------------------------------------------------------