<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscaminas Pro</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
:root {
--bg-color: radial-gradient(circle, #1e3c72, #2a5298);
--text-color: white;
--button-bg: linear-gradient(90deg, #ff8c00, #e52e71);
--button-hover-bg: linear-gradient(90deg, #ffa500, #ff6f91);
--canvas-bg: #34495e;
--message-color: #2ecc71;
--timer-color: #f1c40f;
--counter-color: #e74c3c;
--select-bg: #ff8c00; /* Fondo sólido para el select en modo claro */
--select-text: white; /* Texto blanco para el select en modo claro */
}
.dark-theme {
--bg-color: radial-gradient(circle, #2c3e50, #4ca1af);
--text-color: #ecf0f1;
--button-bg: linear-gradient(90deg, #3498db, #9b59b6);
--button-hover-bg: linear-gradient(90deg, #2980b9, #8e44ad);
--canvas-bg: #2c3e50;
--message-color: #1abc9c;
--timer-color: #f39c12;
--counter-color: #c0392b;
--select-bg: #3498db; /* Fondo sólido para el select en modo oscuro */
--select-text: #ecf0f1; /* Texto claro para el select en modo oscuro */
}
body {
font-family: 'Roboto', sans-serif;
text-align: center;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bg-color);
color: var(--text-color);
transition: background 0.5s, color 0.5s;
}
h1 {
font-size: 3rem;
margin: 20px 0;
text-shadow: 2px 4px 10px rgba(0, 0, 0, 0.7);
}
#controls {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
align-items: center;
}
button, select {
padding: 10px 20px;
margin: 5px;
background: var(--button-bg);
color: var(--text-color);
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 25px;
cursor: pointer;
transition: transform 0.3s, box-shadow 0.3s, background 0.5s;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
button:hover, select:hover {
transform: scale(1.05);
box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.8);
background: var(--button-hover-bg);
}
select {
background: var(--select-bg);
color: var(--select-text);
/* Quitar el fondo de gradiente para mejorar la legibilidad */
background-image: none;
/* Asegurar que el texto no esté cortado */
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
/* Estilización de las opciones del select */
select option {
background: var(--bg-color);
color: var(--text-color);
}
/* Añadir un ícono de flecha para el select (Opcional) */
select {
background: var(--select-bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path fill="%23ffffff" d="M0 3l5 5 5-5z"/></svg>') no-repeat right 10px center;
background-size: 10px;
padding-right: 30px; /* Espacio para la flecha */
}
#gameCanvas {
border: 5px solid #ecf0f1;
background: var(--canvas-bg);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.7);
margin-top: 20px;
border-radius: 10px;
transition: background 0.5s;
touch-action: manipulation;
}
#message {
margin-top: 20px;
font-size: 1.5rem;
color: var(--message-color);
text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
animation: fade-in 0.5s ease-in-out;
}
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
#themeToggle {
position: absolute;
top: 10px;
right: 10px;
padding: 10px 20px;
border-radius: 20px;
cursor: pointer;
background: var(--button-bg);
color: var(--text-color);
font-size: 14px;
font-weight: bold;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
border: none;
transition: transform 0.3s, box-shadow 0.3s, background 0.5s;
}
#themeToggle:hover {
background: var(--button-hover-bg);
transform: scale(1.05);
}
#statusBar {
display: flex;
justify-content: center;
gap: 50px;
margin-top: 20px;
font-size: 1.2rem;
}
.status-item {
display: flex;
align-items: center;
gap: 10px;
}
.status-item span {
font-weight: bold;
}
/* Responsive Design */
@media (max-width: 600px) {
#gameCanvas {
width: 90vw;
height: 90vw;
}
}
</style>
</head>
<body>
<h1>💎 Buscaminas Pro 💎</h1>
<div id="controls">
<select id="gridSize" aria-label="Seleccionar tamaño de la cuadrícula">
<option value="3">3 x 3</option>
<option value="5">5 x 5</option>
<option value="8" selected>8 x 8</option>
<option value="10">10 x 10</option>
</select>
<button onclick="startGame()" aria-label="Iniciar Juego">🚀 Iniciar Juego</button>
<button onclick="resetGame()" aria-label="Reiniciar Juego">🔄 Reiniciar Juego</button>
</div>
<div id="statusBar">
<div class="status-item">
<span>🕒 Tiempo:</span> <span id="timer">0</span> s
</div>
<div class="status-item">
<span>💣 Bombas:</span> <span id="bombCounter">0</span>
</div>
</div>
<canvas id="gameCanvas" width="500" height="500" aria-label="Tablero del Buscaminas"></canvas>
<div id="message" role="status" aria-live="polite"></div>
<button id="themeToggle" onclick="toggleTheme()" aria-label="Alternar Tema">🌙 Modo Noche</button>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSizeSelector = document.getElementById('gridSize');
const messageDiv = document.getElementById('message');
const themeToggle = document.getElementById('themeToggle');
const timerElement = document.getElementById('timer');
const bombCounterElement = document.getElementById('bombCounter');
let rows, cols, cellSize;
let grid = [];
let revealed = [];
let flagged = [];
let totalBombs = 0;
let cellsRevealed = 0;
let gameOver = false;
let timer = 0;
let timerInterval;
function createGrid() {
grid = Array.from({ length: rows }, () =>
Array.from({ length: cols }, () => Math.random() < 0.2 ? '💣' : 0)
);
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (grid[row][col] === '💣') continue;
let bombCount = 0;
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
const newRow = row + i;
const newCol = col + j;
if (
newRow >= 0 && newRow < rows &&
newCol >= 0 && newCol < cols &&
grid[newRow][newCol] === '💣'
) {
bombCount++;
}
}
}
grid[row][col] = bombCount;
}
}
totalBombs = grid.flat().filter(cell => cell === '💣').length;
bombCounterElement.textContent = totalBombs;
}
function initializeState() {
revealed = Array.from({ length: rows }, () => Array(cols).fill(false));
flagged = Array.from({ length: rows }, () => Array(cols).fill(false));
cellsRevealed = 0;
gameOver = false;
messageDiv.textContent = '';
timer = 0;
timerElement.textContent = timer;
bombCounterElement.textContent = totalBombs;
clearInterval(timerInterval);
timerInterval = setInterval(() => {
if (!gameOver) {
timer++;
timerElement.textContent = timer;
}
}, 1000);
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
ctx.strokeStyle = '#ecf0f1';
ctx.strokeRect(col * cellSize, row * cellSize, cellSize, cellSize);
if (revealed[row][col]) {
ctx.fillStyle = '#ecf0f1';
ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
ctx.fillStyle = '#2c3e50';
ctx.font = `${cellSize / 2}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const text = grid[row][col];
ctx.fillText(text !== 0 ? text : '', col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
} else if (flagged[row][col]) {
ctx.fillStyle = 'var(--canvas-bg)';
ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
ctx.fillStyle = 'red';
ctx.font = `${cellSize / 2}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('🚩', col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
} else {
ctx.fillStyle = 'var(--canvas-bg)';
ctx.fillRect(col * cellSize, row * cellSize, cellSize, cellSize);
}
}
}
}
function revealCell(row, col) {
if (row < 0 || row >= rows || col < 0 || col >= cols || revealed[row][col] || flagged[row][col] || gameOver) return;
revealed[row][col] = true;
cellsRevealed++;
if (grid[row][col] === '💣') {
gameOver = true;
clearInterval(timerInterval);
revealAllBombs();
drawGrid();
messageDiv.innerHTML = `💥 ¡Has perdido!<br>⏱️ Tiempo: ${timer} segundos 😊`;
return;
}
if (grid[row][col] === 0) {
for (let i = -1; i <= 1; i++) {
for (let j = -1; j <= 1; j++) {
revealCell(row + i, col + j);
}
}
}
drawGrid();
checkWin();
}
function revealAllBombs() {
for (let row = 0; row < rows; row++) {
for (let col = 0; col < cols; col++) {
if (grid[row][col] === '💣') {
revealed[row][col] = true;
}
}
}
}
function toggleFlag(row, col) {
if (row < 0 || row >= rows || col < 0 || col >= cols || revealed[row][col] || gameOver) return;
flagged[row][col] = !flagged[row][col];
bombCounterElement.textContent = totalBombs - flagged.flat().filter(Boolean).length;
drawGrid();
checkWin();
}
function checkWin() {
if (cellsRevealed === rows * cols - totalBombs) {
gameOver = true;
clearInterval(timerInterval);
messageDiv.innerHTML = `🎉 ¡Felicidades! Has ganado.<br>⏱️ Tiempo: ${timer} segundos 😃`;
}
}
canvas.addEventListener('click', (e) => {
if (gameOver) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const col = Math.floor(x / cellSize);
const row = Math.floor(y / cellSize);
revealCell(row, col);
});
canvas.addEventListener('contextmenu', (e) => {
e.preventDefault();
if (gameOver) return;
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const col = Math.floor(x / cellSize);
const row = Math.floor(y / cellSize);
toggleFlag(row, col);
});
// Soporte para dispositivos táctiles
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
if (gameOver) return;
const rect = canvas.getBoundingClientRect();
const touch = e.touches[0];
const x = touch.clientX - rect.left;
const y = touch.clientY - rect.top;
const col = Math.floor(x / cellSize);
const row = Math.floor(y / cellSize);
if (e.touches.length === 1) {
revealCell(row, col);
} else if (e.touches.length === 2) {
toggleFlag(row, col);
}
});
function startGame() {
rows = cols = parseInt(gridSizeSelector.value);
cellSize = Math.min(canvas.width, canvas.height) / cols;
createGrid();
initializeState();
drawGrid();
}
function resetGame() {
clearInterval(timerInterval);
startGame();
}
function toggleTheme() {
document.body.classList.toggle('dark-theme');
if (document.body.classList.contains('dark-theme')) {
themeToggle.textContent = '☀️ Modo Día';
} else {
themeToggle.textContent = '🌙 Modo Noche';
}
drawGrid();
}
// Iniciar el juego al cargar la página
window.onload = startGame;
</script>
</body>
</html>
!
