Version totalmente funcional
This commit is contained in:
parent
1626353e07
commit
674afa8e7a
BIN
assets/explosion.mp3
Normal file
BIN
assets/explosion.mp3
Normal file
Binary file not shown.
BIN
assets/victoria.mp3
Normal file
BIN
assets/victoria.mp3
Normal file
Binary file not shown.
241
game.js
241
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();
|
||||
}
|
||||
|
|
|
|||
BIN
img/GameOver.png
Normal file
BIN
img/GameOver.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
BIN
img/Victory.png
Normal file
BIN
img/Victory.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
img/tiles.png
BIN
img/tiles.png
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
16
index.html
16
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">
|
||||
<title>Buscainas</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<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>
|
||||
<a id="repositorioGit" href="https://git.marklogo.duckdns.org/" target="_blank"> <i class="ti ti-brand-github"></i> Repositorio Git</a>
|
||||
<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>
|
||||
|
||||
</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>
|
||||
Loading…
Reference in New Issue
Block a user