用uniapp写一个扫雷游戏

好的，以下是一个使用uniapp编写的扫雷游戏的示例代码：

<template>
<div class="mine-sweeper">
<div class="mine-sweeper-header">
<div class="mine-sweeper-title">扫雷游戏</div>
<div class="mine-sweeper-timer">{{ timer }}</div>
<div class="mine-sweeper-reset" @click="reset">重新开始</div>
</div>
<div class="mine-sweeper-board">
<div class="mine-sweeper-row" v-for="(row, rowIndex) in board" :key="rowIndex">
<div class="mine-sweeper-cell" v-for="(cell, cellIndex) in row" :key="cellIndex" @click="clickCell(rowIndex, cellIndex)" :class="{ 'mine-sweeper-cell-revealed': cell.revealed, 'mine-sweeper-cell-flagged': cell.flagged }">
<div class="mine-sweeper-cell-content">
<div class="mine-sweeper-cell-mine" v-if="cell.revealed && cell.mine"></div>
<div class="mine-sweeper-cell-number" v-if="cell.revealed && !cell.mine && cell.number > 0">{{ cell.number }}</div>
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
data() {
return {
board: [],
mines: 10,
rows: 8,
cols: 8,
timer: 0,
intervalId: null,
gameOver: false,
gameWon: false,
};
},
created() {
this.reset();
},
methods: {
reset() {
this.board = this.generateBoard(this.rows, this.cols, this.mines);
this.timer = 0;
this.gameOver = false;
this.gameWon = false;
clearInterval(this.intervalId);
this.intervalId = setInterval(() => {
this.timer++;
}, 1000);
},
generateBoard(rows, cols, mines) {
const board = [];
for (let i = 0; i < rows; i++) {
const row = [];
for (let j = 0; j < cols; j++) {
row.push({ mine: false, revealed: false, flagged: false, number: 0 });
}
board.push(row);
}
let minesPlaced = 0;
while (minesPlaced < mines) {
const row = Math.floor(Math.random() * rows);
const col = Math.floor(Math.random() * cols);
if (!board[row][col].mine) {
board[row][col].mine = true;
minesPlaced++;
}
}
for (let i = 0; i < rows; i++) {
for (let j = 0; j < cols; j++) {
if (board[i][j].mine) {
continue;
}
let count = 0;
for (let ii = Math.max(0, i - 1); ii <= Math.min(rows - 1, i + 1); ii++) {
for (let jj = Math.max(0, j - 1); jj <= Math.min(cols - 1, j + 1); jj++) {
if (board[ii][jj].mine) {
count++;
}
}
}
board[i][j].number = count;
}
}
return board;
},
clickCell(row, col) {
if (this.gameOver || this.gameWon) {
return;
}
const cell = this.board[row][col];
if (cell.flagged) {
return;
}
if (cell.mine) {
this.gameOver = true;
clearInterval(this.intervalId);
alert('游戏结束');
return;
}
cell.revealed = true;
if (cell.number === 0) {
this.revealNeighbors(row, col);
}
if (this.checkWin()) {
this.gameWon = true;
clearInterval(this.intervalId);
alert('你赢了');
}
},
revealNeighbors(row, col) {
for (let i = Math.max(0, row - 1); i <= Math.min(this.rows - 1, row + 1); i++) {
for (let j = Math.max(0, col - 1); j <= Math.min(this.cols - 1, col + 1); j++) {
const cell = this.board[i][j];
if (!cell.revealed && !cell.flagged) {
cell.revealed = true;
if (cell.number === 0) {
this.revealNeighbors(i, j);
}
}
}
}
},
checkWin() {
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const cell = this.board[i][j];
if (!cell.revealed && !cell.mine) {
return false;
}
}
}
return true;
},
},
};
</script>

<style scoped>
.mine-sweeper {
font-family: Arial, sans-serif;
text-align: center;
}
.mine-sweeper-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.mine-sweeper-title {
font-size: 24px;
font-weight: bold;
}
.mine-sweeper-timer {
font-size: 24px;
font-weight: bold;
}
.mine-sweeper-reset {
font-size: 18px;
cursor: pointer;
}
.mine-sweeper-board {
display: inline-block;
border: 1px solid black;
border-radius: 5px;
padding: 10px;
}
.mine-sweeper-row {
display: flex;
}
.mine-sweeper-cell {
width: 30px;
height: 30px;
border: 1px solid black;
margin-right: -1px;
margin-bottom: -1px;
position: relative;
cursor: pointer;
}
.mine-sweeper-cell:hover {
background-color: #eee;
}
.mine-sweeper-cell-revealed {
background-color: #ddd;
cursor: default;
}
.mine-sweeper-cell-flagged:before {
content: '🚩';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}
.mine-sweeper-cell-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.mine-sweeper-cell-mine:before {
content: '💣';
font-size: 24px;
}
.mine-sweeper-cell-number {
font-size: 18px;
font-weight: bold;
}
</style>