Okay, let's build a sleek, modern Minesweeper game with HTML, CSS, and JavaScript. Modern Minesweeper

Minesweeper

Difficulty:

0 0s

:root { --bg-color: #f0f2f5; --container-bg: #ffffff; --tile-hidden-bg: #d1d9e6; --tile-hidden-hover-bg: #c1c9d6; --tile-revealed-bg: #e4e9f2; --border-color: #b0b8c5; --shadow-light: #ffffff; --shadow-dark: #a3b1c6; --text-color: #333; --mine-color: #e74c3c; --flag-color: #f39c12; --safe-color: #2ecc71; --number-colors: #3498db, #2ecc71, #e74c3c, #9b59b6, #f1c40f, #1abc9c, #34495e, #7f8c8d; --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; --border-radius: 8px; --tile-size: 30px; /* Default for medium */ --transition-speed: 0.2s; } body { font-family: var(--font-family); background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; color: var(--text-color); padding: 20px; box-sizing: border-box; } .game-container { background-color: var(--container-bg); padding: 25px; border-radius: var(--border-radius); box-shadow: 7px 7px 15px var(--shadow-dark), -7px -7px 15px var(--shadow-light); text-align: center; max-width: 95vw; } h1 { margin-top: 0; margin-bottom: 20px; color: var(--text-color); font-weight: 600; } .controls { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 20px; gap: 15px; padding: 15px; background-color: var(--bg-color); border-radius: var(--border-radius); box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light); } .control-group label { margin-right: 5px; font-weight: 500; } select, button { padding: 8px 12px; border: none; border-radius: var(--border-radius); background-color: var(--tile-hidden-bg); box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); cursor: pointer; transition: all var(--transition-speed) ease; font-family: inherit; color: var(--text-color); } select:focus, button:focus { outline: none; box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); } button:hover { background-color: var(--tile-hidden-hover-bg); } button:active { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); } .status { display: flex; gap: 15px; font-weight: 500; font-size: 1.1em; } .status span { background-color: var(--bg-color); padding: 8px 12px; border-radius: var(--border-radius); box-shadow: inset 3px 3px 7px var(--shadow-dark), inset -3px -3px 7px var(--shadow-light); min-width: 70px; text-align: center; } .status i { margin-right: 5px; } #mine-counter i { color: var(--mine-color); } #timer i { color: #3498db; } /* Timer icon color */ #game-board-container { position: relative; display: inline-block; /* Fit container to board size */ overflow: auto; /* Add scrollbars if board is too large */ max-width: 100%; } #game-board { display: grid; border: 1px solid var(--border-color); background-color: var(--border-color); /* For grid gaps */ gap: 1px; /* Creates the border effect between tiles */ user-select: none; /* Prevent text selection */ margin: auto; /* Center the board if container is wider */ } .tile { width: var(--tile-size); height: var(--tile-size); background-color: var(--tile-hidden-bg); display: flex; justify-content: center; align-items: center; font-size: calc(var(--tile-size) * 0.6); font-weight: bold; cursor: pointer; transition: background-color var(--transition-speed) ease, transform 0.1s ease; box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.6), inset -2px -2px 4px rgba(0, 0, 0, 0.2); } .tile.hidden:hover { background-color: var(--tile-hidden-hover-bg); transform: scale(1.05); z-index: 1; } .tile.revealed { background-color: var(--tile-revealed-bg); cursor: default; box-shadow: inset 1px 1px 2px var(--shadow-dark); animation: revealAnimation var(--transition-speed) ease-out; } .tile.flagged::before { content: "🚩"; /* Using emoji */ /* Or use Font Awesome: font-family: "Font Awesome 6 Free"; content: "\f024"; font-weight: 900; color: var(--flag-color); */ font-size: calc(var(--tile-size) * 0.6); animation: flagAnimation 0.3s ease-out; } .tile.mine.revealed { background-color: var(--mine-color); color: white; } .tile.mine.revealed::before { content: "💣"; /* Using emoji */ /* Or use Font Awesome: font-family: "Font Awesome 6 Free"; content: "\f1e2"; font-weight: 900; */ font-size: calc(var(--tile-size) * 0.6); animation: mineRevealAnimation 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } /* Assign colors to numbers */ .tile.revealed[data-mines="1"] { color: var(--number-colors); } .tile.revealed[data-mines="2"] { color: nth(var(--number-colors), 2); } .tile.revealed[data-mines="3"] { color: nth(var(--number-colors), 3); } .tile.revealed[data-mines="4"] { color: nth(var(--number-colors), 4); } .tile.revealed[data-mines="5"] { color: nth(var(--number-colors), 5); } .tile.revealed[data-mines="6"] { color: nth(var(--number-colors), 6); } .tile.revealed[data-mines="7"] { color: nth(var(--number-colors), 7); } .tile.revealed[data-mines="8"] { color: nth(var(--number-colors), 8); } .message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.75); color: white; padding: 20px 40px; border-radius: var(--border-radius); font-size: 1.5em; font-weight: bold; z-index: 10; opacity: 1; transition: opacity 0.5s ease; } .message.hidden { opacity: 0; pointer-events: none; } .game-over #game-board { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; } /* Animations */ @keyframes revealAnimation { from { transform: scale(0.8); opacity: 0.5; } to { transform: scale(1); opacity: 1; } } @keyframes flagAnimation { from { transform: scale(0.5) rotate(-30deg); opacity: 0; } to { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes mineRevealAnimation { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } } /* Responsive Adjustments */ @media (max-width: 768px) { :root { --tile-size: 28px; } .controls { flex-direction: column; align-items: stretch; } .status { justify-content: space-around; width: 100%; } .game-container { padding: 15px; } h1 { font-size: 1.8em; } } @media (max-width: 480px) { :root { --tile-size: 25px; } body { padding: 10px; } .game-container { padding: 10px; } h1 { font-size: 1.5em; margin-bottom: 15px; } .controls { padding: 10px; gap: 10px; } select, button, .status span { padding: 6px 10px; font-size: 0.9em; } .status { font-size: 1em; gap: 10px; } .message { font-size: 1.2em; padding: 15px 30px; } } document.addEventListener('DOMContentLoaded', () => { const difficultySelect = document.getElementById('difficulty'); const boardElement = document.getElementById('game-board'); const mineCounterElement = document.getElementById('mine-counter'); const timerElement = document.getElementById('timer'); const resetButton = document.getElementById('reset-button'); const gameOverMessage = document.getElementById('game-over-message'); const winMessage = document.getElementById('win-message'); const boardContainer = document.getElementById('game-board-container'); let rows, cols, mineCount; let board = []; let revealedCount = 0; let flagsPlaced = 0; let timerInterval; let timeElapsed = 0; let gameOver = false; let firstClick = true; const difficulties = { easy: { rows: 9, cols: 9, mines: 10, tileSize: 32 }, medium: { rows: 16, cols: 16, mines: 40, tileSize: 30 }, hard: { rows: 16, cols: 30, mines: 99, tileSize: 28 } }; function initGame() { const difficulty = difficultySelect.value; const settings = difficulties[difficulty]; rows = settings.rows; cols = settings.cols; mineCount = settings.mines; // Adjust tile size dynamically document.documentElement.style.setProperty('--tile-size', `${settings.tileSize}px`); board = []; revealedCount = 0; flagsPlaced = 0; timeElapsed = 0; gameOver = false; firstClick = true; resetTimer(); updateMineCounter(); hideMessages(); boardContainer.classList.remove('game-over'); createBoardData(); renderBoard(); } function createBoardData() { // Initialize board with empty cells board = Array(rows).fill(null).map(() => Array(cols).fill(null).map(() => ({ isMine: false, isRevealed: false, isFlagged: false, adjacentMines: 0 }))); } function placeMines(firstClickRow, firstClickCol) { // Place mines randomly, avoiding the first clicked cell and its neighbors let minesToPlace = mineCount; while (minesToPlace > 0) { const r = Math.floor(Math.random() * rows); const c = Math.floor(Math.random() * cols); // Check if the cell is the first click or its neighbor const isNeighbor = Math.abs(r - firstClickRow) <= 1 && Math.abs(c - firstClickCol) <= 1; if (!board[r][c].isMine && !(r === firstClickRow && c === firstClickCol) && !isNeighbor) { board[r][c].isMine = true; minesToPlace--; } } // Calculate adjacent mines for all cells for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { if (!board[r][c].isMine) { board[r][c].adjacentMines = countAdjacentMines(r, c); } } } } function countAdjacentMines(row, col) { let count = 0; for (let dr = -1; dr <= 1; dr++) { for (let dc = -1; dc <= 1; dc++) { if (dr === 0 && dc === 0) continue; const nr = row + dr; const nc = col + dc; if (isValid(nr, nc) && board[nr][nc].isMine) { count++; } } } return count; } function renderBoard() { boardElement.innerHTML = ''; // Clear previous board boardElement.style.gridTemplateColumns = `repeat(${cols}, var(--tile-size))`; boardElement.style.gridTemplateRows = `repeat(${rows}, var(--tile-size))`; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const tileElement = document.createElement('div'); tileElement.classList.add('tile', 'hidden'); tileElement.dataset.row = r; tileElement.dataset.col = c; tileElement.addEventListener('click', handleLeftClick); tileElement.addEventListener('contextmenu', handleRightClick); boardElement.appendChild(tileElement); } } } function handleLeftClick(event) { if (gameOver) return; const tileElement = event.target; const row = parseInt(tileElement.dataset.row); const col = parseInt(tileElement.dataset.col); const cell = board[row][col]; if (cell.isRevealed || cell.isFlagged) return; if (firstClick) { placeMines(row, col); // Place mines after the first click startTimer(); firstClick = false; } if (cell.isMine) { revealMine(row, col, tileElement); endGame(false); } else { revealTile(row, col); checkWinCondition(); } } function handleRightClick(event) { event.preventDefault(); // Prevent context menu if (gameOver || firstClick) return; // Can't flag before first click const tileElement = event.target; const row = parseInt(tileElement.dataset.row); const col = parseInt(tileElement.dataset.col); const cell = board[row][col]; if (cell.isRevealed) return; cell.isFlagged = !cell.isFlagged; tileElement.classList.toggle('flagged', cell.isFlagged); if (cell.isFlagged) { flagsPlaced++; } else { flagsPlaced--; } updateMineCounter(); // checkWinCondition(); // Optional: check win on flag placement } function revealTile(row, col) { if (!isValid(row, col) || board[row][col].isRevealed || board[row][col].isFlagged) { return; } const cell = board[row][col]; const tileElement = boardElement.children[row * cols + col]; cell.isRevealed = true; tileElement.classList.remove('hidden'); tileElement.classList.add('revealed'); revealedCount++; // Remove event listeners after revealing tileElement.removeEventListener('click', handleLeftClick); tileElement.removeEventListener('contextmenu', handleRightClick); if (cell.adjacentMines > 0) { tileElement.textContent = cell.adjacentMines; tileElement.dataset.mines = cell.adjacentMines; } else { // If it's an empty tile (0 adjacent mines), reveal neighbors for (let dr = -1; dr <= 1; dr++) { for (let dc = -1; dc <= 1; dc++) { if (dr === 0 && dc === 0) continue; revealTile(row + dr, col + dc); } } } } function revealMine(row, col, clickedElement) { const cell = board[row][col]; cell.isRevealed = true; clickedElement.classList.remove('hidden', 'flagged'); // Remove flag if present clickedElement.classList.add('revealed', 'mine'); clickedElement.innerHTML = ''; // Clear potential flag emoji before adding bomb } function checkWinCondition() { const nonMineTiles = rows * cols - mineCount; if (revealedCount === nonMineTiles) { endGame(true); } } function endGame(isWin) { gameOver = true; stopTimer(); revealAllMines(isWin); if (isWin) { winMessage.classList.remove('hidden'); // Optionally flag remaining mines automatically on win for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { if (board[r][c].isMine && !board[r][c].isFlagged) { const tileElement = boardElement.children[r * cols + c]; board[r][c].isFlagged = true; tileElement.classList.add('flagged'); flagsPlaced++; // Update counter visually if needed } } } updateMineCounter(); // Refresh counter } else { gameOverMessage.classList.remove('hidden'); boardContainer.classList.add('game-over'); // Add shake effect } // Disable further interaction by removing listeners (alternative to gameOver flag check) const tiles = boardElement.querySelectorAll('.tile'); tiles.forEach(tile => { tile.removeEventListener('click', handleLeftClick); tile.removeEventListener('contextmenu', handleRightClick); tile.style.cursor = 'default'; // Change cursor }); } function revealAllMines(isWin) { for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const cell = board[r][c]; const tileElement = boardElement.children[r * cols + c]; if (cell.isMine && !isWin) { // Only reveal if lost if (!cell.isRevealed) { // Don't re-reveal the clicked mine revealMine(r, c, tileElement); } } else if (!cell.isMine && cell.isFlagged) { // Indicate incorrectly flagged mines on loss tileElement.style.backgroundColor = '#ffdddd'; // Light red background // Optionally add a cross mark } } } } function hideMessages() { gameOverMessage.classList.add('hidden'); winMessage.classList.add('hidden'); } function updateMineCounter() { const remainingMines = mineCount - flagsPlaced; mineCounterElement.innerHTML = ` ${remainingMines}`; } function startTimer() { if (timerInterval) clearInterval(timerInterval); // Clear existing interval if any timeElapsed = 0; timerElement.innerHTML = ` ${timeElapsed}s`; timerInterval = setInterval(() => { timeElapsed++; timerElement.innerHTML = ` ${timeElapsed}s`; }, 1000); } function stopTimer() { clearInterval(timerInterval); } function resetTimer() { stopTimer(); timeElapsed = 0; timerElement.innerHTML = ` ${timeElapsed}s`; } function isValid(row, col) { return row >= 0 && row < rows && col >= 0 && col < cols; } // Event Listeners difficultySelect.addEventListener('change', initGame); resetButton.addEventListener('click', initGame); // Initial game setup initGame(); }); This sets up the Minesweeper game: 1. **HTML (`index.html`):** Defines the structure with controls (difficulty, reset, status displays) and the game board container. Includes Font Awesome for icons. 2. **CSS (`style.css`):** Provides the modern styling, including neumorphic-inspired elements, tile states (hidden, revealed, flagged, mine), number colors, hover effects, animations (reveal, flag, mine, game over shake), and basic responsiveness. 3. **JavaScript (`script.js`):** Handles game logic: * Setting up the board based on difficulty. * Placing mines randomly *after* the first click to guarantee a safe start. * Handling left-clicks (reveal) and right-clicks (flag). * Recursive revealing of empty areas (flood fill). * Tracking game state (timer, mine count, game over/win). * Updating the UI dynamically. * Displaying win/loss messages. You can now run this code. Select a difficulty, click the reset button if needed, and start playing! Left-click to reveal tiles, right-click to flag potential mines.