From 5ef3f85cbfe588c46ca1ea88cf605b57dac9ad39 Mon Sep 17 00:00:00 2001 From: Shivani Pillai Date: Wed, 1 Oct 2025 13:07:33 +0530 Subject: [PATCH 1/2] Fix: corrected Audio object initialization for sound loading --- Games/2D_Breakout/components.js | 21 +++++---------------- 1 file changed, 5 insertions(+), 16 deletions(-) diff --git a/Games/2D_Breakout/components.js b/Games/2D_Breakout/components.js index 7f592f05dc..278bf11473 100644 --- a/Games/2D_Breakout/components.js +++ b/Games/2D_Breakout/components.js @@ -13,27 +13,16 @@ LIFE_IMG.src = "img/life.png"; const SCORE_IMG = new Image(); SCORE_IMG.src = "img/score.png"; - /////// END LOAD IMAGES //////// // ************************ // /////// LOAD SOUNDS //////// -const WALL_HIT = new Audio(); -WALL_HIT.src = "sounds/wall.mp3"; - -const LIFE_LOST = new Audio(); -LIFE_LOST.src = "sounds/life_lost.mp3"; - -const PADDLE_HIT = new Audio(); -PADDLE_HIT.src = "sounds/paddle_hit.mp3"; - -const WIN = new Audio(); -WIN.src = "sounds/win.mp3"; - -const BRICK_HIT = new Audio(); -BRICK_HIT.src = "sounds/brick_hit.mp3"; - +const WALL_HIT = new Audio("sounds/wall.mp3"); +const LIFE_LOST = new Audio("sounds/life_lost.mp3"); +const PADDLE_HIT = new Audio("sounds/paddle_hit.mp3"); +const WIN = new Audio("sounds/win.mp3"); +const BRICK_HIT = new Audio("sounds/brick_hit.mp3"); /////// END LOAD SOUNDS //////// From 841445afa3de762d4b8367fe93cae30cd48ddbe6 Mon Sep 17 00:00:00 2001 From: Shivani Pillai Date: Wed, 1 Oct 2025 13:14:26 +0530 Subject: [PATCH 2/2] Fix: corrected game code, paddle collision, audio, and win/lose messages --- Games/2D_Breakout/game.js | 286 ++++++++++++++++---------------------- 1 file changed, 116 insertions(+), 170 deletions(-) diff --git a/Games/2D_Breakout/game.js b/Games/2D_Breakout/game.js index 35e0f8c732..cf76e5df3d 100644 --- a/Games/2D_Breakout/game.js +++ b/Games/2D_Breakout/game.js @@ -1,3 +1,25 @@ +/////// LOAD IMAGES //////// +const BG_IMG = new Image(); +BG_IMG.src = "img/bg.jpg"; + +const LEVEL_IMG = new Image(); +LEVEL_IMG.src = "img/level.png"; + +const LIFE_IMG = new Image(); +LIFE_IMG.src = "img/life.png"; + +const SCORE_IMG = new Image(); +SCORE_IMG.src = "img/score.png"; +/////// END LOAD IMAGES //////// + +/////// LOAD SOUNDS //////// +const WALL_HIT = new Audio("sounds/wall.mp3"); +const LIFE_LOST = new Audio("sounds/life_lost.mp3"); +const PADDLE_HIT = new Audio("sounds/paddle_hit.mp3"); +const WIN = new Audio("sounds/win.mp3"); +const BRICK_HIT = new Audio("sounds/brick_hit.mp3"); +/////// END LOAD SOUNDS //////// + // SELECT CANVAS ELEMENT const cvs = document.getElementById("breakout"); const ctx = cvs.getContext("2d"); @@ -5,15 +27,15 @@ const ctx = cvs.getContext("2d"); // ADD BORDER TO CANVAS cvs.style.border = "1px solid #0ff"; -// MAKE LINE THIK WHEN DRAWING TO CANVAS +// MAKE LINE THICK WHEN DRAWING TO CANVAS ctx.lineWidth = 3; -// GAME VARIABLES AND CONSTANTS +// GAME VARIABLES const PADDLE_WIDTH = 100; -const PADDLE_MARGIN_BOTTOM = 50; const PADDLE_HEIGHT = 20; +const PADDLE_MARGIN_BOTTOM = 50; const BALL_RADIUS = 8; -let LIFE = 3; // PLAYER HAS 3 LIVES +let LIFE = 3; let SCORE = 0; const SCORE_UNIT = 10; let LEVEL = 1; @@ -24,166 +46,144 @@ let rightArrow = false; // CREATE THE PADDLE const paddle = { - x : cvs.width/2 - PADDLE_WIDTH/2, - y : cvs.height - PADDLE_MARGIN_BOTTOM - PADDLE_HEIGHT, - width : PADDLE_WIDTH, - height : PADDLE_HEIGHT, - dx :5 + x: cvs.width / 2 - PADDLE_WIDTH / 2, + y: cvs.height - PADDLE_MARGIN_BOTTOM - PADDLE_HEIGHT, + width: PADDLE_WIDTH, + height: PADDLE_HEIGHT, + dx: 5 } // DRAW PADDLE -function drawPaddle(){ +function drawPaddle() { ctx.fillStyle = "#2e3548"; ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height); - + ctx.strokeStyle = "#ffcd05"; ctx.strokeRect(paddle.x, paddle.y, paddle.width, paddle.height); } // CONTROL THE PADDLE document.addEventListener("keydown", function(event){ - if(event.keyCode == 37){ - leftArrow = true; - }else if(event.keyCode == 39){ - rightArrow = true; - } + if(event.keyCode == 37) leftArrow = true; + else if(event.keyCode == 39) rightArrow = true; }); document.addEventListener("keyup", function(event){ - if(event.keyCode == 37){ - leftArrow = false; - }else if(event.keyCode == 39){ - rightArrow = false; - } + if(event.keyCode == 37) leftArrow = false; + else if(event.keyCode == 39) rightArrow = false; }); // MOVE PADDLE -function movePaddle(){ - if(rightArrow && paddle.x + paddle.width < cvs.width){ - paddle.x += paddle.dx; - }else if(leftArrow && paddle.x > 0){ - paddle.x -= paddle.dx; - } +function movePaddle() { + if(rightArrow && paddle.x + paddle.width < cvs.width) paddle.x += paddle.dx; + else if(leftArrow && paddle.x > 0) paddle.x -= paddle.dx; } // CREATE THE BALL const ball = { - x : cvs.width/2, - y : paddle.y - BALL_RADIUS, - radius : BALL_RADIUS, - speed : 4, - dx : 3 * (Math.random() * 2 - 1), - dy : -3 + x: cvs.width / 2, + y: paddle.y - BALL_RADIUS, + radius: BALL_RADIUS, + speed: 4, + dx: 3 * (Math.random() * 2 - 1), + dy: -3 } // DRAW THE BALL -function drawBall(){ +function drawBall() { ctx.beginPath(); - - ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2); + ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2); ctx.fillStyle = "#ffcd05"; ctx.fill(); - ctx.strokeStyle = "#2e3548"; ctx.stroke(); - ctx.closePath(); } // MOVE THE BALL -function moveBall(){ +function moveBall() { ball.x += ball.dx; ball.y += ball.dy; } -// BALL AND WALL COLLISION DETECTION -function ballWallCollision(){ +// BALL AND WALL COLLISION +function ballWallCollision() { if(ball.x + ball.radius > cvs.width || ball.x - ball.radius < 0){ - ball.dx = - ball.dx; + ball.dx = -ball.dx; WALL_HIT.play(); } - + if(ball.y - ball.radius < 0){ ball.dy = -ball.dy; WALL_HIT.play(); } - + if(ball.y + ball.radius > cvs.height){ - LIFE--; // LOSE LIFE + LIFE--; LIFE_LOST.play(); resetBall(); } } -// RESET THE BALL -function resetBall(){ - ball.x = cvs.width/2; +// RESET BALL +function resetBall() { + ball.x = cvs.width / 2; ball.y = paddle.y - BALL_RADIUS; ball.dx = 3 * (Math.random() * 2 - 1); ball.dy = -3; } // BALL AND PADDLE COLLISION -function ballPaddleCollision(){ - if(ball.x < paddle.x + paddle.width && ball.x > paddle.x && paddle.y < paddle.y + paddle.height && ball.y > paddle.y){ - - // PLAY SOUND +function ballPaddleCollision() { + if(ball.x > paddle.x && ball.x < paddle.x + paddle.width && + ball.y + ball.radius > paddle.y && ball.y - ball.radius < paddle.y + paddle.height){ PADDLE_HIT.play(); - - // CHECK WHERE THE BALL HIT THE PADDLE - let collidePoint = ball.x - (paddle.x + paddle.width/2); - - // NORMALIZE THE VALUES - collidePoint = collidePoint / (paddle.width/2); - - // CALCULATE THE ANGLE OF THE BALL - let angle = collidePoint * Math.PI/3; - - + let collidePoint = ball.x - (paddle.x + paddle.width / 2); + collidePoint = collidePoint / (paddle.width / 2); + let angle = collidePoint * Math.PI / 3; + ball.dx = ball.speed * Math.sin(angle); - ball.dy = - ball.speed * Math.cos(angle); + ball.dy = -ball.speed * Math.cos(angle); } } -// CREATE THE BRICKS +// CREATE BRICKS const brick = { - row : 1, - column : 5, - width : 55, - height : 20, - offSetLeft : 20, - offSetTop : 20, - marginTop : 40, - fillColor : "#2e3548", - strokeColor : "#FFF" + row: 1, + column: 5, + width: 55, + height: 20, + offSetLeft: 20, + offSetTop: 20, + marginTop: 40, + fillColor: "#2e3548", + strokeColor: "#FFF" } let bricks = []; -function createBricks(){ +function createBricks() { for(let r = 0; r < brick.row; r++){ bricks[r] = []; for(let c = 0; c < brick.column; c++){ bricks[r][c] = { - x : c * ( brick.offSetLeft + brick.width ) + brick.offSetLeft, - y : r * ( brick.offSetTop + brick.height ) + brick.offSetTop + brick.marginTop, - status : true + x: c * (brick.offSetLeft + brick.width) + brick.offSetLeft, + y: r * (brick.offSetTop + brick.height) + brick.offSetTop + brick.marginTop, + status: true } } } } - createBricks(); -// draw the bricks -function drawBricks(){ +// DRAW BRICKS +function drawBricks() { for(let r = 0; r < brick.row; r++){ for(let c = 0; c < brick.column; c++){ let b = bricks[r][c]; - // if the brick isn't broken if(b.status){ ctx.fillStyle = brick.fillColor; ctx.fillRect(b.x, b.y, brick.width, brick.height); - + ctx.strokeStyle = brick.strokeColor; ctx.strokeRect(b.x, b.y, brick.width, brick.height); } @@ -191,17 +191,17 @@ function drawBricks(){ } } -// ball brick collision -function ballBrickCollision(){ +// BALL AND BRICK COLLISION +function ballBrickCollision() { for(let r = 0; r < brick.row; r++){ for(let c = 0; c < brick.column; c++){ let b = bricks[r][c]; - // if the brick isn't broken if(b.status){ - 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){ + 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){ BRICK_HIT.play(); - ball.dy = - ball.dy; - b.status = false; // the brick is broken + ball.dy = -ball.dy; + b.status = false; SCORE += SCORE_UNIT; } } @@ -209,55 +209,43 @@ function ballBrickCollision(){ } } -// show game stats +// SHOW GAME STATS function showGameStats(text, textX, textY, img, imgX, imgY){ - // draw text ctx.fillStyle = "#FFF"; ctx.font = "25px Germania One"; ctx.fillText(text, textX, textY); - - // draw image - ctx.drawImage(img, imgX, imgY, width = 25, height = 25); + ctx.drawImage(img, imgX, imgY, 25, 25); } -// DRAW FUNCTION -function draw(){ +// DRAW EVERYTHING +function draw() { drawPaddle(); - drawBall(); - drawBricks(); - - // SHOW SCORE showGameStats(SCORE, 35, 25, SCORE_IMG, 5, 5); - // SHOW LIVES - showGameStats(LIFE, cvs.width - 25, 25, LIFE_IMG, cvs.width-55, 5); - // SHOW LEVEL + showGameStats(LIFE, cvs.width - 25, 25, LIFE_IMG, cvs.width-55, 5); showGameStats(LEVEL, cvs.width/2, 25, LEVEL_IMG, cvs.width/2 - 30, 5); } -// game over -function gameOver(){ +// GAME OVER +function gameOver() { if(LIFE <= 0){ showYouLose(); GAME_OVER = true; } } -// level up -function levelUp(){ +// LEVEL UP +function levelUp() { let isLevelDone = true; - - // check if all the bricks are broken for(let r = 0; r < brick.row; r++){ for(let c = 0; c < brick.column; c++){ - isLevelDone = isLevelDone && ! bricks[r][c].status; + isLevelDone = isLevelDone && !bricks[r][c].status; } } - + if(isLevelDone){ WIN.play(); - if(LEVEL >= MAX_LEVEL){ showYouWin(); GAME_OVER = true; @@ -271,98 +259,56 @@ function levelUp(){ } } -// UPDATE GAME FUNCTION -function update(){ +// UPDATE GAME +function update() { movePaddle(); - moveBall(); - ballWallCollision(); - ballPaddleCollision(); - ballBrickCollision(); - gameOver(); - levelUp(); } // GAME LOOP -function loop(){ - // CLEAR THE CANVAS +function loop() { ctx.drawImage(BG_IMG, 0, 0); - draw(); - update(); - - if(! GAME_OVER){ - requestAnimationFrame(loop); - } + if(!GAME_OVER) requestAnimationFrame(loop); } loop(); - -// SELECT SOUND ELEMENT -const soundElement = document.getElementById("sound"); - +// SOUND TOGGLE +const soundElement = document.getElementById("sound"); soundElement.addEventListener("click", audioManager); -function audioManager(){ - // CHANGE IMAGE SOUND_ON/OFF +function audioManager() { let imgSrc = soundElement.getAttribute("src"); let SOUND_IMG = imgSrc == "img/SOUND_ON.png" ? "img/SOUND_OFF.png" : "img/SOUND_ON.png"; - soundElement.setAttribute("src", SOUND_IMG); - - // MUTE AND UNMUTE SOUNDS - WALL_HIT.muted = WALL_HIT.muted ? false : true; - PADDLE_HIT.muted = PADDLE_HIT.muted ? false : true; - BRICK_HIT.muted = BRICK_HIT.muted ? false : true; - WIN.muted = WIN.muted ? false : true; - LIFE_LOST.muted = LIFE_LOST.muted ? false : true; + + const audios = [WALL_HIT, PADDLE_HIT, BRICK_HIT, WIN, LIFE_LOST]; + audios.forEach(audio => audio.muted = !audio.muted); } -// SHOW GAME OVER MESSAGE -/* SELECT ELEMENTS */ +// GAME OVER ELEMENTS const gameover = document.getElementById("gameover"); const youwin = document.getElementById("youwin"); const youlose = document.getElementById("youlose"); const restart = document.getElementById("restart"); -// CLICK ON PLAY AGAIN BUTTON +// RESTART GAME restart.addEventListener("click", function(){ - location.reload(); // reload the page -}) + location.reload(); +}); -// SHOW YOU WIN +// SHOW WIN / LOSE function showYouWin(){ gameover.style.display = "block"; - youwon.style.display = "block"; + youwin.style.display = "block"; } - -// SHOW YOU LOSE function showYouLose(){ gameover.style.display = "block"; youlose.style.display = "block"; } - - - - - - - - - - - - - - - - - - -