溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編這次要給大家分享的是Angular如何實現一個掃雷游戲，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
創建應用
該項目使用的是 monorepo 的形式來存放代碼。在 Angular 中，構建 monorepo 方法如下：
ng new simple-game --createApplication=false ng generate application mine-sweeper
在這里，因為該項目以后還會包含其他各種其他的應用，所以個人覺得使用 monorepo 構建項目是比較正確的選擇。如果不想使用 monorepo，使用以下命令創建應用：
ng new mine-sweeper
流程圖
首先，我們先來看看掃雷的基本流程。
數據結構抽象
通過觀察流程圖，可以得到掃雷基本上有這么幾種狀態：
方塊的狀態如下：
我們可以先定義好這些狀態，之后根據不同的狀態，執行不同的邏輯，同時反饋給組件。
// model.ts
export enum GameState {
BEGINNING = 0x00,
PLAYING = 0x01,
WIN = 0x02,
LOST = 0x03,
}
export interface IMineBlock {
// 當前塊是否是的內部是地雷
readonly isMine: boolean;
// 附近地雷塊的數量
readonly nearestMinesCount: number;
// 是否已經被點開
readonly isFound: boolean;
}編寫邏輯
為了使得掃雷的邏輯不跟組件耦合，我們需要新增一個 service。
ng generate service mine-sweeper
現在開始邏輯編寫。首先，要存儲游戲狀態、地雷塊、地雷塊邊長（目前設計的掃雷是正方形）、雷的數量。
export class MineSweeperService {
private readonly _mineBlocks = new BehaviorSubject<IMineBlock[]>([]);
private readonly _side = new BehaviorSubject(10);
private readonly _state = new BehaviorSubject<GameState>(GameState.BEGINNING);
private readonly _mineCount = new BehaviorSubject<number>(10);
readonly side$ = this._side.asObservable();
readonly mineBlock$ = this._mineBlocks.asObservable();
readonly state$ = this._state.asObservable();
readonly mineCount$ = this._mineCount.asObservable();
get side() { return this._side.value; }
set side(value: number) { this._side.next(value); }
get mineBlocks() { return this._mineBlocks.value; }
get state() { return this._state.value; }
get mineCount() { return this._mineCount.value; }
//...
}得益于 Rxjs ，通過使用 BehaviorSubject 使得我們可以很方便的將這些狀態變量設計成響應式的。 BehaviorSubject 主要功能是提供了一個響應式的對象，使得邏輯服務可以通過這個對象對數據進行變更，并且，組件也可以通過這些對象來監聽數據變化。
通過上面的準備工作，我們可以開始編寫邏輯函數 start 和 doNext 。 start 的作用是給狀態機重新設置狀態；而 doNext 的作用是根據玩家點擊的方塊的索引對游戲進行狀態轉移。
port class MineSweeperService {
// ...
start() {
this._mineBlocks.next(this.createMineBlocks(this.side));
this._state.next(GameState.BEGINNING);
}
doNext(index: number): boolean {
switch (this.state) {
case GameState.LOST:
case GameState.WIN:
return false;
case GameState.BEGINNING:
this.prepare(index);
this._state.next(GameState.PLAYING);
break;
case GameState.PLAYING:
if (this.testIsMine(index)) {
this._state.next(GameState.LOST);
}
break;
default:
break;
}
if (this.vitoryVerify()) {
this._state.next(GameState.WIN);
}
return true;
}
// ...
}上面的代碼中包含了 prepare , testIsMine , victoryVerify 這三個函數，他們的作用都是進行一些邏輯運算。
我們先看 prepare ，因為他是最先運行的。這個函數的主要邏輯是通過隨機數生成地雷，并且保證使得用戶第一次點擊地雷塊的時候，不會出現雷。配合著注釋，我們一行一行的分析它是怎么運行的。
export class MineSweeperService {
private prepare(index: number) {
const blocks = [...this._mineBlocks.value];
// 判斷index是否越界了
if (!blocks[index]) {
throw Error('Out of index.');
}
// 將索引位置的塊設置為已經打開的狀態。
blocks[index] = { isMine: false, isFound: true, nearestMinesCount: 0 };
// 生成隨機數數組，其中的隨機數不包含 index。
const numbers = this.generateRandomNumbers(this.mineCount, this.mineBlocks.length, index);
// 通過隨機數數組，設置指定的塊為雷。
for (const num of numbers) {
blocks[num] = { isMine: true, isFound: false, nearestMinesCount: 0 };
}
// 使用橫縱坐標遍歷所有的地雷塊
// 這樣做使得我們可以直接通過對坐標的增減來檢測當前塊附近雷的數量。
const side = this.side;
for (let i = 0; i < side; i++) {
for (let j = 0; j < side; j++) {
const index = transform(i, j);
const block = blocks[index];
// 如果當前塊是雷，那么不進行檢測
if (block.isMine) {
continue;
}
// 進行地雷塊的附近的雷的數量檢測，形如這樣
// x 1 o
// 1 1 o
// o o o
//
let nearestMinesCount = 0;
for (let x = -1; x <= 1; x++) {
for (let y = -1; y <= 1; y++) {
nearestMinesCount += this.getMineCount(blocks[transform(i + x, j + y)]);
}
}
// 對附近的地雷的數量進行更新
blocks[index] = { ...block, nearestMinesCount };
}
}
// 如果點擊的位置附近的地雷數量是 0，則需要遍歷附近所有的塊，直到所有打開的塊附近的地雷數量不為零。
if (blocks[index].nearestMinesCount === 0) {
this.cleanZeroCountBlock(blocks, index, this.transformToIndex(this.side));
}
// 觸發更新
this._mineBlocks.next(blocks);
}
}再來看 testIsMine ，其作用是返回一個布爾值，這個布爾值表示用戶點擊的塊是否為地雷。
private testIsMine(index: number): boolean {
const blocks = [...this._mineBlocks.value];
if (!blocks[index]) {
throw Error('Out of index.');
}
// 當前塊為設打開狀態
const theBlock = { ...blocks[index], isFound: true };
blocks[index] = theBlock;
// 如果當前塊是地雷，則找出所有是地雷的地雷塊，將其狀態設置為打開狀態。
// 或者如果點擊的位置附近的地雷數量是 0，則需要遍歷附近所有的塊，直到所有打開的塊附近的地雷數量不為零。
if (theBlock.isMine) {
for (let i = 0; i < blocks.length; i++) {
if (blocks[i].isMine) {
blocks[i] = { ...blocks[i], isFound: true };
}
}
} else if (!theBlock.nearestMinesCount) {
this.cleanZeroCountBlock(blocks, index);
}
// 觸發更新
this._mineBlocks.next(blocks);
// 返回判定結果
return theBlock.isMine;
}那么到了 victoryVerify ，它的作用很明顯，就是進行勝利判定：當未打開的塊的數量等于設定的地雷數量相等的時候，可以被判定為用戶勝利。
private vitoryVerify() {
// 對當前地雷塊數組進行 reduce 查找。
return this.mineBlocks.reduce((prev, current) => {
return !current.isMine && current.isFound ? prev + 1 : prev;
}, 0) === this.mineBlocks.length - this.mineCount;
}現在我們已經介紹完這三個函數，下面將分析 cleanZeroCountBlock 是如何運行的。他的作用就是為了打開當前塊附近所有為零的塊。
private cleanZeroCountBlock(blocks: IMineBlock[], index: number) {
const i = index % this.side;
const j = Math.floor(index / this.side);
// 對其附近的8個塊進行檢測
for (let x = -1; x <= 1; x++) {
for (let y = -1; y <= 1; y++) {
const currentIndex = this.transformToIndex(i + x, j + y);
const block = blocks[currentIndex];
// 不為原始塊，且塊存在，且未打開，且不是地雷
if (currentIndex === index || !block || block.isFound || block.isMine) {
continue;
}
// 將其設為打開狀態
blocks[currentIndex] = { ...block, isFound: true };
// 遞歸查詢
if (blocks[currentIndex].nearestMinesCount === 0) {
this.cleanZeroCountBlock(blocks, currentIndex);
}
}
}
}看完這篇關于Angular如何實現一個掃雷游戲的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
