From cf7e8333eb616694b47bd104556acf776b803770 Mon Sep 17 00:00:00 2001
From: Gabriel Barukel <gabrukel@gmail.com>
Date: Sat, 20 Apr 2024 11:54:00 -0300
Subject: [PATCH] fixed the 'isBallTouchingPaddle' bug

---
 02-arkanoid-game/index.html | 205 +++++++++++++++++++-----------------
 1 file changed, 108 insertions(+), 97 deletions(-)

diff --git a/02-arkanoid-game/index.html b/02-arkanoid-game/index.html
index 01ea8fb..c97a1b9 100644
--- a/02-arkanoid-game/index.html
+++ b/02-arkanoid-game/index.html
@@ -9,7 +9,7 @@
   canvas {
     border: 4px solid #000;
     border-bottom: transparent;
-    background: url('./bkg.png') repeat;
+    background: url("./bkg.png") repeat;
     margin: 0 auto;
     display: block;
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
@@ -22,37 +22,37 @@
 <img hidden id="bricks" src="./bricks.png" alt="Sprite Bricks Arkanoid" />
 
 <script>
-  const canvas = document.querySelector('canvas')
-  const ctx = canvas.getContext('2d')
+  const canvas = document.querySelector("canvas");
+  const ctx = canvas.getContext("2d");
 
-  const $sprite = document.querySelector('#sprite')
-  const $bricks = document.querySelector('#bricks')
+  const $sprite = document.querySelector("#sprite");
+  const $bricks = document.querySelector("#bricks");
 
-  canvas.width = 448
-  canvas.height = 400
+  canvas.width = 448;
+  canvas.height = 400;
 
   /* Variables de nuestro juego */
 
   /* VARIABLES DE LA PELOTA */
   const ballRadius = 3;
   // posicion de la pelota
-  let x = canvas.width / 2
-  let y = canvas.height - 30
+  let x = canvas.width / 2;
+  let y = canvas.height - 30;
   // velocidad de la pelota
-  let dx = -3
-  let dy = -3
+  let dx = -3;
+  let dy = -3;
 
   /* VARIABLES DE LA PALETA */
-  const PADDLE_SENSITIVITY = 8
+  const PADDLE_SENSITIVITY = 8;
 
   const paddleHeight = 10;
   const paddleWidth = 50;
 
-  let paddleX = (canvas.width - paddleWidth) / 2
-  let paddleY = canvas.height - paddleHeight - 10
+  let paddleX = (canvas.width - paddleWidth) / 2;
+  let paddleY = canvas.height - paddleHeight - 10;
 
-  let rightPressed = false
-  let leftPressed = false
+  let rightPressed = false;
+  let leftPressed = false;
 
   /* VARIABLES DE LOS LADRILLOS */
   const brickRowCount = 6;
@@ -66,34 +66,33 @@
 
   const BRICK_STATUS = {
     ACTIVE: 1,
-    DESTROYED: 0
-  }
+    DESTROYED: 0,
+  };
 
   for (let c = 0; c < brickColumnCount; c++) {
-    bricks[c] = [] // inicializamos con un array vacio
+    bricks[c] = []; // inicializamos con un array vacio
     for (let r = 0; r < brickRowCount; r++) {
       // calculamos la posicion del ladrillo en la pantalla
-      const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft
-      const brickY = r * (brickHeight + brickPadding) + brickOffsetTop
+      const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+      const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
       // Asignar un color aleatorio a cada ladrillo
-      const random = Math.floor(Math.random() * 8)
+      const random = Math.floor(Math.random() * 8);
       // Guardamos la información de cada ladrillo
       bricks[c][r] = {
         x: brickX,
         y: brickY,
         status: BRICK_STATUS.ACTIVE,
-        color: random
-      }
+        color: random,
+      };
     }
   }
 
-
   function drawBall() {
-    ctx.beginPath() // iniciar el trazado
-    ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
-    ctx.fillStyle = '#fff'
-    ctx.fill()
-    ctx.closePath() // terminar el trazado
+    ctx.beginPath(); // iniciar el trazado
+    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
+    ctx.fillStyle = "#fff";
+    ctx.fill();
+    ctx.closePath(); // terminar el trazado
   }
 
   function drawPaddle() {
@@ -107,16 +106,16 @@
       paddleY, // posición Y del dibujo
       paddleWidth, // ancho del dibujo
       paddleHeight // alto del dibujo
-    )
+    );
   }
 
   function drawBricks() {
     for (let c = 0; c < brickColumnCount; c++) {
       for (let r = 0; r < brickRowCount; r++) {
-        const currentBrick = bricks[c][r]
+        const currentBrick = bricks[c][r];
         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
 
-        const clipX = currentBrick.color * 32
+        const clipX = currentBrick.color * 32;
 
         ctx.drawImage(
           $bricks,
@@ -128,32 +127,30 @@
           currentBrick.y,
           brickWidth,
           brickHeight
-        )
+        );
       }
     }
   }
 
   function drawUI() {
-    ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
+    ctx.fillText(`FPS: ${framesPerSec}`, 5, 10);
   }
 
   function collisionDetection() {
     for (let c = 0; c < brickColumnCount; c++) {
       for (let r = 0; r < brickRowCount; r++) {
-        const currentBrick = bricks[c][r]
+        const currentBrick = bricks[c][r];
         if (currentBrick.status === BRICK_STATUS.DESTROYED) continue;
 
         const isBallSameXAsBrick =
-          x > currentBrick.x &&
-          x < currentBrick.x + brickWidth
+          x > currentBrick.x && x < currentBrick.x + brickWidth;
 
         const isBallSameYAsBrick =
-          y > currentBrick.y &&
-          y < currentBrick.y + brickHeight
+          y > currentBrick.y && y < currentBrick.y + brickHeight;
 
         if (isBallSameXAsBrick && isBallSameYAsBrick) {
-          dy = -dy
-          currentBrick.status = BRICK_STATUS.DESTROYED
+          dy = -dy;
+          currentBrick.status = BRICK_STATUS.DESTROYED;
         }
       }
     }
@@ -165,115 +162,129 @@
       x + dx > canvas.width - ballRadius || // la pared derecha
       x + dx < ballRadius // la pared izquierda
     ) {
-      dx = -dx
+      dx = -dx;
     }
 
     // rebotar en la parte de arriba
     if (y + dy < ballRadius) {
-      dy = -dy
+      dy = -dy;
     }
 
     // la pelota toca la pala
