Merge branch 'main' of github.com:midudev/javascript-100-proyectos

Author: midudev

02-arkanoid-game/index.html

@@ -43,6 +43,8 @@
   let dy = -3
 
   /* VARIABLES DE LA PALETA */
+  const PADDLE_SENSITIVITY = 8
+
   const paddleHeight = 10;
   const paddleWidth = 50;
 
@@ -86,8 +88,6 @@
   }
 
 
-  const PADDLE_SENSITIVITY = 8
-
   function drawBall() {
     ctx.beginPath() // iniciar el trazado
     ctx.arc(x, y, ballRadius, 0, Math.PI * 2)
@@ -133,6 +133,10 @@
     }
   }
 
+  function drawUI() {
+    ctx.fillText(`FPS: ${framesPerSec}`, 5, 10)
+  }
+
   function collisionDetection() {
     for (let c = 0; c < brickColumnCount; c++) {
       for (let r = 0; r < brickRowCount; r++) {
@@ -180,7 +184,7 @@
     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 > canvas.height - ballRadius || y + dy > paddleY + paddleHeight
     ) {
       console.log('Game Over')
       document.location.reload()
@@ -226,20 +230,48 @@
     }
   }
 
+  // a que velocidad de fps queremos que renderice nuestro juego
+  const fps = 60
+  
+  let msPrev = window.performance.now()
+  let msFPSPrev = window.performance.now() + 1000;
+  const msPerFrame = 1000 / fps
+  let frames = 0
+  let framesPerSec = fps;
+
   function draw() {
+    window.requestAnimationFrame(draw)
+
+    const msNow = window.performance.now()
+    const msPassed = msNow - msPrev
+
+    if (msPassed < msPerFrame) return
+
+    const excessTime = msPassed % msPerFrame
+    msPrev = msNow - excessTime
+
+    frames++
+
+    if (msFPSPrev < msNow)
+    {
+      msFPSPrev = window.performance.now() + 1000
+      framesPerSec = frames;
+      frames = 0;
+    }
+
+    // ... render code
     cleanCanvas()
     // hay que dibujar los elementos
     drawBall()
     drawPaddle()
     drawBricks()
-    // drawScore()
+    drawUI()
 
     // colisiones y movimientos
     collisionDetection()
     ballMovement()
     paddleMovement()
 
-    window.requestAnimationFrame(draw)
   }
 
   draw()

README.md

@@ -51,6 +51,7 @@
 |  #   | Proyecto         | Descripción                                                              | Código                                                                                                                                                                                   | Website                                                       |
 | --- | ---------------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
 | 1   | **tinder-swipe** | Aprende a crear el efecto de swipe de Tinder con HTML, CSS y JavaScript. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/01-tinder-swipe) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/01-tinder-swipe) |
+| 2   | **arkanoid-game** | Juego mítico y clásico de Arkanoid para controlar con teclado. | [![GitHub Badge](https://img.shields.io/badge/Código-181717?logo=github&logoColor=fff&style=flat-square)](https://github.com/midudev/javascript-100-proyectos/tree/main/02-arkanoid-game) | [![Vercel Badge](https://img.shields.io/badge/Website-000?logo=vercel&logoColor=fff&style=flat-square)](https://www.javascript100.dev/02-arkanoid-game) |
 
 ## 🚀 Contribuir