2D Breakout Enhancement: Difficulty

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,10 +9,10 @@ Fixes # <your_issue_number>
 
 <!----Please delete options that are not relevant. In order to tick the check box just but x inside them for example [x] like this----->
 
-- [ ] 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

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";
 

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(){
 
 
 
+

Games/2D_Breakout/index.html

@@ -22,9 +22,15 @@
     <div id="gameover">
         <img src="img/youwon.png" alt="youwon" id="youwon">
         <img src="img/gameover.png" alt="gameover" id="youlose">
-        <div id="restart">Play Again!</div>
+        <div id="restart">Play Again!(Space)</div>
+
+
+    </div>
+       <div class = "difficult">
+        <div id="normal">Normal</div>
+        <div id="hard">Hard</div>
+        <div id="brutal">Brutal</div>
     </div>
-
     <canvas id="breakout" width="400" height="500"></canvas>
     </div>
 

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;
+}