From f7c8c775c0348a16777ebf7ada5fb13e7545a99c Mon Sep 17 00:00:00 2001
From: York Cook <49798454+yorkcook@users.noreply.github.com>
Date: Wed, 24 Jul 2024 18:19:53 -0400
Subject: [PATCH] breakout

---
 breakout-game/script.js | 88 ++++++++++++++++++++---------------------
 1 file changed, 44 insertions(+), 44 deletions(-)

diff --git a/breakout-game/script.js b/breakout-game/script.js
index 66b79330..5b9fca0a 100644
--- a/breakout-game/script.js
+++ b/breakout-game/script.js
@@ -1,8 +1,8 @@
-const rulesBtn = document.getElementById('rules-btn');
-const closeBtn = document.getElementById('close-btn');
-const rules = document.getElementById('rules');
-const canvas = document.getElementById('canvas');
-const ctx = canvas.getContext('2d');
+const rulesBtn = document.getElementById("rules-btn");
+const closeBtn = document.getElementById("close-btn");
+const rules = document.getElementById("rules");
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
 
 let score = 0;
 
@@ -18,7 +18,7 @@ const ball = {
   speed: 4,
   dx: 4,
   dy: -4,
-  visible: true
+  visible: true,
 };
 
 // Create paddle props
@@ -29,7 +29,7 @@ const paddle = {
   h: 10,
   speed: 8,
   dx: 0,
-  visible: true
+  visible: true,
 };
 
 // Create brick props
@@ -39,7 +39,7 @@ const brickInfo = {
   padding: 10,
   offsetX: 45,
   offsetY: 60,
-  visible: true
+  visible: true,
 };
 
 // Create bricks
@@ -57,7 +57,7 @@ for (let i = 0; i < brickRowCount; i++) {
 function drawBall() {
   ctx.beginPath();
   ctx.arc(ball.x, ball.y, ball.size, 0, Math.PI * 2);
-  ctx.fillStyle = ball.visible ? '#0095dd' : 'transparent';
+  ctx.fillStyle = ball.visible ? "#0095dd" : "transparent";
   ctx.fill();
   ctx.closePath();
 }
@@ -66,24 +66,24 @@ function drawBall() {
 function drawPaddle() {
   ctx.beginPath();
   ctx.rect(paddle.x, paddle.y, paddle.w, paddle.h);
-  ctx.fillStyle = paddle.visible ? '#0095dd' : 'transparent';
+  ctx.fillStyle = paddle.visible ? "#0095dd" : "transparent";
   ctx.fill();
   ctx.closePath();
 }
 
 // Draw score on canvas
 function drawScore() {
-  ctx.font = '20px Arial';
+  ctx.font = "20px Arial";
   ctx.fillText(`Score: ${score}`, canvas.width - 100, 30);
 }
 
 // Draw bricks on canvas
 function drawBricks() {
-  bricks.forEach(column => {
-    column.forEach(brick => {
+  bricks.forEach((column) => {
+    column.forEach((brick) => {
       ctx.beginPath();
       ctx.rect(brick.x, brick.y, brick.w, brick.h);
-      ctx.fillStyle = brick.visible ? '#0095dd' : 'transparent';
+      ctx.fillStyle = brick.visible ? "#0095dd" : "transparent";
       ctx.fill();
       ctx.closePath();
     });
@@ -101,7 +101,7 @@ function movePaddle() {
 
   if (paddle.x < 0) {
     paddle.x = 0;
-    }
+  }
 }
 
 // Move ball on canvas
@@ -131,8 +131,8 @@ function moveBall() {
   }
 
   // Brick collision
-  bricks.forEach(column => {
-    column.forEach(brick => {
+  bricks.forEach((column) => {
+    column.forEach((brick) => {
       if (brick.visible) {
         if (
           ball.x - ball.size > brick.x && // left brick side check
@@ -161,28 +161,27 @@ function increaseScore() {
   score++;
 
   if (score % (brickRowCount * brickColumnCount) === 0) {
-
-      ball.visible = false;
-      paddle.visible = false;
-
-      //After 0.5 sec restart the game
-      setTimeout(function () {
-          showAllBricks();
-          score = 0;
-          paddle.x = canvas.width / 2 - 40;
-          paddle.y = canvas.height - 20;
-          ball.x = canvas.width / 2;
-          ball.y = canvas.height / 2;
-          ball.visible = true;
-          paddle.visible = true;
-      },delay)
+    ball.visible = false;
+    paddle.visible = false;
+
+    //After 0.5 sec restart the game
+    setTimeout(function () {
+      showAllBricks();
+      score = 0;
+      paddle.x = canvas.width / 2 - 40;
+      paddle.y = canvas.height - 20;
+      ball.x = canvas.width / 2;
+      ball.y = canvas.height / 2;
+      ball.visible = true;
+      paddle.visible = true;
+    }, delay);
   }
 }
 
 // Make all bricks appear
 function showAllBricks() {
-  bricks.forEach(column => {
-    column.forEach(brick => (brick.visible = true));
+  bricks.forEach((column) => {
+    column.forEach((brick) => (brick.visible = true));
   });
 }
 
@@ -212,9 +211,9 @@ update();
 
 // Keydown event
 function keyDown(e) {
-  if (e.key === 'Right' || e.key === 'ArrowRight') {
+  if (e.key === "Right" || e.key === "ArrowRight") {
     paddle.dx = paddle.speed;
-  } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+  } else if (e.key === "Left" || e.key === "ArrowLeft") {
     paddle.dx = -paddle.speed;
   }
 }
@@ -222,19 +221,20 @@ function keyDown(e) {
 // Keyup event
 function keyUp(e) {
   if (
-    e.key === 'Right' ||
-    e.key === 'ArrowRight' ||
-    e.key === 'Left' ||
-    e.key === 'ArrowLeft'
+    e.key === "Right" ||
+    e.key === "ArrowRight" ||
+    e.key === "Left" ||
+    e.key === "ArrowLeft"
   ) {
     paddle.dx = 0;
   }
 }
 
 // Keyboard event handlers
-document.addEventListener('keydown', keyDown);
-document.addEventListener('keyup', keyUp);
+document.addEventListener("keydown", keyDown);
+document.addEventListener("keyup", keyUp);
 
 // Rules and close event handlers
-rulesBtn.addEventListener('click', () => rules.classList.add('show'));
-closeBtn.addEventListener('click', () => rules.classList.remove('show'));
+rulesBtn.addEventListener("click", () => rules.classList.add("show"));
+closeBtn.addEventListener("click", () => rules.classList.remove("show"));
+//start