Game finished polish needed

NotStonee · NotStonee · commit 9638afc2bc73 · 2022-12-09T15:29:09.000Z
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
 # Break-out
 Bad copy of break out
-This is purly for fun I plan to make this be playable forever resetting when you can not score anymore points
+This is purly for fun I plan to make this be playable forever resetting when you can not score anymore points
diff --git a/index.html b/index.html
@@ -1,42 +1,260 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <title>Breakout</title>
   <meta charset="UTF-8">
   <style>
-    html, body {
-    height: 100%;
-    margin: 0;
-  }
+    html,
+    body {
+      height: 100%;
+      margin: 0;
+    }
 
-  body {
-    background: black;
-    
-  }
+    body {
+      background: black;
+
+    }
     canvas {
       border: 2px solid white;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: auto;
     }
+
     h1 {
       color: white;
       text-align: center;
     }
+
     h3 {
       color: white;
       text-align: center;
     }
   </style>
 </head>
+
 <body>
   <h1>Breakout</h1>
   <h3>Press spacebar to start</h3>
-<canvas width="400" height="500" id="game"></canvas>
-<script>
-  
-  requestAnimationFrame(loop);
-</script>
+  <canvas width="400" height="500" id="game"></canvas>
+  <script>
+    const canvas = document.getElementById('game');
+    const context = canvas.getContext('2d');
+    
+    const level1 = [
+      [],
+      [],
+      ['R','R','R','R','R','R','R','R','R','R','R','R','R','R'],
+      ['R','R','R','R','R','R','R','R','R','R','R','R','R','R'],
+      ['O','O','O','O','O','O','O','O','O','O','O','O','O','O'],
+      ['O','O','O','O','O','O','O','O','O','O','O','O','O','O'],
+      ['Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y'],
+      ['Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y','Y'],
+      ['G','G','G','G','G','G','G','G','G','G','G','G','G','G'],
+      ['G','G','G','G','G','G','G','G','G','G','G','G','G','G'],
+      ['B','B','B','B','B','B','B','B','B','B','B','B','B','B'],
+      ['B','B','B','B','B','B','B','B','B','B','B','B','B','B'],
+      ['I','I','I','I','I','I','I','I','I','I','I','I','I','I'],
+      ['I','I','I','I','I','I','I','I','I','I','I','I','I','I'],
+      ['V','V','V','V','V','V','V','V','V','V','V','V','V','V'],
+      ['V','V','V','V','V','V','V','V','V','V','V','V','V','V']
+    ];
+    const colorMap = {
+      'R': 'red',
+      'O': 'orange',
+      'G': 'green',
+      'Y': 'yellow',
+      'V': 'Violet',
+      'I': 'Indigo',
+      'B': 'Blue'
+    };
+    
+    const brickGap = 2;
+    const brickWidth = 25;
+    const brickHeight = 12;
+    const wallSize = 12;
+    const bricks = [];
+    
+    for (let row = 0; row < level1.length; row++) {
+      for (let col = 0; col < level1[row].length; col++) {
+        const colorCode = level1[row][col];
+    
+        bricks.push({
+          x: wallSize + (brickWidth + brickGap) * col,
+          y: wallSize + (brickHeight + brickGap) * row,
+          color: colorMap[colorCode],
+          width: brickWidth,
+          height: brickHeight
+        });
+      }
+    }
+    
+    const paddle = {
+      x: canvas.width / 2 - brickWidth / 2,
+      y: 440,
+      width: brickWidth,
+      height: brickHeight,
+    
+      // paddle's velocity
+      dx: 0
+    };
+    
+    const ball = {
+      x: 250,
+      y: 260,
+      width: 5,
+      height: 5,
+    
+      // how fast the ball should go in the x or y direction
+      speed: 3,
+    
+      // ball velocity
+      dx: 0,
+      dy: 0
+    };
+    
+    // check for collision between two objects using axis-aligned bounding box (AABB)
+    // @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
+    function collides(obj1, obj2) {
+      return obj1.x < obj2.x + obj2.width &&
+             obj1.x + obj1.width > obj2.x &&
+             obj1.y < obj2.y + obj2.height &&
+             obj1.y + obj1.height > obj2.y;
+    }
+    
+    // game loop
+    function loop() {
+      requestAnimationFrame(loop);
+      context.clearRect(0,0,canvas.width,canvas.height);
+    
+      // move paddle by it's velocity
+      paddle.x += paddle.dx;
+    
+      // prevent paddle from going through walls
+      if (paddle.x < wallSize) {
+        paddle.x = wallSize
+      }
+      else if (paddle.x + brickWidth > canvas.width - wallSize) {
+        paddle.x = canvas.width - wallSize - brickWidth;
+      }
+    
+      // move ball by it's velocity
+      ball.x += ball.dx;
+      ball.y += ball.dy;
+    
+      // prevent ball from going through walls by changing its velocity
+      // left & right walls
+      if (ball.x < wallSize) {
+        ball.x = wallSize;
+        ball.dx *= -1;
+      }
+      else if (ball.x + ball.width > canvas.width - wallSize) {
+        ball.x = canvas.width - wallSize - ball.width;
+        ball.dx *= -1;
+      }
+      // top wall
+      if (ball.y < wallSize) {
+        ball.y = wallSize;
+        ball.dy *= -1;
+      }
+    
+      // reset ball if it goes below the screen
+      if (ball.y > canvas.height) {
+        ball.x = 130;
+        ball.y = 260;
+        ball.dx = 0;
+        ball.dy = 0;
+      }
+    
+      // check to see if ball collides with paddle. if they do change y velocity
+      if (collides(ball, paddle)) {
+        ball.dy *= -1;
+    
+        // move ball above the paddle otherwise the collision will happen again
+        // in the next frame
+        ball.y = paddle.y - ball.height;
+      }
+    
+      // check to see if ball collides with a brick. if it does, remove the brick
+      // and change the ball velocity based on the side the brick was hit on
+      for (let i = 0; i < bricks.length; i++) {
+        const brick = bricks[i];
+    
+        if (collides(ball, brick)) {
+          // remove brick from the bricks array
+          bricks.splice(i, 1);
+          
+    
+          // ball is above or below the brick, change y velocity
+          // account for the balls speed since it will be inside the brick when it
+          // collides
+          if (ball.y + ball.height - ball.speed <= brick.y ||
+              ball.y >= brick.y + brick.height - ball.speed) {
+            ball.dy *= -1;
+          }
+          // ball is on either side of the brick, change x velocity
+          else {
+            ball.dx *= -1;
+          }
+    
+          break;
+        }
+      }
+    
+      // draw walls
+      context.fillStyle = 'lightgrey';
+      context.fillRect(0, 0, canvas.width, wallSize);
+      context.fillRect(0, 0, wallSize, canvas.height);
+      context.fillRect(canvas.width - wallSize, 0, wallSize, canvas.height);
+    
+      // draw ball if it's moving
+      if (ball.dx || ball.dy) {
+        context.fillRect(ball.x, ball.y, ball.width, ball.height);
+      }
+    
+      // draw bricks
+      bricks.forEach(function(brick) {
+        context.fillStyle = brick.color;
+        context.fillRect(brick.x, brick.y, brick.width, brick.height);
+      });
+    
+      // draw paddle
+      context.fillStyle = 'white';
+      context.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
+    }
+    
+    // listen to keyboard events to move the paddle
+    document.addEventListener('keydown', function(e) {
+      // left arrow key
+      if (e.which === 65) {
+        paddle.dx = -5;
+      }
+      // right arrow key
+      else if (e.which === 68) {
+        paddle.dx = 5;
+      }
+    
+      // space key
+      // if they ball is not moving, we can launch the ball using the space key. ball
+      // will move towards the bottom right to start
+      if (ball.dx === 0 && ball.dy === 0 && e.which === 32) {
+        ball.dx = ball.speed;
+        ball.dy = ball.speed;
+      }
+    });
+    
+    // listen to keyboard events to stop the paddle if key is released
+    document.addEventListener('keyup', function(e) {
+      if (e.which === 65 || e.which === 68) {
+        paddle.dx = 0;
+      }
+    });
+
+// start the game
+    requestAnimationFrame(loop);
+  </script>
 </body>
+
 </html>
