#DAYU200體驗官# 經典小遊戲之掃雷[初版]

(目錄)

1992年4月6日，"掃雷"小遊戲首次搭載在Windows3.1，至今正好30周年，如今被貼上了"暴露年齡"标簽😂😂，本節實作"掃雷"小遊戲并運作在DAYU200開發闆上

環境

開發闆：DAYU200
系統版本：OpenHarmony v3.2 Beta1
Sdk版本：ohos-sdk 3.2.2.5
開發工具：DevEco Studio 3.0.0.901（For OpenHarmony）

實作過程

建立 MineSweeping 項目
修改 index.ets 頁面代碼，使用 Stack 容器、 Image 元件、 Text 元件建構開始遊戲按鈕。

Stack({alignContent: Alignment.Center}) {
  Image($r('app.media.start_game'))
    .width(240)
    .height(120)
  Text('開始遊戲')
    .fontSize(18)
    .fontColor(Color.White)
    .fontWeight(FontWeight.Bold)
}

點選"開始遊戲"進行初始化棋盤、棋盤格埋雷、計算棋盤格周邊雷數。

初始化棋盤

目前以4*4棋盤格為例，使用
Grid 網格容器，由"行"和"列"分割的單元格組成棋盤。定義棋盤格類 Board 如下：

class Board {
  x: number	// 棋盤格行辨別
  y: number	// 棋盤格列辨別
  content: string	// 周邊雷數
  isCover: boolean	// 預設顯示圖檔
  isMine: boolean	// 是否雷區
  isClick: boolean	// 是否點選

  constructor(x: number, y: number, content: string, isCover: boolean, isMine: boolean, isClick: boolean) {
    this.x = x;
    this.y = y;
    this.content = content;
    this.isCover = isCover;
    this.isMine = isMine;
    this.isClick = isClick;
  }
}

通過循環渲染

ForEach

方式，建構

Grid

網格容器中的單元格

GridItem

。

Grid() {
  ForEach(this.boards, (item: Board) => {
    GridItem() {
      Stack({alignContent: Alignment.Center}) {
        Image(item.isCover ? $r('app.media.loading_icon') : (item.isMine ? $r('app.media.app_icon') : $r('app.media.click_bg')))
          .width((!item.isCover && item.isMine) ? 80 : '100%')
        Text(item.isClick ? ((item.content === '9' || item.content === '0') ? '' : item.content) : '')
          .fontSize(26).fontWeight(FontWeight.Bold)
      }
      .width('100%').height(100)
    }
  }, (item: Board) => (item.x + ',' + item.y).toString())
}
.width('95%')
.columnsTemplate(this.gridFr)
.columnsGap(0)
.rowsGap(0)
.height(500)

棋盤格埋雷

使用随機方式，進行埋雷，代碼如下：

// 埋雷
setMine = (rows: number, cols: number) => {
  // 當達到設定的數量時跳出
  if (this.mineCount >= this.maxMineNum) {
    return false;
  }
  // 随機擷取坐标值
  let randomX = Math.floor(Math.random() * rows);
  let randomY = Math.floor(Math.random() * cols);
  // 埋雷
  this.boards.forEach(item => {
    if (item.x === randomX && item.y === randomY) {
      if (!item.isMine) {
        item.isMine = true;
        this.mineCount++;
      }
    }
  })
  this.setMine(rows, cols);
}

計算棋盤格周邊雷數

周邊雷數的計算，使用9宮格的方式，以中間方格為基準，周邊存在雷的方格數量累加在一起即為目前基準格的周邊雷數。同時在計算時不能超出給定的行數和列數。

#DAYU200體驗官# 經典小遊戲之掃雷[初版]

