From 8cf01fa24e61a71680640c05444b18e88654160b Mon Sep 17 00:00:00 2001 From: New-Log Date: Sat, 31 Jan 2026 19:39:09 -0600 Subject: [PATCH] 2D Breakout enhancement: Difficulty Added difficulty settings and fixed serious bug: Added normal, hard, and brutal: -normal is regular, unmodified game -hard increases ball speed per level, reduces life and paddle width, but increases player speed, allowing them to react -brutal is the same, but more extreme bug fixes: fixed bug where ball could get stuck inside a wall, forcing player to lose a life to get it out. I did this by increasing it's position by it's velocity whenever it hits the wall. other changes: Changed level number from 4 to 6 --- .github/PULL_REQUEST_TEMPLATE.md | 8 ++-- Games/2D_Breakout/components.js | 3 ++ Games/2D_Breakout/game.js | 72 +++++++++++++++++++++++++++----- Games/2D_Breakout/index.html | 10 ++++- Games/2D_Breakout/style.css | 34 ++++++++++++++- 5 files changed, 109 insertions(+), 18 deletions(-) diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 20bc5bbfdb..2fce87aa55 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -9,10 +9,10 @@ Fixes # -- [ ] I follow [CONTRIBUTING GUIDELINE](https://github.com/kunjgit/GameZone/blob/main/.github/CONTRIBUTING_GUIDELINE.md) & [CODE OF CONDUCT](https://github.com/kunjgit/GameZone/blob/main/.github/CODE_OF_CONDUCT.md) of this project. -- [ ] I have performed a self-review of my own code or work. -- [ ] I have commented my code, particularly in hard-to-understand areas. -- [ ] My changes generates no new warnings. +- [✅] I follow [CONTRIBUTING GUIDELINE](https://github.com/kunjgit/GameZone/blob/main/.github/CONTRIBUTING_GUIDELINE.md) & [CODE OF CONDUCT](https://github.com/kunjgit/GameZone/blob/main/.github/CODE_OF_CONDUCT.md) of this project. +- [✅ ] I have performed a self-review of my own code or work. +- [✅ ] I have commented my code, particularly in hard-to-understand areas. +- [✅ ] My changes generates no new warnings. - [ ] I have followed proper naming convention showed in [CONTRIBUTING GUIDELINE](https://github.com/kunjgit/GameZone/blob/main/.github/CONTRIBUTING_GUIDELINE.md) - [ ] I have added screenshot for website preview in assets/images - [ ] I have added entries for my game in GameZone's README.md diff --git a/Games/2D_Breakout/components.js b/Games/2D_Breakout/components.js index 7f592f05dc..b913ffa973 100644 --- a/Games/2D_Breakout/components.js +++ b/Games/2D_Breakout/components.js @@ -4,6 +4,9 @@ const BG_IMG = new Image(); BG_IMG.src = "img/bg.jpg"; +const BG_IMG_HARD = new Image() +BG_IMG_HARD.src="img/bg1.jpg" + const LEVEL_IMG = new Image(); LEVEL_IMG.src = "img/level.png"; diff --git a/Games/2D_Breakout/game.js b/Games/2D_Breakout/game.js index 35e0f8c732..6c6590b815 100644 --- a/Games/2D_Breakout/game.js +++ b/Games/2D_Breakout/game.js @@ -13,15 +13,16 @@ const PADDLE_WIDTH = 100; const PADDLE_MARGIN_BOTTOM = 50; const PADDLE_HEIGHT = 20; const BALL_RADIUS = 8; -let LIFE = 3; // PLAYER HAS 3 LIVES +let ballSpeedMod=.5;//how much ball speed increases per level +let LIFE = 3; // PLAYER HAS 3 LIVES, BUT VARIES ON DIFFICULTY let SCORE = 0; +let difficulty = ""; const SCORE_UNIT = 10; let LEVEL = 1; -const MAX_LEVEL = 3; +const MAX_LEVEL = 6; let GAME_OVER = false; let leftArrow = false; let rightArrow = false; - // CREATE THE PADDLE const paddle = { x : cvs.width/2 - PADDLE_WIDTH/2, @@ -55,6 +56,12 @@ document.addEventListener("keyup", function(event){ rightArrow = false; } }); +// restart game +document.addEventListener("keydown", function(event){ + if(event.key==" " && GAME_OVER){ + location.reload() + } +}); // MOVE PADDLE function movePaddle(){ @@ -98,7 +105,8 @@ function moveBall(){ // BALL AND WALL COLLISION DETECTION function ballWallCollision(){ if(ball.x + ball.radius > cvs.width || ball.x - ball.radius < 0){ - ball.dx = - ball.dx; + ball.dx = - ball.dx; //Sets ball x velocity to it's oppsoite, causing it to "bounce" + ball.x+=ball.dx //prevents bug where ball gets locked in wall WALL_HIT.play(); } @@ -236,6 +244,7 @@ function draw(){ showGameStats(LEVEL, cvs.width/2, 25, LEVEL_IMG, cvs.width/2 - 30, 5); } + // game over function gameOver(){ if(LIFE <= 0){ @@ -265,7 +274,7 @@ function levelUp(){ } brick.row++; createBricks(); - ball.speed += 0.5; + ball.speed += ballSpeedMod; resetBall(); LEVEL++; } @@ -291,17 +300,20 @@ function update(){ // GAME LOOP function loop(){ // CLEAR THE CANVAS - ctx.drawImage(BG_IMG, 0, 0); - + if(difficulty!="brutal"){ + ctx.drawImage(BG_IMG, 0, 0);} + else{ + ctx.drawImage(BG_IMG_HARD, 0, 0); + } draw(); - - update(); - + if(difficulty!=""){ + update(); //Waits until difficulty is selcted to start game + } if(! GAME_OVER){ requestAnimationFrame(loop); } } -loop(); +loop(); // SELECT SOUND ELEMENT @@ -330,16 +342,53 @@ const gameover = document.getElementById("gameover"); const youwin = document.getElementById("youwin"); const youlose = document.getElementById("youlose"); const restart = document.getElementById("restart"); +const normal = document.getElementById("normal") +const hard = document.getElementById("hard") +const brutal = document.getElementById("brutal") // CLICK ON PLAY AGAIN BUTTON restart.addEventListener("click", function(){ location.reload(); // reload the page + ctx.drawImage(BG_IMG, 0, 0); +}) + +//Difficulty Click And Changes +normal.addEventListener("click", function(){ + difficulty="normal"; + normal.style.visibility = "hidden"; //Hide difficulty + hard.style.visibility = "hidden"; + brutal.style.visibility = "hidden"; +}) +hard.addEventListener("click", function(){ + difficulty="hard"; + paddle.dx=6;//increases paddle speed + cvs.style.border = "1px solid rgb(255, 153, 0)"; + ballSpeedMod=.7;//changes how much faster ball gets each level + normal.style.visibility = "hidden"; + hard.style.visibility = "hidden"; + brutal.style.visibility = "hidden"; + paddle.width=80; //Reduce paddle size + LIFE=2 +}) +brutal.addEventListener("click", function(){ + difficulty="brutal"; + paddle.dx=7; + cvs.style.border = "1px solid rgb(255, 12, 12)"; + ballSpeedMod=.9; + normal.style.visibility = "hidden"; + hard.style.visibility = "hidden"; + brutal.style.visibility = "hidden"; + ctx.drawImage(BG_IMG_HARD, 0, 0); + paddle.width=50; + LIFE=1 + }) // SHOW YOU WIN function showYouWin(){ gameover.style.display = "block"; youwon.style.display = "block"; + } // SHOW YOU LOSE @@ -366,3 +415,4 @@ function showYouLose(){ + diff --git a/Games/2D_Breakout/index.html b/Games/2D_Breakout/index.html index 4693e2e41d..7206e98053 100644 --- a/Games/2D_Breakout/index.html +++ b/Games/2D_Breakout/index.html @@ -22,9 +22,15 @@
youwon gameover -
Play Again!
+
Play Again!(Space)
+ + +
+
+
Normal
+
Hard
+
Brutal
- diff --git a/Games/2D_Breakout/style.css b/Games/2D_Breakout/style.css index 9ceb92b3b5..af66f3eb8b 100644 --- a/Games/2D_Breakout/style.css +++ b/Games/2D_Breakout/style.css @@ -7,7 +7,7 @@ body{ .Game-Card{ width: 400px; height: 500px; - background: #000; + background: #0ff; margin: 0 auto; position: relative; } @@ -48,3 +48,35 @@ body{ font-size: 1.25em; color: #FFF; } +.difficulty{ + display: flex; + justify-content: center; + align-items: center; +} +#normal{ + position: absolute; + top: 150px; + left: 115px; + cursor: pointer; + font-size: 4em; + color: #0e6315; + user-select: none; +} +#hard{ + position: absolute; + top: 220px; + left: 145px; + cursor: pointer; + font-size: 4em; + color: #ff9102; + user-select: none; +} +#brutal{ + position: absolute; + top: 290px; + left: 130px; + cursor: pointer; + font-size: 4em; + color: #fd0b0b; + user-select: none; +} \ No newline at end of file