ng new simple-game --createApplication=false 
ng generate application mine-sweeper

ng new mine-sweeper

// model.ts

export enum GameState {
 BEGINNING = 0x00,
 PLAYING = 0x01,
 WIN = 0x02,
 LOST = 0x03,
}

export interface IMineBlock {
 // 當(dāng)前塊是否是的內(nèi)部是地雷
 readonly isMine: boolean;
 // 附近地雷塊的數(shù)量
 readonly nearestMinesCount: number;
 // 是否已經(jīng)被點(diǎn)開
 readonly isFound: boolean;
}

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; }

 //...
}

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;
 }
 
 // ...
}

export class MineSweeperService {
 private prepare(index: number) {
  const blocks = [...this._mineBlocks.value];
  // 判斷index是否越界了
  if (!blocks[index]) {
   throw Error('Out of index.');
  }
  // 將索引位置的塊設(shè)置為已經(jīng)打開的狀態(tài)。
  blocks[index] = { isMine: false, isFound: true, nearestMinesCount: 0 };

  // 生成隨機(jī)數(shù)數(shù)組，其中的隨機(jī)數(shù)不包含 index。
  const numbers = this.generateRandomNumbers(this.mineCount, this.mineBlocks.length, index);
  // 通過隨機(jī)數(shù)數(shù)組，設(shè)置指定的塊為雷。
  for (const num of numbers) {
   blocks[num] = { isMine: true, isFound: false, nearestMinesCount: 0 };
  }

  // 使用橫縱坐標(biāo)遍歷所有的地雷塊
  // 這樣做使得我們可以直接通過對(duì)坐標(biāo)的增減來檢測當(dāng)前塊附近雷的數(shù)量。
  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];
    // 如果當(dāng)前塊是雷，那么不進(jìn)行檢測
    if (block.isMine) {
     continue;
    }

    // 進(jìn)行地雷塊的附近的雷的數(shù)量檢測，形如這樣
    // 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)]);
     }
    }
    // 對(duì)附近的地雷的數(shù)量進(jìn)行更新
    blocks[index] = { ...block, nearestMinesCount };
   }
  }

  // 如果點(diǎn)擊的位置附近的地雷數(shù)量是 0，則需要遍歷附近所有的塊，直到所有打開的塊附近的地雷數(shù)量不為零。
  if (blocks[index].nearestMinesCount === 0) {
   this.cleanZeroCountBlock(blocks, index, this.transformToIndex(this.side));
  }

  // 觸發(fā)更新
  this._mineBlocks.next(blocks);
 }
}

private testIsMine(index: number): boolean {
 const blocks = [...this._mineBlocks.value];
 if (!blocks[index]) {
  throw Error('Out of index.');
 }

 // 當(dāng)前塊為設(shè)打開狀態(tài)
 const theBlock = { ...blocks[index], isFound: true };
 blocks[index] = theBlock;

 // 如果當(dāng)前塊是地雷，則找出所有是地雷的地雷塊，將其狀態(tài)設(shè)置為打開狀態(tài)。
 // 或者如果點(diǎn)擊的位置附近的地雷數(shù)量是 0，則需要遍歷附近所有的塊，直到所有打開的塊附近的地雷數(shù)量不為零。
 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);
 }

 // 觸發(fā)更新
 this._mineBlocks.next(blocks);

 // 返回判定結(jié)果
 return theBlock.isMine;
}

 private vitoryVerify() {
  // 對(duì)當(dāng)前地雷塊數(shù)組進(jìn)行 reduce 查找。
  return this.mineBlocks.reduce((prev, current) => {
   return !current.isMine && current.isFound ? prev + 1 : prev;
  }, 0) === this.mineBlocks.length - this.mineCount;
 }

private cleanZeroCountBlock(blocks: IMineBlock[], index: number) {
 const i = index % this.side;
 const j = Math.floor(index / this.side);
 // 對(duì)其附近的8個(gè)塊進(jìn)行檢測
 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];
   // 不為原始?jí)K，且塊存在，且未打開，且不是地雷
   if (currentIndex === index || !block || block.isFound || block.isMine) {
    continue;
   }
   // 將其設(shè)為打開狀態(tài)
   blocks[currentIndex] = { ...block, isFound: true };

   // 遞歸查詢
   if (blocks[currentIndex].nearestMinesCount === 0) {
    this.cleanZeroCountBlock(blocks, currentIndex);
   }
  }
 }
}