Primera version funcional
This commit is contained in:
parent
4057c4fa84
commit
1626353e07
78
game.js
78
game.js
|
|
@ -10,14 +10,30 @@ const COLUMNAS = 25;
|
|||
const cellSize = 32;
|
||||
const nBombas = 50;
|
||||
|
||||
|
||||
const tilesBorde = new Image();
|
||||
tilesBorde.src = './img/borde.png';
|
||||
|
||||
const tilesMisc = new Image();
|
||||
tilesMisc.src = './img/tiles.png';
|
||||
|
||||
let nBanderas=nBombas;
|
||||
let tiempoTranscurrido = 0;
|
||||
let showBombas = false;
|
||||
let cronometro;
|
||||
let tablero = [];
|
||||
|
||||
canvas.width = COLUMNAS * cellSize;
|
||||
canvas.height = FILAS * cellSize;
|
||||
|
||||
function handleKey(event) {
|
||||
if (event.key === "1") {
|
||||
showBombas=!showBombas;
|
||||
} else if (event.key === "Escape") {
|
||||
gameOver();
|
||||
}
|
||||
};
|
||||
|
||||
function handleClick(event) {
|
||||
const { x, y } = getCellCoordinates(event);
|
||||
if (!tablero[y][x].tieneFlag) levantaCelda(y, x);
|
||||
|
|
@ -53,8 +69,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;
|
||||
|
||||
|
|
@ -73,7 +89,10 @@ function generaTablero() {
|
|||
function levantaCelda(y, x) {
|
||||
if (!tablero[y][x].abierto) {
|
||||
tablero[y][x].abierto = true;
|
||||
tablero[y][x].tieneFlag = false;
|
||||
if (tablero[y][x].tieneFlag){
|
||||
tablero[y][x].tieneFlag = false;
|
||||
nBanderas++;
|
||||
}
|
||||
if (tablero[y][x].nAdyacentes === 0 && !tablero[y][x].esMina) {
|
||||
for (let i = -1; i <= 1; i++) {
|
||||
for (let j = -1; j <= 1; j++) {
|
||||
|
|
@ -105,38 +124,59 @@ function comprobarVictoria() {
|
|||
|
||||
function marcaFlagCelda(y, x) {
|
||||
if (!tablero[y][x].abierto) {
|
||||
tablero[y][x].tieneFlag = !tablero[y][x].tieneFlag;
|
||||
if (tablero[y][x].tieneFlag){
|
||||
tablero[y][x].tieneFlag = false;
|
||||
nBanderas++;
|
||||
}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++) {
|
||||
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);
|
||||
ctx.drawImage(tilesMisc,32,0,cellSize,cellSize,x * cellSize, y * cellSize,cellSize,cellSize);
|
||||
} else {
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(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 = "30px Arial";
|
||||
ctx.fillStyle = "black";
|
||||
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;
|
||||
const textY = y * cellSize + cellSize / 2 + 10; // Ajusta verticalmente para centrar
|
||||
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 (tablero[y][x].tieneFlag) {
|
||||
ctx.fillStyle = "yellow";
|
||||
ctx.fillRect(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 gameLoop() {
|
||||
|
|
@ -168,8 +208,11 @@ function convertirTiempo(tiempoSegundos) {
|
|||
function iniciarPartida() {
|
||||
startButton.blur();
|
||||
startButton.style.visibility = "hidden";
|
||||
nBanderas=nBombas;
|
||||
showBombas=false;
|
||||
canvas.addEventListener("click", handleClick);
|
||||
canvas.addEventListener("contextmenu", handleContextMenu);
|
||||
document.addEventListener("keydown", handleKey);
|
||||
generaTablero();
|
||||
iniciarCronometro();
|
||||
gameLoop();
|
||||
|
|
@ -178,6 +221,7 @@ function iniciarPartida() {
|
|||
function terminarPartida() {
|
||||
canvas.removeEventListener("click", handleClick);
|
||||
canvas.removeEventListener("contextmenu", handleContextMenu);
|
||||
document.removeEventListener("keydown", handleKey);
|
||||
detenerCronometro();
|
||||
startButton.style.visibility = "visible";
|
||||
startButton.focus();
|
||||
|
|
|
|||
BIN
img/sheet.png
BIN
img/sheet.png
Binary file not shown.
|
Before Width: | Height: | Size: 74 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
BIN
img/tiles.png
Normal file
BIN
img/tiles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -4,6 +4,7 @@
|
|||
<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>
|
||||
|
|
@ -18,9 +19,10 @@
|
|||
<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>
|
||||
|
||||
</div>
|
||||
<textarea id="debug" cols="30" rows="10"></textarea>
|
||||
<script src="game.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
|
|
|||
16
style.css
16
style.css
|
|
@ -55,11 +55,13 @@ button:hover {
|
|||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#debug {
|
||||
position: absolute;
|
||||
bottom: 2%;
|
||||
left: 1rem;
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
/* display: none; */
|
||||
#repositorioGit {
|
||||
display: inline-block;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 10px 20px;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user