-    const isBallSameXAsPaddle =
-      x > paddleX &&
-      x < paddleX + paddleWidth
+    const isBallSameXAsPaddle = x > paddleX && x < paddleX + paddleWidth;
 
     const isBallTouchingPaddle =
-      y + dy > paddleY
+      y + dy > paddleY && y + dy < paddleY + paddleHeight;
 
     if (isBallSameXAsPaddle && isBallTouchingPaddle) {
-      dy = -dy // cambiamos la dirección de la pelota
-    } else if ( // la pelota toca el suelo
-      y + dy > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
+      dy = -dy; // cambiamos la dirección de la pelota
+    } else if (
+      // la pelota toca el suelo
+      y + dy > canvas.height - ballRadius ||
+      y + dy > paddleY + paddleHeight
     ) {
-      console.log('Game Over')
-      document.location.reload()
+      console.log("Game Over");
+      document.location.reload();
     }
 
     // mover la pelota
-    x += dx
-    y += dy
+    x += dx;
+    y += dy;
   }
 
   function paddleMovement() {
     if (rightPressed && paddleX < canvas.width - paddleWidth) {
-      paddleX += PADDLE_SENSITIVITY
+      paddleX += PADDLE_SENSITIVITY;
     } else if (leftPressed && paddleX > 0) {
-      paddleX -= PADDLE_SENSITIVITY
+      paddleX -= PADDLE_SENSITIVITY;
     }
   }
 
   function cleanCanvas() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
   }
 
   function initEvents() {
-    document.addEventListener('keydown', keyDownHandler)
-    document.addEventListener('keyup', keyUpHandler)
+    document.addEventListener("keydown", keyDownHandler);
+    document.addEventListener("keyup", keyUpHandler);
 
     function keyDownHandler(event) {
-      const { key } = event
-      if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
-        rightPressed = true
-      } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
-        leftPressed = true
+      const { key } = event;
+      if (
+        key === "Right" ||
+        key === "ArrowRight" ||
+        key.toLowerCase() === "d"
+      ) {
+        rightPressed = true;
+      } else if (
+        key === "Left" ||
+        key === "ArrowLeft" ||
+        key.toLowerCase() === "a"
+      ) {
+        leftPressed = true;
       }
     }
 
     function keyUpHandler(event) {
-      const { key } = event
-      if (key === 'Right' || key === 'ArrowRight' || key.toLowerCase() === 'd') {
-        rightPressed = false
-      } else if (key === 'Left' || key === 'ArrowLeft' || key.toLowerCase() === 'a') {
-        leftPressed = false
+      const { key } = event;
+      if (
+        key === "Right" ||
+        key === "ArrowRight" ||
+        key.toLowerCase() === "d"
+      ) {
+        rightPressed = false;
+      } else if (
+        key === "Left" ||
+        key === "ArrowLeft" ||
+        key.toLowerCase() === "a"
+      ) {
+        leftPressed = false;
       }
     }
   }
 
   // a que velocidad de fps queremos que renderice nuestro juego
-  const fps = 60
-  
-  let msPrev = window.performance.now()
+  const fps = 60;
+
+  let msPrev = window.performance.now();
   let msFPSPrev = window.performance.now() + 1000;
-  const msPerFrame = 1000 / fps
-  let frames = 0
+  const msPerFrame = 1000 / fps;
+  let frames = 0;
   let framesPerSec = fps;
 
   function draw() {
-    window.requestAnimationFrame(draw)
+    window.requestAnimationFrame(draw);
 
-    const msNow = window.performance.now()
-    const msPassed = msNow - msPrev
+    const msNow = window.performance.now();
+    const msPassed = msNow - msPrev;
 
-    if (msPassed < msPerFrame) return
+    if (msPassed < msPerFrame) return;
 
-    const excessTime = msPassed % msPerFrame
-    msPrev = msNow - excessTime
+    const excessTime = msPassed % msPerFrame;
+    msPrev = msNow - excessTime;
 
-    frames++
+    frames++;
 
-    if (msFPSPrev < msNow)
-    {
-      msFPSPrev = window.performance.now() + 1000
+    if (msFPSPrev < msNow) {
+      msFPSPrev = window.performance.now() + 1000;
       framesPerSec = frames;
       frames = 0;
     }
 
     // ... render code
-    cleanCanvas()
+    cleanCanvas();
     // hay que dibujar los elementos
-    drawBall()
-    drawPaddle()
-    drawBricks()
-    drawUI()
+    drawBall();
+    drawPaddle();
+    drawBricks();
+    drawUI();
 
     // colisiones y movimientos
-    collisionDetection()
-    ballMovement()
-    paddleMovement()
-
+    collisionDetection();
+    ballMovement();
+    paddleMovement();
   }
 
-  draw()
-  initEvents()
-</script>
\ No newline at end of file
+  draw();
+  initEvents();
+</script>