first commit

game.js

@@ -0,0 +1,192 @@
+const canvas = document.getElementById("tablero");
+const ctx = canvas.getContext("2d");
+
+const startButton = document.getElementById("startButton");
+const banderas = document.getElementById("banderas");
+const tiempo = document.getElementById("tiempo");
+
+const FILAS = 25;
+const COLUMNAS = 25;
+const cellSize = 32;
+const nBombas = 50;
+
+let nBanderas=nBombas;
+let tiempoTranscurrido = 0;
+let cronometro;
+let tablero = [];
+
+canvas.width = COLUMNAS * cellSize;
+canvas.height = FILAS * cellSize;
+
+function handleClick(event) {
+  const { x, y } = getCellCoordinates(event);
+  if (!tablero[y][x].tieneFlag) levantaCelda(y, x);
+}
+
+function handleContextMenu(event) {
+  event.preventDefault();
+  const { x, y } = getCellCoordinates(event);
+  marcaFlagCelda(y, x);
+}
+
+function getCellCoordinates(event) {
+  const rect = canvas.getBoundingClientRect();
+  return {
+    x: Math.floor((event.x - rect.left) / cellSize),
+    y: Math.floor((event.y - rect.top) / cellSize),
+  };
+}
+
+function generaTablero() {
+  for (let y = 0; y < FILAS; y++) {
+    tablero[y] = [];
+    for (let x = 0; x < COLUMNAS; x++) {
+      tablero[y][x] = {
+        esMina: false,
+        abierto: false,
+        tieneFlag: false,
+        nAdyacentes: 0,
+      };
+    }
+  }
+
+  for (let z = 0; z < nBombas; z++) {
+    let x, y;
+    do {
+      y = Math.floor(Math.random() * FILAS);
+      x = Math.floor(Math.random() * COLUMNAS);
+    } while (tablero[y][x].esMina);
+    tablero[y][x].esMina = true;
+
+    for (let i = -1; i <= 1; i++) {
+      for (let j = -1; j <= 1; j++) {
+        if (y + i >= 0 && y + i < FILAS && x + j >= 0 && x + j < COLUMNAS) {
+          if (!tablero[y + i][x + j].esMina) {
+            tablero[y + i][x + j].nAdyacentes += 1;
+          }
+        }
+      }
+    }
+  }
+}
+
+function levantaCelda(y, x) {
+  if (!tablero[y][x].abierto) {
+    tablero[y][x].abierto = true;
+    tablero[y][x].tieneFlag = false;
+    if (tablero[y][x].nAdyacentes === 0 && !tablero[y][x].esMina) {
+      for (let i = -1; i <= 1; i++) {
+        for (let j = -1; j <= 1; j++) {
+          if (
+            y + i >= 0 &&
+            y + i < FILAS &&
+            x + j >= 0 &&
+            x + j < COLUMNAS &&
+            !(i === 0 && j === 0)
+          ) {
+            levantaCelda(y + i, x + j);
+          }
+        }
+      }
+    }
+    if (tablero[y][x].esMina) {
+      gameOver();
+    } else if (comprobarVictoria()) {
+      victoria();
+    }
+  }
+}
+
+function comprobarVictoria() {
+  return tablero.every((row) =>
+    row.every((cell) => cell.abierto || cell.esMina)
+  );
+}
+
+function marcaFlagCelda(y, x) {
+  if (!tablero[y][x].abierto) {
+    tablero[y][x].tieneFlag = !tablero[y][x].tieneFlag;
+  }
+}
+
+function dibujaTablero() {
+  for (let y = 0; y < FILAS; y++) {
+    for (let x = 0; x < COLUMNAS; x++) {
+      ctx.strokeStyle = "red";
+      ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
+      if (!tablero[y][x].abierto) {
+        ctx.fillStyle = "blue";
+        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+      } else {
+        ctx.fillStyle = "green";
+        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+        if (tablero[y][x].nAdyacentes > 0) {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "black";
+          const text = tablero[y][x].nAdyacentes;
+          const textX =
+            x * cellSize + cellSize / 2 - ctx.measureText(text).width / 2;
+          const textY = y * cellSize + cellSize / 2 + 10; // Ajusta verticalmente para centrar
+          ctx.fillText(text, textX, textY);
+        }
+      }
+
+      if (tablero[y][x].tieneFlag) {
+        ctx.fillStyle = "yellow";
+        ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
+      }
+    }
+  }
+}
+
+function gameLoop() {
+  tiempo.textContent = convertirTiempo(tiempoTranscurrido);
+  banderas.textContent = nBanderas;
+  dibujaTablero();
+  window.requestAnimationFrame(gameLoop);
+}
+
+function iniciarCronometro() {
+  tiempoTranscurrido = 0;
+  cronometro = setInterval(() => {
+    tiempoTranscurrido++;
+  }, 1000);
+}
+function detenerCronometro() {
+  clearInterval(cronometro);
+}
+function convertirTiempo(tiempoSegundos) {
+  const horas = Math.floor(tiempoSegundos / 3600);
+  const minutos = Math.floor((tiempoSegundos % 3600) / 60);
+  const segundos = tiempoSegundos % 60;
+  const horasStr = String(horas).padStart(2, "0");
+  const minutosStr = String(minutos).padStart(2, "0");
+  const segundosStr = String(segundos).padStart(2, "0");
+  return `${horasStr}:${minutosStr}:${segundosStr}`;
+}
+
+function iniciarPartida() {
+  startButton.blur();
+  startButton.style.visibility = "hidden";
+  canvas.addEventListener("click", handleClick);
+  canvas.addEventListener("contextmenu", handleContextMenu);
+  generaTablero();
+  iniciarCronometro();
+  gameLoop();
+}
+
+function terminarPartida() {
+  canvas.removeEventListener("click", handleClick);
+  canvas.removeEventListener("contextmenu", handleContextMenu);
+  detenerCronometro();
+  startButton.style.visibility = "visible";
+  startButton.focus();
+}
+
+function victoria() {
+  terminarPartida();
+}
+
+function gameOver() {
+  terminarPartida();
+}

index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@2.44.0/tabler-icons.min.css">
+    <link rel="stylesheet" href="style.css">    
+    <title>Buscainas</title>
+</head>
+<body>
+
+    <div id="gui">
+        <div id="marcador">
+            <span>🚩</span><span id="banderas">00</span>
+            <span>⏳</span><span id="tiempo">00:00:00</span>
+        </div>
+        <div id="canvas_container">
+            <canvas id="tablero"></canvas>
+        </div>
+        <button id="startButton" onclick="iniciarPartida()">Start</button>
+    </div>
+    <textarea id="debug" cols="30" rows="10"></textarea>
+    <script src="game.js"></script>
+</body>
+</html>

style.css

@@ -0,0 +1,65 @@
+* {
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  background: linear-gradient(to bottom right, #0f2027, #203a43, #2c5364);
+  min-height: 100vh;
+  min-width: 100vw;
+  color: white;
+  font-family: "Press Start 2P", cursive;
+}
+
+#gui {
+  padding-top: 2%;
+  width: fit-content;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+#marcador {
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+#canvas_container {
+  border: 4px solid white;
+}
+
+#tablero {
+  background-color: #282829;
+}
+
+button {
+  font-size: 16px;
+  background-color: #4caf50;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  margin: 4px 2px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+button:hover {
+  background-color: #45a049;
+}
+
+#debug {
+  position: absolute;
+  bottom: 2%;
+  left: 1rem;
+  background-color: transparent;
+  color: white;
+  /* display: none; */
+}