diff --git a/assets/explosion.mp3 b/assets/explosion.mp3
new file mode 100644
index 0000000..54bff0d
Binary files /dev/null and b/assets/explosion.mp3 differ
diff --git a/assets/victoria.mp3 b/assets/victoria.mp3
new file mode 100644
index 0000000..68dad2d
Binary files /dev/null and b/assets/victoria.mp3 differ
diff --git a/game.js b/game.js
index da9ae85..9ccb296 100644
--- a/game.js
+++ b/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") {
- showBombas=!showBombas;
+ if (event.key === "1") {
+ 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));
- x = Math.floor(Math.random() * (COLUMNAS));
+ y = Math.floor(Math.random() * FILAS);
+ 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){
- ctx.drawImage(tilesMisc,64,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
+ if (showBombas && tablero[y][x].esMina) {
+ ctx.drawImage(
+ 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(){
- for (let y = 1; y < FILAS-1; y++) {
- ctx.drawImage(tilesBorde,96,0,cellSize,cellSize,0,y*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 dibujaBordesMapa() {
+ for (let y = 1; y < FILAS - 1; y++) {
+ ctx.drawImage(
+ tilesBorde,
+ 96,
+ 0,
+ cellSize,
+ cellSize,
+ 0,
+ y * 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;
- showBombas=false;
+ nBanderas = nBombas;
+ 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();
}
diff --git a/img/GameOver.png b/img/GameOver.png
new file mode 100644
index 0000000..dea7b18
Binary files /dev/null and b/img/GameOver.png differ
diff --git a/img/Victory.png b/img/Victory.png
new file mode 100644
index 0000000..d1df52a
Binary files /dev/null and b/img/Victory.png differ
diff --git a/img/tiles.png b/img/tiles.png
index 1396f12..f97763c 100644
Binary files a/img/tiles.png and b/img/tiles.png differ
diff --git a/index.html b/index.html
index 5d295a0..3838e7f 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,16 @@
+
-
- Buscainas
+
+ Buscaminas
+
+
+
-
+
+