html+js+css做的扫雷

这篇文章距离上次修改已过284天，其中的内容可能已经有所变动。

要使用HTML、CSS和JavaScript制作一个简单的扫雷游戏，您可以参考以下示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mine Sweeper</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game">
    <table>
        <!-- Table rows and cells will be added dynamically using JavaScript -->
    </table>
</div>
<button id="restart">Restart Game</button>
 
<script src="script.js"></script>
</body>
</html>

CSS (styles.css):




#game {
    margin: 10px auto;
    border-collapse: collapse;
}
 
#game table {
    border: 1px solid #000;
}
 
#game td {
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;
    line-height: 20px;
}
 
#game td.mine {
    color: red;
}
 
#game td.swept {
    background-color: #ccc;
}
 
#game td.swept-safe {
    background-color: #bada55;
}
 
#restart {
    display: block;
    margin: 20px auto;
    padding: 5px 10px;
    cursor: pointer;
}

JavaScript (script.js):




const ROWS = 10;
const COLS = 10;
const MINES = 10;
 
let gameOver = false;
let mines = [];
let safeCells = [];
 
function initGame() {
    let table = document.createElement('table');
    document.getElementById('game').appendChild(table);
    for (let i = 0; i < ROWS; i++) {
        let row = table.insertRow();
        for (let j = 0; j < COLS; j++) {
            let cell = row.insertCell();
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.addEventListener('click', sweep);
        }
    }
    placeMines();
}
 
function placeMines() {
    mines = [];
    for (let i = 0; i < MINES; i++) {
        let row = Math.floor(Math.random() * ROWS);
        let col = Math.floor(Math.random() * COLS);
        if (!mines.includes(`${row}-${col}`)) {
            mines.push(`${row}-${col}`);
            document.querySelector(`td[data-row="${row}"][data-col="${col}"]`).classList.add('mine');
        }
    }
}
 
function sweep(e) {
    if (gameOver) return;
    let cell = e.target;
    if (cell.classList.contains('mine')) {
        alert('Game over!');
        gameOver = true;
        mines.forEach(mine => {
            document.querySelector(`td[data-row="${mine.split('-')[0]}"][data-col="${mine.split('-')[1]}"]`).classList.add('swept');
        });
        cell.classList.add('swept');
    }

html+js+css做的扫雷

评论已关闭

推荐阅读