好的，以下是一个使用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" @cl
ick="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" @cl
ick="cl
ickCell(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;
},
cl
ickCell(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>
1519
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
