Version totalmente funcional

game.js

@@ -1,3 +1,5 @@
+const audio = document.getElementById("audio");
+const audioVictory = document.getElementById("audioVictory");
 const canvas = document.getElementById("tablero");
 const ctx = canvas.getContext("2d");
 
@@ -8,31 +10,37 @@ const tiempo = document.getElementById("tiempo");
 const FILAS = 25;
 const COLUMNAS = 25;
 const cellSize = 32;
-const nBombas = 50;
+const nBombas = 60;
 
+const tilesGameOver = new Image();
+tilesGameOver.src = "./img/GameOver.png";
+
+const tilesVictory = new Image();
+tilesVictory.src = "./img/Victory.png";
 
 const tilesBorde = new Image();
-tilesBorde.src = './img/borde.png';
+tilesBorde.src = "./img/borde.png";
 
 const tilesMisc = new Image();
-tilesMisc.src = './img/tiles.png';
+tilesMisc.src = "./img/tiles.png";
 
-let nBanderas=nBombas;
+let nBanderas = nBombas;
 let tiempoTranscurrido = 0;
 let showBombas = false;
 let cronometro;
 let tablero = [];
+let loopHandle;
 
 canvas.width = COLUMNAS * cellSize;
 canvas.height = FILAS * cellSize;
 
 function handleKey(event) {
- if (event.key === "1") {
+  if (event.key === "1") {
-    showBombas=!showBombas;
+    showBombas = !showBombas;
   } else if (event.key === "Escape") {
     gameOver();
   }
-};
+}
 
 function handleClick(event) {
   const { x, y } = getCellCoordinates(event);
@@ -69,8 +77,8 @@ function generaTablero() {
   for (let z = 0; z < nBombas; z++) {
     let x, y;
     do {
-      y = Math.floor(Math.random() * (FILAS));
+      y = Math.floor(Math.random() * FILAS);
-      x = Math.floor(Math.random() * (COLUMNAS));
+      x = Math.floor(Math.random() * COLUMNAS);
     } while (tablero[y][x].esMina);
     tablero[y][x].esMina = true;
 
@@ -89,7 +97,7 @@ function generaTablero() {
 function levantaCelda(y, x) {
   if (!tablero[y][x].abierto) {
     tablero[y][x].abierto = true;
-    if (tablero[y][x].tieneFlag){
+    if (tablero[y][x].tieneFlag) {
       tablero[y][x].tieneFlag = false;
       nBanderas++;
     }
@@ -109,6 +117,18 @@ function levantaCelda(y, x) {
       }
     }
     if (tablero[y][x].esMina) {
+      audio.play();
+      ctx.drawImage(
+        tilesMisc,
+        128,
+        0,
+        cellSize,
+        cellSize,
+        x * cellSize,
+        y * cellSize,
+        cellSize,
+        cellSize
+      );
       gameOver();
     } else if (comprobarVictoria()) {
       victoria();
@@ -124,66 +144,174 @@ function comprobarVictoria() {
 
 function marcaFlagCelda(y, x) {
   if (!tablero[y][x].abierto) {
-    if (tablero[y][x].tieneFlag){
+    if (tablero[y][x].tieneFlag) {
       tablero[y][x].tieneFlag = false;
       nBanderas++;
-    }else if (nBanderas>0){
+    } else if (nBanderas > 0) {
       tablero[y][x].tieneFlag = true;
       nBanderas--;
     }
   }
 }
 
-
 function dibujaTablero() {
   for (let y = 0; y < FILAS; y++) {
     for (let x = 0; x < COLUMNAS; x++) {
       if (!tablero[y][x].abierto) {
-        ctx.drawImage(tilesMisc,32,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
+        ctx.drawImage(
+          tilesMisc,
+          32,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
       } else {
-        ctx.drawImage(tilesMisc,96,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
+        ctx.drawImage(
+          tilesMisc,
+          96,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
         if (tablero[y][x].nAdyacentes > 0) {
           ctx.font = "24px Bungee Spice";
           //ctx.fillStyle = "black";
           const text = tablero[y][x].nAdyacentes;
           const textX =
-          x * cellSize + cellSize / 2 - ctx.measureText(text).width / 2;
+            x * cellSize + cellSize / 2 - ctx.measureText(text).width / 2;
           const textY = y * cellSize + cellSize / 2 + 10;
           ctx.fillText(text, textX, textY);
         }
       }
-      
+      if (showBombas && tablero[y][x].esMina) {
-      if (showBombas && tablero[y][x].esMina){
+        ctx.drawImage(
-        ctx.drawImage(tilesMisc,64,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
+          tilesMisc,
+          64,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
       }
       if (tablero[y][x].tieneFlag) {
-        ctx.drawImage(tilesMisc,0,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
+        ctx.drawImage(
+          tilesMisc,
+          0,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
       }
     }
   }
   dibujaBordesMapa();
 }
 
-function dibujaBordesMapa(){
+function dibujaBordesMapa() {
-  for (let y = 1; y < FILAS-1; y++) {
+  for (let y = 1; y < FILAS - 1; y++) {
-    ctx.drawImage(tilesBorde,96,0,cellSize,cellSize,0,y*cellSize,cellSize,cellSize);
+    ctx.drawImage(
-    ctx.drawImage(tilesBorde,96,32,cellSize,cellSize,(COLUMNAS-1)*cellSize,y*cellSize,cellSize,cellSize);
+      tilesBorde,
- }
+      96,
- for (let x = 1; x < COLUMNAS-1; x++) {
+      0,
-   ctx.drawImage(tilesBorde,64,0,cellSize,cellSize,x*cellSize,0,cellSize,cellSize);
+      cellSize,
-   ctx.drawImage(tilesBorde,64,32,cellSize,cellSize,x*cellSize,(FILAS-1)*cellSize,cellSize,cellSize);
+      cellSize,
- }
+      0,
- ctx.drawImage(tilesBorde,0,0,cellSize,cellSize,0,0,cellSize,cellSize);
+      y * cellSize,
- ctx.drawImage(tilesBorde,32,0,cellSize,cellSize,(FILAS-1)*cellSize,0,cellSize,cellSize);
+      cellSize,
- ctx.drawImage(tilesBorde,0,32,cellSize,cellSize,0,(COLUMNAS-1)*cellSize,cellSize,cellSize);
+      cellSize
- ctx.drawImage(tilesBorde,32,32,cellSize,cellSize,(FILAS-1)*cellSize,(COLUMNAS-1)*cellSize,cellSize,cellSize);
+    );
+    ctx.drawImage(
+      tilesBorde,
+      96,
+      32,
+      cellSize,
+      cellSize,
+      (COLUMNAS - 1) * cellSize,
+      y * cellSize,
+      cellSize,
+      cellSize
+    );
+  }
+  for (let x = 1; x < COLUMNAS - 1; x++) {
+    ctx.drawImage(
+      tilesBorde,
+      64,
+      0,
+      cellSize,
+      cellSize,
+      x * cellSize,
+      0,
+      cellSize,
+      cellSize
+    );
+    ctx.drawImage(
+      tilesBorde,
+      64,
+      32,
+      cellSize,
+      cellSize,
+      x * cellSize,
+      (FILAS - 1) * cellSize,
+      cellSize,
+      cellSize
+    );
+  }
+  ctx.drawImage(tilesBorde, 0, 0, cellSize, cellSize, 0, 0, cellSize, cellSize);
+  ctx.drawImage(
+    tilesBorde,
+    32,
+    0,
+    cellSize,
+    cellSize,
+    (FILAS - 1) * cellSize,
+    0,
+    cellSize,
+    cellSize
+  );
+  ctx.drawImage(
+    tilesBorde,
+    0,
+    32,
+    cellSize,
+    cellSize,
+    0,
+    (COLUMNAS - 1) * cellSize,
+    cellSize,
+    cellSize
+  );
+  ctx.drawImage(
+    tilesBorde,
+    32,
+    32,
+    cellSize,
+    cellSize,
+    (FILAS - 1) * cellSize,
+    (COLUMNAS - 1) * cellSize,
+    cellSize,
+    cellSize
+  );
 }
 
 function gameLoop() {
   tiempo.textContent = convertirTiempo(tiempoTranscurrido);
   banderas.textContent = nBanderas;
   dibujaTablero();
-  window.requestAnimationFrame(gameLoop);
+  loopHandle = window.requestAnimationFrame(gameLoop);
 }
 
 function iniciarCronometro() {
@@ -208,8 +336,8 @@ function convertirTiempo(tiempoSegundos) {
 function iniciarPartida() {
   startButton.blur();
   startButton.style.visibility = "hidden";
-  nBanderas=nBombas;
+  nBanderas = nBombas;
-  showBombas=false;
+  showBombas = false;
   canvas.addEventListener("click", handleClick);
   canvas.addEventListener("contextmenu", handleContextMenu);
   document.addEventListener("keydown", handleKey);
@@ -222,15 +350,56 @@ function terminarPartida() {
   canvas.removeEventListener("click", handleClick);
   canvas.removeEventListener("contextmenu", handleContextMenu);
   document.removeEventListener("keydown", handleKey);
+  window.cancelAnimationFrame(loopHandle);
   detenerCronometro();
   startButton.style.visibility = "visible";
   startButton.focus();
 }
 
 function victoria() {
+  audioVictory.play();
+  const tamX = canvas.width / 1.2;
+  const tamY = canvas.height / 1.2;
+  const offsetX = (canvas.width - tamX) / 2;
+  const offsetY = (canvas.height - tamY) / 2;
+  ctx.drawImage(tilesVictory, offsetX, offsetY, tamX, tamY);
   terminarPartida();
 }
 
 function gameOver() {
+  for (let y = 0; y < FILAS; y++) {
+    for (let x = 0; x < COLUMNAS; x++) {
+      if (!tablero[y][x].abierto && tablero[y][x].esMina) {
+        ctx.drawImage(
+          tilesMisc,
+          96,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
+        ctx.drawImage(
+          tilesMisc,
+          64,
+          0,
+          cellSize,
+          cellSize,
+          x * cellSize,
+          y * cellSize,
+          cellSize,
+          cellSize
+        );
+      }
+    }
+  }
+  dibujaBordesMapa();
+  const tamX = canvas.width / 1.5;
+  const tamY = canvas.height / 1.5;
+  const offsetX = (canvas.width - tamX) / 2;
+  const offsetY = (canvas.height - tamY) / 2;
+  ctx.drawImage(tilesGameOver, offsetX, offsetY, tamX, tamY);
   terminarPartida();
 }

index.html

@@ -1,14 +1,16 @@
 <!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 href="https://fonts.googleapis.com/css2?family=Bungee+Spice&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">    
+    <link rel="stylesheet" href="style.css">
-    <title>Buscainas</title>
+    <title>Buscaminas</title>
 </head>
+
 <body>
 
     <div id="gui">
@@ -19,10 +21,14 @@
         <div id="canvas_container">
             <canvas id="tablero"></canvas>
         </div>
-            <button id="startButton" onclick="iniciarPartida()">Start</button>
+        <button id="startButton" onclick="iniciarPartida()">Start</button>
-            <a id="repositorioGit" href="https://git.marklogo.duckdns.org/" target="_blank"> <i class="ti ti-brand-github"></i> Repositorio Git</a>
+        <a id="repositorioGit" href="https://git.marklogo.duckdns.org/" target="_blank"> <i
+                class="ti ti-brand-github"></i> Repositorio Git</a>
 
     </div>
+    <audio id="audio" src="./assets/explosion.mp3" preload="auto"></audio>
+    <audio id="audioVictory" src="./assets/victoria.mp3" preload="auto"></audio>
     <script src="game.js"></script>
 </body>
-</html>
+
+</html>