// 統計周邊雷數
boardAreaMine = (rows: number, cols: number) => {
  // 判斷周邊雷，并計數
  let boards = this.boards;
  for (let i = 0; i < boards.length; i++) {
    let cell = boards[i];
    if (cell.isMine) {
      continue;
    }
    let count = 0;
    // 左上
    let leftTopCellX = cell.x - 1, leftTopCellY = cell.y - 1;
    if (leftTopCellX >= 0 && leftTopCellY >= 0 && leftTopCellX < rows && leftTopCellY < cols) {
      boards.filter(item => {
        if (item.x === leftTopCellX && item.y === leftTopCellY && item.isMine) {
          count++;
        }
      })
    }
    // 上
    let topCellX = cell.x - 1, topCellY = cell.y;
    if (topCellX >= 0 && topCellY >= 0 && topCellX < rows && topCellY < cols) {
      boards.filter(item => {
        if (item.x === topCellX && item.y === topCellY && item.isMine) {
          count++;
        }
      })
    }
    // 右上
    let rightTopCellX = cell.x - 1, rightTopCellY = cell.y + 1;
    if (rightTopCellX >= 0 && rightTopCellY >= 0 && rightTopCellX < rows && rightTopCellY < cols) {
      boards.filter(item => {
        if (item.x === rightTopCellX && item.y === rightTopCellY && item.isMine) {
          count++;
        }
      })
    }
    // 右
    let rightCellX = cell.x, rightCellY = cell.y + 1;
    if (rightCellX >= 0 && rightCellY >= 0 && rightCellX < rows && rightCellY < cols) {
      boards.filter(item => {
        if (item.x === rightCellX && item.y === rightCellY && item.isMine) {
          count++;
        }
      })
    }
    // 右下
    let rightBottomCellX = cell.x + 1, rightBottomCellY = cell.y + 1;
    if (rightBottomCellX >= 0 && rightBottomCellY >= 0 && rightBottomCellX < rows && rightBottomCellY < cols) {
      boards.filter(item => {
        if (item.x === rightBottomCellX && item.y === rightBottomCellY && item.isMine) {
          count++;
        }
      })
    }
    // 下
    let bottomCellX = cell.x + 1, bottomCellY = cell.y;
    if (bottomCellX >= 0 && bottomCellY >= 0 && bottomCellX < rows && bottomCellY < cols) {
      boards.filter(item => {
        if (item.x === bottomCellX && item.y === bottomCellY && item.isMine) {
          count++;
        }
      })
    }
    // 左下
    let leftBottomCellX = cell.x + 1, leftBottomCellY = cell.y - 1;
    if (leftBottomCellX >= 0 && leftBottomCellY >= 0 && leftBottomCellX < rows && leftBottomCellY < cols) {
      boards.filter(item => {
        if (item.x === leftBottomCellX && item.y === leftBottomCellY && item.isMine) {
          count++;
        }
      })
    }
    // 左
    let leftCellX = cell.x, leftCellY = cell.y - 1;
    if (leftCellX >= 0 && leftCellY >= 0 && leftCellX < rows && leftCellY < cols) {
      boards.filter(item => {
        if (item.x === leftCellX && item.y === leftCellY && item.isMine) {
          count++;
        }
      })
    }
    if (count === 0) {
      count = 9;
    }
    cell.content = count.toString();
  }
  this.boards = boards;
}

給"開始遊戲"按鈕添加點選效果。

Stack({alignContent: Alignment.Center}) {
}
.onClick(() => {
   // 此處編寫邏輯代碼
   this.init();
})

// 初始化棋盤，埋雷，計算棋盤格周邊雷數初始化方法
init = () => {
  this.initBoard(this.boardRowsNum, this.boardColsNum);
  this.setMine(this.boardRowsNum, this.boardColsNum);
  this.boardAreaMine(this.boardRowsNum, this.boardColsNum);
}

點選棋盤格處理方式

// 需要引入prompt
import prompt from '@ohos.prompt';

GridItem() {...}
.onClick(() => {
  if ((this.clickCount - 1) === this.maxMineNum) {
    prompt.showToast({
      message: '恭喜你，成功排雷！',
      duration: 2000
    })
    this.boards = [];
    return false;
  }
  let tempBoards = this.boards;
  this.boards = new Array<Board>();
  tempBoards.forEach(temp => {
    if (temp.x === item.x && temp.y === item.y) {
      temp.isClick = true;
      temp.isCover = false
      if (temp.isMine) {
        AlertDialog.show({
          message: '您踩雷了，遊戲結束~',
          autoCancel: false,
          primaryButton: {
            value: '重新開始',
            action: () => {
              this.init();
            }
          },
          secondaryButton: {
            value: '不玩了~',
            action: () => {
              this.boards = [];
            }
          },
          alignment: DialogAlignment.Center
        })
      } else {
        this.clickCount--;
      }
    }
  })
  this.boards = tempBoards;
})

預覽效果

說明

本項目已送出至開源倉：倉庫位址

經典小遊戲掃雷源碼(https://ost.51cto.com/resource/2157)

#DAYU200體驗官# 經典小遊戲之掃雷[初版]

環境

實作過程

預覽效果

說明

繼續閱讀

[OpenHarmony] [RK2206] 建構OpenHarmony編譯器 (二)

#DAYU200# OpenHarmony跳轉撥号界面

#打卡不停更#OpenHarmony資料轉碼應用開發實戰（上）背景需求設計建立項目頁面布局規劃UI界面編碼實作總結

賦能千行百業數字化轉型，OpenHarmony生态新成果即将亮相HDC2022

基于OpenHarmony标準接口的檔案讀寫實作案例

前行不綴未來可期，鴻蒙生态發展邁入全新階段

哔哩哔哩已經開始開發鴻蒙版本了目前第一版V0.1.0Beta采用eTS語言，基于OpenHarmonyApi9開發支援功

#DAYU200體驗官# OpenHarmony3.1 Release 編譯

#沖刺創作新星# #跟着小白一起學鴻蒙# [十二]簡單Http用戶端

我把分布式音樂播放器适配了Stage模型

想開發DAYU200，我教你

在DAYU200上實作OpenHarmony視訊播放器

OpenHarmony移植案例： build lite源碼分析之hb指令entry.py

共築使能千行百業的數字底座 | HDC 2022松湖對話順利召開

OpenHarmony社群營運報告（2022年10月）

開源鴻蒙OpenHarmony 4.0 Beta2釋出，方舟架構ArkUI-X首發