From e60896698a95b4f5403ccf0593500467db549cc1 Mon Sep 17 00:00:00 2001 From: Marklogo Date: Thu, 14 Mar 2024 01:36:42 +0100 Subject: [PATCH] first commit --- README.md | 0 game.js | 192 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 26 ++++++++ style.css | 65 ++++++++++++++++++ 4 files changed, 283 insertions(+) create mode 100644 README.md create mode 100644 game.js create mode 100644 index.html create mode 100644 style.css diff --git a/README.md b/README.md new file mode 100644 index 0000000..e69de29 diff --git a/game.js b/game.js new file mode 100644 index 0000000..c2d125a --- /dev/null +++ b/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(); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..069a99d --- /dev/null +++ b/index.html @@ -0,0 +1,26 @@ + + + + + + + + + Buscainas + + + +
+
+ 🚩00 + ⏳00:00:00 +
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a968bdd --- /dev/null +++ b/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; */ +}