首页 >> js开发 >> js用Angular实现一个扫雷的游戏示例js大全
js用Angular实现一个扫雷的游戏示例js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
最近想找些项目练练手，发现去复刻一些小游戏还挺有意思的，于是就做了一个网页版的扫雷。点击这里 看看最终的效果。这里 创建应用创建应用创建应用该项目使用的是 monorepo 的形式来存放代码。在 Angular 中，构建 monorepo 方法如下：
ng new simple-game --createApplication=false
ng generate application mine-sweeper
ng new simple-game --createApplication=false
ng generate application mine-sweeper在这里，因为该项目以后还会包含其他各种其他的应用，所以个人觉得使用 monorepo 构建项目是比较正确的选择。如果不想使用 monorepo，使用以下命令创建应用：
ng new mine-sweeper
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;
}
// 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
ng generate service mine-sweeper现在开始逻辑编写。首先，要存储游戏状态、地雷块、地雷块边长（目前设计的扫雷是正方形）、雷的数量。
export class MineSweeperService {
private readonly _mineBlocks = new BehaviorSubject([]);
private readonly _side = new BehaviorSubject(10);
private readonly _state = new BehaviorSubject(GameState.BEGINNING);
private readonly _mineCount = new BehaviorSubject(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; }
//...
}
export class MineSweeperService {
private readonly _mineBlocks = new BehaviorSubject([]);
private readonly _side = new BehaviorSubject(10);
private readonly _state = new BehaviorSubject(GameState.BEGINNING);
private readonly _mineCount = new BehaviorSubject(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 主要功能是提供了一个响应式的对象，使得逻辑服务可以通过这个对象对数据进行变更，并且，组件也可以通过这些对象来监听数据变化。RxjsBehaviorSubjectBehaviorSubject通过上面的准备工作，我们可以开始编写逻辑函数 start 和 doNext 。 start 的作用是给状态机重新设置状态；而 doNext 的作用是根据玩家点击的方块的索引对游戏进行状态转移。startdoNextstartdoNext
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;
}
// ...
}
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 这三个函数，他们的作用都是进行一些逻辑运算。preparetestIsMinevictoryVerify我们先看 prepare ，因为他是最先运行的。这个函数的主要逻辑是通过随机数生成地雷，并且保证使得用户第一次点击地雷块的时候，不会出现雷。配合着注释，我们一行一行的分析它是怎么运行的。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);
}
}
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 ，其作用是返回一个布尔值，这个布尔值表示用户点击的块是否为地雷。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;
}
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 ，它的作用很明显，就是进行胜利判定：当未打开的块的数量等于设定的地雷数量相等的时候，可以被判定为用户胜利。victoryVerify
private vitoryVerify() {
// 对当前地雷块数组进行 reduce 查找。
return this.mineBlocks.reduce((prev, current) => {
return !current.isMine && current.isFound ? prev + 1 : prev;
}, 0) === this.mineBlocks.length - this.mineCount;
}
private vitoryVerify() {
// 对当前地雷块数组进行 reduce 查找。
return this.mineBlocks.reduce((prev, current) => {
return !current.isMine && current.isFound ? prev + 1 : prev;
}, 0) === this.mineBlocks.length - this.mineCount;
}现在我们已经介绍完这三个函数，下面将分析 cleanZeroCountBlock 是如何运行的。他的作用就是为了打开当前块附近所有为零的块。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);
}
}
}
}
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);
}
}
}
}到这里，我们基本已经编写完扫雷的具体逻辑。其他相关函数，可以查阅源码，不再赘述。实现页面实现页面实现页面到了这一步，其实就已经完成了大部分的工作，我们根据响应式对象编写组件，然后给dom对象添加点击事件，并触发相关的逻辑函数，之后再做各种的错误处理等等。页面代码就不贴在这里，在Github上可以查看源码。源码以及参考
源码以及参考源码以及参考最后，如果有写得不好或者存在错误的地方，欢迎提出批评和修改建议，感谢您的阅读。Mine Sweeper 源码Mine Sweeper 源码Angular 官方文档Angular 官方文档Rxjs 官方文档Rxjs 官方文档
ng new simple-game --createApplication=false
ng generate application mine-sweeper
ng new simple-game --createApplication=false
ng generate application mine-sweeper在这里，因为该项目以后还会包含其他各种其他的应用，所以个人觉得使用 monorepo 构建项目是比较正确的选择。如果不想使用 monorepo，使用以下命令创建应用：
ng new mine-sweeper
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;
}
// 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
ng generate service mine-sweeper现在开始逻辑编写。首先，要存储游戏状态、地雷块、地雷块边长（目前设计的扫雷是正方形）、雷的数量。
export class MineSweeperService {
private readonly _mineBlocks = new BehaviorSubject
private readonly _side = new BehaviorSubject(10);
private readonly _state = new BehaviorSubject
private readonly _mineCount = new BehaviorSubject
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; }
//...
}
export class MineSweeperService {
private readonly _mineBlocks = new BehaviorSubject
private readonly _side = new BehaviorSubject(10);
private readonly _state = new BehaviorSubject
private readonly _mineCount = new BehaviorSubject
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 主要功能是提供了一个响应式的对象，使得逻辑服务可以通过这个对象对数据进行变更，并且，组件也可以通过这些对象来监听数据变化。RxjsBehaviorSubjectBehaviorSubject通过上面的准备工作，我们可以开始编写逻辑函数 start 和 doNext 。 start 的作用是给状态机重新设置状态；而 doNext 的作用是根据玩家点击的方块的索引对游戏进行状态转移。startdoNextstartdoNext
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;
}
// ...
}
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 这三个函数，他们的作用都是进行一些逻辑运算。preparetestIsMinevictoryVerify我们先看 prepare ，因为他是最先运行的。这个函数的主要逻辑是通过随机数生成地雷，并且保证使得用户第一次点击地雷块的时候，不会出现雷。配合着注释，我们一行一行的分析它是怎么运行的。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);
}
}
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 ，其作用是返回一个布尔值，这个布尔值表示用户点击的块是否为地雷。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;
}
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 ，它的作用很明显，就是进行胜利判定：当未打开的块的数量等于设定的地雷数量相等的时候，可以被判定为用户胜利。victoryVerify
private vitoryVerify() {
// 对当前地雷块数组进行 reduce 查找。
return this.mineBlocks.reduce((prev, current) => {
return !current.isMine && current.isFound ? prev + 1 : prev;
}, 0) === this.mineBlocks.length - this.mineCount;
}
private vitoryVerify() {
// 对当前地雷块数组进行 reduce 查找。
return this.mineBlocks.reduce((prev, current) => {
return !current.isMine && current.isFound ? prev + 1 : prev;
}, 0) === this.mineBlocks.length - this.mineCount;
}现在我们已经介绍完这三个函数，下面将分析 cleanZeroCountBlock 是如何运行的。他的作用就是为了打开当前块附近所有为零的块。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);
}
}
}
}
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);
}
}
}
}到这里，我们基本已经编写完扫雷的具体逻辑。其他相关函数，可以查阅源码，不再赘述。实现页面实现页面实现页面到了这一步，其实就已经完成了大部分的工作，我们根据响应式对象编写组件，然后给dom对象添加点击事件，并触发相关的逻辑函数，之后再做各种的错误处理等等。页面代码就不贴在这里，在Github上可以查看源码。源码以及参考
源码以及参考源码以及参考最后，如果有写得不好或者存在错误的地方，欢迎提出批评和修改建议，感谢您的阅读。Mine Sweeper 源码Mine Sweeper 源码Angular 官方文档Angular 官方文档Rxjs 官方文档Rxjs 官方文档
相关文章:
- jsvue data对象重新赋值无效(未更改)的解决方式js大全
- js代码javascript递归函数定义和用法示例分析
- jsvue在响应头response中获取自定义headers操作js大全
- jsvue中全局路由守卫中替代this操作(this.$store/this.$vux)js大全
- js解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题js大全
- JavaScript深入了解Vue.js 混入（mixins）
- js解决父组件将子组件作为弹窗调用只执行一次created的问题js大全
- js解决vue无法侦听数组及对象属性的变化问题js大全
- jsvue+axios全局添加请求头和参数操作js大全
- jsvue实现用户长时间不操作自动退出登录功能的实现代码js大全
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
