帮我生成一个js踩雷游戏
时间: 2024-02-03 21:03:28 浏览: 31
好的,下面是一个简单的JavaScript踩雷游戏。游戏规则是:玩家需要在不踩雷的情况下尽可能快地揭开所有方块。雷随机分布在方块中,游戏结束当玩家踩到雷时。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Minesweeper Game</title>
</head>
<body>
<h1>Minesweeper Game</h1>
<div id="board"></div>
<button onclick="initBoard()">New Game</button>
<script src="minesweeper.js"></script>
</body>
</html>
```
JavaScript代码:
```javascript
const BOARD_SIZE = 10;
const NUM_MINES = 10;
let board = document.getElementById("board");
let cells = [];
let isGameOver = false;
// 初始化游戏面板
function initBoard() {
isGameOver = false;
cells = createCells();
board.innerHTML = "";
for (let i = 0; i < BOARD_SIZE; i++) {
let row = document.createElement("div");
for (let j = 0; j < BOARD_SIZE; j++) {
let cell = document.createElement("div");
cell.setAttribute("id", i + "-" + j);
cell.classList.add("cell");
cell.addEventListener("click", () => {
if (!isGameOver) {
cellClicked(cell);
}
});
row.appendChild(cell);
cells[i][j].element = cell;
}
board.appendChild(row);
}
setMines();
}
// 创建方格数组
function createCells() {
let cells = [];
for (let i = 0; i < BOARD_SIZE; i++) {
let row = [];
for (let j = 0; j < BOARD_SIZE; j++) {
row.push({
isMine: false,
isRevealed: false,
element: null
});
}
cells.push(row);
}
return cells;
}
// 设置雷
function setMines() {
let mines = 0;
while (mines < NUM_MINES) {
let i = Math.floor(Math.random() * BOARD_SIZE);
let j = Math.floor(Math.random() * BOARD_SIZE);
if (!cells[i][j].isMine) {
cells[i][j].isMine = true;
mines++;
}
}
}
// 方格被点击时的处理
function cellClicked(cell) {
let [i, j] = cell.id.split("-").map(Number);
if (cells[i][j].isMine) {
gameOver();
} else {
revealCell(i, j);
if (checkWin()) {
gameWon();
}
}
}
// 揭开方格
function revealCell(i, j) {
if (i < 0 || i >= BOARD_SIZE || j < 0 || j >= BOARD_SIZE || cells[i][j].isRevealed) {
return;
}
let cell = cells[i][j];
cell.isRevealed = true;
cell.element.classList.add("revealed");
if (countMines(i, j) > 0) {
cell.element.textContent = countMines(i, j);
} else {
revealCell(i - 1, j - 1);
revealCell(i - 1, j);
revealCell(i - 1, j + 1);
revealCell(i, j - 1);
revealCell(i, j + 1);
revealCell(i + 1, j - 1);
revealCell(i + 1, j);
revealCell(i + 1, j + 1);
}
}
// 计算周围雷的数量
function countMines(i, j) {
let count = 0;
if (i > 0 && j > 0 && cells[i - 1][j - 1].isMine) {
count++;
}
if (i > 0 && cells[i - 1][j].isMine) {
count++;
}
if (i > 0 && j < BOARD_SIZE - 1 && cells[i - 1][j + 1].isMine) {
count++;
}
if (j > 0 && cells[i][j - 1].isMine) {
count++;
}
if (j < BOARD_SIZE - 1 && cells[i][j + 1].isMine) {
count++;
}
if (i < BOARD_SIZE - 1 && j > 0 && cells[i + 1][j - 1].isMine) {
count++;
}
if (i < BOARD_SIZE - 1 && cells[i + 1][j].isMine) {
count++;
}
if (i < BOARD_SIZE - 1 && j < BOARD_SIZE - 1 && cells[i + 1][j + 1].isMine) {
count++;
}
return count;
}
// 判定游戏是否胜利
function checkWin() {
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
if (!cells[i][j].isRevealed && !cells[i][j].isMine) {
return false;
}
}
}
return true;
}
// 游戏结束
function gameOver() {
isGameOver = true;
for (let i = 0; i < BOARD_SIZE; i++) {
for (let j = 0; j < BOARD_SIZE; j++) {
if (cells[i][j].isMine) {
cells[i][j].element.classList.add("mine");
}
}
}
alert("Game Over!");
}
// 游戏胜利
function gameWon() {
isGameOver = true;
alert("You Win!");
}
```
CSS代码:
```css
#board {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
border: 2px solid gray;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
width: 30px;
height: 30px;
border: 1px solid gray;
cursor: pointer;
font-size: 20px;
font-weight: bold;
}
.cell:hover {
background-color: #eee;
}
.revealed {
background-color: white;
color: black;
}
.mine {
background-color: red;
color: white;
}
```
这是一个简单的踩雷游戏,你可以根据需要进行修改和扩展。