Okay, let's create a retro 8-bit style Minesweeper game using HTML, CSS, and JavaScript. Retro Minesweeper

Minesweeper

Mines: 10

Time: 0

:root { --cell-size: 30px; --border-color: #000000; --bg-color: #c0c0c0; /* Light gray */ --cell-hidden-bg: #808080; /* Medium gray */ --cell-revealed-bg: #a0a0a0; /* Lighter gray */ --mine-color: #ff0000; /* Red */ --flag-color: #ff0000; /* Red */ --text-color: #000000; /* Black */ --number-colors: [ #0000ff, /* 1: Blue */ #008000, /* 2: Green */ #ff0000, /* 3: Red */ #000080, /* 4: Navy */ #800000, /* 5: Maroon */ #008080, /* 6: Teal */ #000000, /* 7: Black */ #808080 /* 8: Gray */ ]; --font-family: 'Press Start 2P', cursive; } body { background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: var(--font-family); color: var(--text-color); font-size: 10px; /* Smaller base font size for retro feel */ image-rendering: pixelated; /* Helps with sharp edges */ image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; } .game-container { border: 3px solid var(--border-color); padding: 15px; background-color: var(--cell-hidden-bg); box-shadow: 5px 5px 0px var(--border-color); text-align: center; } h1 { font-size: 1.8em; margin-bottom: 15px; color: var(--text-color); } .info-panel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 5px; border: 2px solid var(--border-color); background-color: var(--bg-color); } .info { font-size: 1.2em; padding: 5px 10px; } #reset-button { font-family: var(--font-family); font-size: 1em; padding: 5px 10px; border: 2px solid var(--border-color); background-color: var(--cell-hidden-bg); color: var(--text-color); cursor: pointer; box-shadow: 2px 2px 0px var(--border-color); } #reset-button:active { box-shadow: none; transform: translate(2px, 2px); } .game-board { display: grid; /* Grid columns will be set by JS */ gap: 1px; /* Minimal gap for grid lines */ border: 3px solid var(--border-color); background-color: var(--border-color); /* Grid line color */ margin-bottom: 15px; /* Prevent text selection */ user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .cell { width: var(--cell-size); height: var(--cell-size); background-color: var(--cell-hidden-bg); border: 1px solid #707070; /* Inner border for depth */ display: flex; justify-content: center; align-items: center; font-size: calc(var(--cell-size) * 0.6); cursor: pointer; font-weight: bold; position: relative; /* For potential pseudo-elements */ } .cell.revealed { background-color: var(--cell-revealed-bg); border: 1px solid #909090; cursor: default; } .cell.mine { background-color: var(--mine-color); color: var(--text-color); } .cell.flagged::before { content: 'F'; color: var(--flag-color); font-size: calc(var(--cell-size) * 0.7); line-height: var(--cell-size); /* Center vertically */ position: absolute; } /* Number Colors */ .cell[data-mines="1"] { color: #0000ff; } .cell[data-mines="2"] { color: #008000; } .cell[data-mines="3"] { color: #ff0000; } .cell[data-mines="4"] { color: #000080; } .cell[data-mines="5"] { color: #800000; } .cell[data-mines="6"] { color: #008080; } .cell[data-mines="7"] { color: #000000; } .cell[data-mines="8"] { color: #808080; } .message { margin-top: 10px; font-size: 1.4em; height: 20px; /* Reserve space */ color: var(--mine-color); } document.addEventListener('DOMContentLoaded', () => { const boardElement = document.getElementById('game-board'); const minesCountElement = document.getElementById('mines-count'); const timerElement = document.getElementById('timer'); const messageElement = document.getElementById('message'); const resetButton = document.getElementById('reset-button'); const ROWS = 10; const COLS = 10; const MINES_COUNT = 10; let board = []; let mineLocations = []; let revealedCount = 0; let flaggedCount = 0; let gameOver = false; let firstClick = true; let timerInterval = null; let timeElapsed = 0; function initGame() { board = []; mineLocations = []; revealedCount = 0; flaggedCount = 0; gameOver = false; firstClick = true; timeElapsed = 0; messageElement.textContent = ''; minesCountElement.textContent = MINES_COUNT; timerElement.textContent = timeElapsed; stopTimer(); boardElement.innerHTML = ''; boardElement.style.gridTemplateColumns = `repeat(${COLS}, var(--cell-size))`; createBoard(); } function createBoard() { for (let r = 0; r < ROWS; r++) { board[r] = []; for (let c = 0; c < COLS; c++) { const cell = document.createElement('div'); cell.classList.add('cell'); cell.dataset.row = r; cell.dataset.col = c; cell.addEventListener('click', handleCellClick); cell.addEventListener('contextmenu', handleCellRightClick); boardElement.appendChild(cell); board[r][c] = { element: cell, isMine: false, isRevealed: false, isFlagged: false, adjacentMines: 0, }; } } } function placeMines(firstClickRow, firstClickCol) { let minesPlaced = 0; while (minesPlaced < MINES_COUNT) { const r = Math.floor(Math.random() * ROWS); const c = Math.floor(Math.random() * COLS); // Avoid placing mine on the first clicked cell or adjacent cells const isFirstClickZone = Math.abs(r - firstClickRow) <= 1 && Math.abs(c - firstClickCol) <= 1; if (!board[r][c].isMine && !isFirstClickZone) { board[r][c].isMine = true; mineLocations.push({ r, c }); minesPlaced++; } } // 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(r, c) { 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 = r + dr; const nc = c + dc; if (isValid(nr, nc) && board[nr][nc].isMine) { count++; } } } return count; } function isValid(r, c) { return r >= 0 && r < ROWS && c >= 0 && c < COLS; } function handleCellClick(event) { if (gameOver) return; const cellElement = event.target; const r = parseInt(cellElement.dataset.row); const c = parseInt(cellElement.dataset.col); const cellData = board[r][c]; if (cellData.isRevealed || cellData.isFlagged) return; if (firstClick) { placeMines(r, c); startTimer(); firstClick = false; } revealCell(r, c); if (cellData.isMine) { endGame(false); // Lost } else { checkWin(); } } function handleCellRightClick(event) { event.preventDefault(); // Prevent context menu if (gameOver) return; const cellElement = event.target; const r = parseInt(cellElement.dataset.row); const c = parseInt(cellElement.dataset.col); const cellData = board[r][c]; if (cellData.isRevealed) return; if (cellData.isFlagged) { cellData.isFlagged = false; cellElement.classList.remove('flagged'); flaggedCount--; } else { if (flaggedCount < MINES_COUNT) { cellData.isFlagged = true; cellElement.classList.add('flagged'); flaggedCount++; } } minesCountElement.textContent = MINES_COUNT - flaggedCount; } function revealCell(r, c) { if (!isValid(r, c)) return; const cellData = board[r][c]; // Stop if already revealed or flagged if (cellData.isRevealed || cellData.isFlagged) return; cellData.isRevealed = true; cellData.element.classList.add('revealed'); revealedCount++; if (cellData.isMine) { cellData.element.classList.add('mine'); cellData.element.textContent = 'X'; // Or a bomb symbol } else if (cellData.adjacentMines > 0) { cellData.element.textContent = cellData.adjacentMines; cellData.element.dataset.mines = cellData.adjacentMines; // For CSS styling } else { // Flood fill for empty cells for (let dr = -1; dr <= 1; dr++) { for (let dc = -1; dc <= 1; dc++) { if (dr === 0 && dc === 0) continue; revealCell(r + dr, c + dc); } } } } function checkWin() { const totalNonMineCells = ROWS * COLS - MINES_COUNT; if (revealedCount === totalNonMineCells) { endGame(true); // Won } } function endGame(isWin) { gameOver = true; stopTimer(); revealAllMines(isWin); if (isWin) { messageElement.textContent = 'You Win!'; messageElement.style.color = '#008000'; // Green } else { messageElement.textContent = 'Game Over!'; messageElement.style.color = '#ff0000'; // Red } } function revealAllMines(isWin) { mineLocations.forEach(({ r, c }) => { const cellData = board[r][c]; if (!cellData.isRevealed) { cellData.element.classList.add('revealed'); // Show background if (cellData.isFlagged && !isWin) { // Indicate correctly flagged mine (optional) // cellData.element.style.backgroundColor = 'lightgreen'; } else if (!cellData.isFlagged && !isWin) { // Reveal unflagged mines on loss cellData.element.classList.add('mine'); cellData.element.textContent = 'X'; } else if (cellData.isFlagged && isWin) { // Ensure flags remain on win if (!cellData.element.classList.contains('flagged')) { cellData.element.classList.add('flagged'); } } } // Mark incorrectly flagged cells if (!cellData.isMine && cellData.isFlagged && !isWin) { cellData.element.textContent = ' ভুল '; // Indicate wrong flag ' ভুল ' means wrong in Bengali cellData.element.style.color = '#555'; } }); } function startTimer() { if (timerInterval) clearInterval(timerInterval); // Clear existing timer if any timerInterval = setInterval(() => { timeElapsed++; timerElement.textContent = timeElapsed; }, 1000); } function stopTimer() { clearInterval(timerInterval); timerInterval = null; } // Event Listeners resetButton.addEventListener('click', initGame); // Initial game setup initGame(); }); This sets up the HTML structure, applies retro 8-bit styling with CSS (including a pixel font from Google Fonts), and implements the core Minesweeper logic in JavaScript. You can open the `index.html` file to play. Use the left mouse button to reveal cells and the right mouse button to flag potential mines.