Buscaminas en Javascript - Codigo Javascript

Crear un juego de Buscaminas en JavaScript es un proyecto más complejo que implica la generación de un tablero de juego, la gestión de las casillas, el seguimiento de minas y la lógica del juego. A continuación, te proporcionaré una explicación paso a paso de cómo crear este juego:

Paso 1: Preparación del archivo HTML y CSS

Comienza creando un archivo HTML básico y un archivo CSS para diseñar la interfaz del juego. El archivo HTML debe contener una cuadrícula donde se colocarán las casillas del Buscaminas.

<!DOCTYPE html>
<html>
<head>
    <title>Buscaminas</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>Buscaminas</h1>
    <div id="board"></div>
    <script src="script.js"></script>
</body>
</html>

Paso 2: Lógica del juego

Dentro del archivo JavaScript (script.js), implementa la lógica del juego. Esto incluye la generación aleatoria de minas en el tablero, la gestión de clics en las casillas y la verificación de si el jugador ha ganado o perdido.

const board = document.getElementById("board");
const gridSize = 10; // Tamaño del tablero
const mineCount = 20; // Cantidad de minas

let gameBoard = [];

function createBoard() {
    // Crea el tablero y llena con casillas vacías.
    for (let row = 0; row < gridSize; row++) {
        const rowArray = [];
        for (let col = 0; col < gridSize; col++) {
            rowArray.push({
                isMine: false,
                isRevealed: false,
                neighbors: 0
            });
        }
        gameBoard.push(rowArray);
    }
}

function plantMines() {
    // Coloca minas en ubicaciones aleatorias.
    for (let i = 0; i < mineCount; i++) {
        let row, col;
        do {
            row = Math.floor(Math.random() * gridSize);
            col = Math.floor(Math.random() * gridSize);
        } while (gameBoard[row][col].isMine);
        gameBoard[row][col].isMine = true;
    }
}

function revealCell(row, col) {
    if (row < 0 || col < 0 || row >= gridSize || col >= gridSize) {
        return; // Evitar desbordamiento del tablero.
    }
    
    const cell = gameBoard[row][col];
    if (cell.isRevealed) {
        return; // No reveles una casilla ya revelada.
    }
    
    cell.isRevealed = true;

    if (cell.isMine) {
        // El jugador ha perdido.
        // Mostrar todas las minas y terminar el juego.
    } else if (cell.neighbors === 0) {
        // Si la casilla no tiene minas vecinas, revela las casillas adyacentes.
        for (let r = row - 1; r <= row + 1; r++) {
            for (let c = col - 1; c <= col + 1; c++) {
                revealCell(r, c);
            }
        }
    }
}

function calculateNeighbors() {
    // Calcula el número de minas vecinas para cada casilla.
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            if (gameBoard[row][col].isMine) {
                continue;
            }
            
            for (let r = row - 1; r <= row + 1; r++) {
                for (let c = col - 1; c <= col + 1; c++) {
                    if (r >= 0 && c >= 0 && r < gridSize && c < gridSize && gameBoard[r][c].isMine) {
                        gameBoard[row][col].neighbors++;
                    }
                }
            }
        }
    }
}

function checkWin() {
    // Verifica si el jugador ha ganado.
    // El jugador gana si todas las casillas no minadas están reveladas.
    let unrevealedSafeCells = 0;
    for (let row = 0; row < gridSize; row++) {
        for (let col = 0; col < gridSize; col++) {
            if (!gameBoard[row][col].isMine && !gameBoard[row][col].isRevealed) {
                unrevealedSafeCells++;
            }
        }
    }
    
    if (unrevealedSafeCells === 0) {
        // El jugador ha ganado.
        // Muestra un mensaje de victoria.
    }
}

function handleClick(event) {
    const row = parseInt(event.target.dataset.row);
    const col = parseInt(event.target.dataset.col);

    revealCell(row, col);
    checkWin();
}

createBoard();
plantMines();
calculateNeighbors();

for (let row = 0; row < gridSize; row++) {
    for (let col = 0; col < gridSize; col++) {
        const cell = document.createElement("div");
        cell.classList.add("cell");
        cell.dataset.row = row;
        cell.dataset.col = col;
        cell.addEventListener("click", handleClick);
        board.appendChild(cell);
    }
}

Paso 3: Estilos CSS

Crea un archivo styles.css para dar estilo al tablero y las casillas del juego. Puedes personalizar el diseño a tu gusto.

Este es un resumen de los pasos necesarios para crear un juego de Buscaminas en JavaScript. Puedes personalizar y mejorar el juego agregando características adicionales, como un temporizador o una opción para reiniciar el juego. ¡Diviértete creando y jugando el juego del Buscaminas!

Más juegos en Javascript

Juego	Descripción
3 en raya	Código para que puedas jugar al 3 en raya
Ahorcado	Juego del ahorcado, divertido juego donde definimos toda la lógica y la interfaz
Buscaminas	Implementación JS del juego del buscaminas