规则分析
游戏区包括雷区、地雷计数器（位于左上角，记录剩余地雷数）和计时器（位于右上角，记录游戏时间），确定大小的矩形雷区中随机布置一定数量的地雷(初级为99个方块10个雷，中级为1616个方块40个雷，高级为1630个方块99个雷，自定义级别可以自己设定雷区大小和雷数，但是雷区大小不能超过2430)，玩家需要尽快找出雷区中的所有不是地雷的方块，而不许踩到地雷。
状态梳理
- 未扫状态
- 空状态
- 周围有雷状态（1,2,3,4,5,6,7,8）
- 雷爆炸状态
- 标旗状态
伪代码
- 创建行列变量row,column和地雷数mine
- 通过变量生成row*column的二维数组，默认值全部设置为10
- 随机放入mine个地雷，地雷标记为数字19
- 放雷时，雷的八个方位的数值+1，若为19则不加
- 循环数组渲染，大于等于10小于19的数字显示为未扫状态
- 点击扫雷，把当前数字-10。如果值等于9，那么表里数组显示全部雷游戏结束；其他显示出来数字，0显示为空白
- 当0时递归连锁周围的数字直到周围没有0，显示出来数字（如果为标旗那么不解锁）
- 右键标旗，标旗逻辑即当前数字+10，取消标旗-10
- 标旗时判断数组内29的个数等于雷数且19的数字为0，即全部标记出来雷了，游戏结束
- 扫雷时未解锁的区域等于雷数，那么游戏结束
游戏时数组值状态
| 数组值 | 显示状态 |
|---|---|
| 0 | 已解锁的空白 |
| 1-8 | 周围有雷的 |
| 9 | 雷爆炸 |
| 10-19 | 未解锁的状态 |
| 20-29 | 标旗 |
编码实现和效果
实现效果
// 雷区行数和列数
const row = ref<number>(10)
const column = ref<number>(10)
const mine = ref<number>(10)
const mineBoard = ref<number[][]>([])
const gameState = ref<boolean>(false)
const colors = ref<string[]>(['#0000CC', '#009999', '#00FF99', '#663399', '#CC0099', '#FFFF99', '#CCCC33', '#FF0033'])
const timer = ref<number>(0)
// 初始化雷场
const initBoard = () => {
mineBoard.value = []
gameState.value = false
endTimer()
timer.value = 0
for (let i = 0; i < row.value; i++) {
let rows: number[] = []
for (let j = 0; j < column.value; j++) {
rows.push(10)
}
mineBoard.value.push(rows)
}
layMines()
}
// 根据设置个数随机埋雷
const layMines = () => {
if (mine.value > row.value * column.value) {
console.log('雷数太多了');
alert('雷数太多放不下了')
return
}
for (let i = 0; i < mine.value; i++) {
randomLayMine()
}
}
// 埋雷并生成雷周围的提示
const randomLayMine = () => {
const c = parseInt((Math.random() * column.value).toString())
const r = parseInt((Math.random() * row.value).toString())
if (mineBoard.value[r][c] === 19) {
randomLayMine()
} else {
// 设置地雷
mineBoard.value[r][c] = 19
buildTips(r - 1, c - 1)
buildTips(r - 1, c)
buildTips(r - 1, c + 1)
buildTips(r, c - 1)
buildTips(r, c + 1)
buildTips(r + 1, c - 1)
buildTips(r + 1, c)
buildTips(r + 1, c + 1)
}
}
// 生成周围地雷个数提示
const buildTips = (r: number, c: number) => {
if (r > -1 && c > -1 && r < row.value && c < column.value && mineBoard.value[r][c] !== 19) {
mineBoard.value[r][c]++
}
}
// 进行扫雷
const clearanceMine = (itm: number, r: number, c: number) => {
if (gameState.value) {
return
}
if (timer.value === 0) {
beginTimer()
}
if (itm > 19) {
mineBoard.value[r][c] -= 10
}
if (itm < 9) {
return
} else if (itm === 10) {
chain(r, c)
} else if (itm > 9 && itm < 19) {
// 扫雷
mineBoard.value[r][c] -= 10
} else if (itm === 19) {
for (let i = 0; i < row.value; i++) {
for (let j = 0; j < column.value; j++) {
if (mineBoard.value[i][j] === 19) {
mineBoard.value[i][j] = 9
}
}
}
gameState.value = true
beginTimer()
console.log('游戏结束');
}
}
// 左键连锁空白区域
const chain = (r: number, c: number) => {
if (r > -1 && c > -1 && r < row.value && c < column.value && mineBoard.value[r][c] !== 9 && mineBoard.value[r][c] < 19) {
if (mineBoard.value[r][c] === 10) {
mineBoard.value[r][c] -= 10
chain(r - 1, c - 1)
chain(r - 1, c)
chain(r - 1, c + 1)
chain(r, c - 1)
chain(r, c + 1)
chain(r + 1, c - 1)
chain(r + 1, c)
chain(r + 1, c + 1)
} else if (mineBoard.value[r][c] > 10) {
mineBoard.value[r][c] -= 10
}
}
}
// 右键标记或者取消标记
const markMine = (itm: number, r: number, c: number) => {
if (timer.value === 0) {
beginTimer()
}
// 已经扫出结果的无法再右键，游戏结束无法右键
if (itm < 9 || gameState.value) {
return
}
if (itm < 20) {
mineBoard.value[r][c] += 10
} else {
mineBoard.value[r][c] -= 10
}
testGame()
}
const testGame = () => {
let flag = 0
let mark = 0
let lock = 0
for (let i = 0; i < row.value; i++) {
for (let j = 0; j < column.value; j++) {
// 未标记雷的个数
if (mineBoard.value[i][j] === 19) {
mark++
}
// 标记个数
if (mineBoard.value[i][j] > 19) {
flag++
}
if (mineBoard.value[i][j] > 9) {
lock++
}
}
}
// 标记个数等于雷数，未扫出来的雷为0
if (flag === mine.value && mark === 0) {
console.log('扫雷完成，游戏结束');
alert('恭喜过关')
gameState.value = true
endTimer()
}
if (lock === mine.value) {
alert('恭喜过关')
gameState.value = true
endTimer()
}
}
initBoard()
优化项
- 使用canvas绘图来实现效果减少HTML引发的显示错乱
