Añadidos juegos

ladrillos/script.js

@@ -0,0 +1,147 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreSpan = document.getElementById('score-value');
+const restartBtn = document.getElementById('restart-btn');
+const gameOverDiv = document.getElementById('game-over-message');
+
+const ballRadius = 8;
+let x, y, dx, dy;
+const paddleHeight = 12, paddleWidth = 75;
+let paddleX;
+const brickRowCount = 5, brickColumnCount = 7;
+const brickWidth = 60, brickHeight = 20, brickPadding = 10, brickOffsetTop = 30, brickOffsetLeft = 30;
+let bricks = [];
+let score, gameOver;
+
+function setupBricks() {
+  bricks = [];
+  for(let c=0; c<brickColumnCount; c++) {
+    bricks[c] = [];
+    for(let r=0; r<brickRowCount; r++) {
+      bricks[c][r] = { x:0, y:0, status:1 };
+    }
+  }
+}
+
+function startGame() {
+  x = canvas.width/2;
+  y = canvas.height-30;
+  dx = 3;
+  dy = -3;
+  paddleX = (canvas.width-paddleWidth)/2;
+  score = 0;
+  scoreSpan.textContent = score;
+  gameOver = false;
+  gameOverDiv.textContent = '';
+  setupBricks();
+  document.addEventListener("mousemove", mouseMoveHandler);
+  draw();
+}
+
+function mouseMoveHandler(e) {
+  const rect = canvas.getBoundingClientRect();
+  let relativeX = e.clientX - rect.left;
+  if(relativeX > 0 && relativeX < canvas.width) {
+    paddleX = relativeX - paddleWidth/2;
+    if(paddleX < 0) paddleX = 0;
+    if(paddleX + paddleWidth > canvas.width) paddleX = canvas.width - paddleWidth;
+  }
+}
+
+function collisionDetection() {
+  for(let c=0; c<brickColumnCount; c++) {
+    for(let r=0; r<brickRowCount; r++) {
+      const b = bricks[c][r];
+      if(b.status == 1) {
+        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {
+          dy = -dy;
+          b.status = 0;
+          score++;
+          scoreSpan.textContent = score;
+          if(score == brickRowCount*brickColumnCount) {
+            gameOver = true;
+            gameOverDiv.textContent = "¡Ganaste! 🏆";
+            return;
+          }
+        }
+      }
+    }
+  }
+}
+
+function drawBall() {
+  ctx.beginPath();
+  ctx.arc(x, y, ballRadius, 0, Math.PI*2);
+  ctx.fillStyle = "#f9d923";
+  ctx.fill();
+  ctx.closePath();
+}
+
+function drawPaddle() {
+  ctx.beginPath();
+  ctx.rect(paddleX, canvas.height-paddleHeight-5, paddleWidth, paddleHeight);
+  ctx.fillStyle = "#e94560";
+  ctx.fill();
+  ctx.closePath();
+}
+
+function drawBricks() {
+  for(let c=0; c<brickColumnCount; c++) {
+    for(let r=0; r<brickRowCount; r++) {
+      if(bricks[c][r].status == 1) {
+        const brickX = (c*(brickWidth+brickPadding))+brickOffsetLeft;
+        const brickY = (r*(brickHeight+brickPadding))+brickOffsetTop;
+        bricks[c][r].x = brickX;
+        bricks[c][r].y = brickY;
+        ctx.beginPath();
+        ctx.rect(brickX, brickY, brickWidth, brickHeight);
+        ctx.fillStyle = "#393e46";
+        ctx.strokeStyle = "#f9d923";
+        ctx.fill();
+        ctx.stroke();
+        ctx.closePath();
+      }
+    }
+  }
+}
+
+function draw() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawBricks();
+  drawBall();
+  drawPaddle();
+  collisionDetection();
+
+  // Rebote en las paredes
+  if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
+    dx = -dx;
+  }
+  if(y + dy < ballRadius) {
+    dy = -dy;
+  } else if(y + dy > canvas.height-ballRadius-paddleHeight-5) {
+    // Rebote en la paleta
+    if(x > paddleX && x < paddleX + paddleWidth) {
+      dy = -dy;
+    } else if (y + dy > canvas.height-ballRadius) {
+      // GAME OVER
+      gameOver = true;
+      gameOverDiv.textContent = "¡Game Over! 😢";
+      return;
+    }
+  }
+
+  x += dx;
+  y += dy;
+
+  if(!gameOver) {
+    requestAnimationFrame(draw);
+  }
+}
+
+restartBtn.onclick = function() {
+  document.removeEventListener("mousemove", mouseMoveHandler);
+  startGame();
+};
+
+// Inicio
+startGame();