扫雷小游戏，可以升级过关，难度随关卡增加。但是有很明显的bug，以后有时间会继续优化！

 

 

HTML:

<div class="mainContent"><div class="bg-white text-center borderb paddingv10"><button class="flexWidth marginr10" (click)="gameStartFn()">Start</button><button class="flexWidth marginr10" (click)="gameEndFn()">Stop Game</button><span>Mine Left: {{this.mineArray.length}}</span></div><ul class="mineContainer clear" [ngStyle]="getWidth()"><li *ngFor="let column of columnArray" (mousedown)="onClickFn(column.index, $event)" οncοntextmenu="return false" [ngClass]="{ 'bg-gray': column.clicked == true && column.number == 0}" ><span *ngIf="column.isMine && visibleItem.mine" class="fa fa-bomb fs-26 text-black"></span><span *ngIf="!column.isOver && !column.isMine && column.number !=0">{{column.number}}</span><span *ngIf="column.isFlag" class="fa fa-flag"></span><!-- <span class="text-red">{{column.index}}</span> --></li></ul>
</div>

　　

CSS:

.mineContainer {margin: 20px auto;box-sizing: border-box;
}
.mineContainer li {width: 50px;height: 50px;border: solid 1px #fff;float: left;background-color: orange;color: #fff;text-align: center;line-height: 50px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;
}
.mineContainer li:hover {cursor: pointer;
}

　　

TS:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';@Component ({templateUrl: './mineSweeping.component.html',styleUrls: ['./mineSweeping.component.css']
})export class MineSweepingComponent implements OnInit {private hitSection: any = { sectionNum: 1, columnNum: '', minMineNum: '' }; // 关卡参数： 关卡数、列数、最小地雷数private visibleItem: any = { mine: false, location: false }; // 控制是否显示的参数：地雷、标记private columnArray: Array<any> = []; // 地雷画布数组（好多参数，下面会有赋值）private mineArray: Array<any> = []; // 地雷数组private rules: any; // 判断点击位置是否为最上下左右列--private isOver: boolean = false ; // 是否结束private isSuccess: boolean = false; // 是否成功constructor(private router: Router){}ngOnInit(){this.hitSectionInitFn();this.columnInitFn();this.mineInitFn();}hitSectionInitFn(){ // 根据关卡数调整列数，最小地雷总数this.hitSection.columnNum = this.hitSection.sectionNum * 5;this.hitSection.minMineNum = this.hitSection.sectionNum * 5;}columnInitFn(){ // 地雷画布初始化： 坐标（id）、水平坐标、垂直坐标、是否为雷、周围雷数、是否被点击、是否被标记this.columnArray = [];for(let i = 0; i < this.hitSection.columnNum ; i++){for(let j = 0; j < this.hitSection.columnNum; j++) {this.columnArray.push({ index: this.columnArray.length, horizontal: i, vertical: j,  isMine: false, number: 0, clicked: false, isFlag: false });}}}mineInitFn(){ // 地雷初始化let tempArray = [], tempMineNum;this.mineArray = [];// 根据最小地雷数，随机生成一个 [最小地雷数 - (最小地雷数 + 最小地雷数)]之间的数值，为本关的地雷总数（比如10 - 20之间的数值）tempMineNum = Math.round( Math.random() * this.hitSection.minMineNum +  this.hitSection.minMineNum);// 根据地雷总数，随机生成数字数组for(let i = 0; i < tempMineNum; i++){tempArray.push( Math.round ( Math.random() * (this.hitSection.columnNum * this.hitSection.columnNum) ) );}// 数组去重for(let i = 0; i < tempArray.length; i++){if(this.mineArray.indexOf(tempArray[i]) == -1){this.mineArray.push(tempArray[i]);}}// 根据去重数组，赋值给地雷画布数组中的 isMine 参数for(let i = 0; i < this.columnArray.length; i++) {for(let j = 0; j < this.mineArray.length; j++) {if(this.mineArray[j] == i){this.columnArray[i].isMine = true;}}}console.log(this.mineArray);}onClickFn(index, event){if(event.button == 2){ // 点击右键，做雷区标记this.columnArray[index].isFlag = !this.columnArray[index].isFlag;if(this.columnArray[index].isFlag){this.mineArray.length--;} else {this.mineArray.length++;}} else { // 点击左键，计算周围雷数this.checkMineArroundFn(index);}// 每次点击后，查看是否过关setTimeout(() => {this.ifSuccessFn();}, 100);}getPositionRules(index: number){ // 判断点击位置是否为最上下左右列this.rules = {top: this.columnArray[index].horizontal == 0,bottom: this.columnArray[index].horizontal == (this.hitSection.columnNum - 1),left: this.columnArray[index].vertical == 0,right: this.columnArray[index].vertical == (this.hitSection.columnNum - 1)}}checkMineArroundFn(index: number){ // 计算周围雷数if(this.columnArray[index].clicked ){return;}this.getPositionRules(index);if(this.columnArray[index].isMine) {this.gameEndFn();return;}  else if (!this.columnArray[index].isMine) {// 这里逻辑比较复杂, 根据点击坐标，计算其上、下、左、右、左上、右上、左下、右下八块位置的雷数，如果是第一列，则不计算上、左上、右上（以此类推）if(!this.rules.top) { if( this.columnArray[(index - this.hitSection.columnNum)].isMine ) { this.columnArray[index].number++; } // topif (!this.rules.left) { if( this.columnArray[(index - this.hitSection.columnNum - 1)].isMine ) { this.columnArray[index].number++; } // top left}if (!this.rules.right) { if( this.columnArray[(index - this.hitSection.columnNum + 1)].isMine ) { this.columnArray[index].number++; } // top right}}if(!this.rules.bottom) { if( this.columnArray[(index + this.hitSection.columnNum)].isMine ) { this.columnArray[index].number++; } // bottomif (!this.rules.left) { if( this.columnArray[(index + this.hitSection.columnNum - 1)].isMine ) { this.columnArray[index].number++; }  // bottom left}if (!this.rules.right) { if( this.columnArray[(index + this.hitSection.columnNum + 1)].isMine ) { this.columnArray[index].number++; } // bottom right}}if(!this.rules.left) { if( this.columnArray[(index - 1)].isMine ) { this.columnArray[index].number++; } // left}if(!this.rules.right) { if( this.columnArray[(index + 1)].isMine ) { this.columnArray[index].number++; } //right}           this.columnArray[index].clicked = true;}// 如果周围没有雷，则执行下面函数（扩大计算面积，查找周围坐标的附近雷数）if( this.columnArray[index].number == 0 ){this.checkAroundFn(index);}}checkAroundFn(index: number){ // 扩大计算面积，查找周围坐标的附近雷数（还是如果是第一行，不查找左上、上、右上位置）if(!this.rules.top){this.checkMineArroundFn(index - this.hitSection.columnNum);if(!this.rules.left) {this.checkMineArroundFn(index - this.hitSection.columnNum - 1);}if(!this.rules.right){this.checkMineArroundFn(index - this.hitSection.columnNum + 1);}}if(!this.rules.bottom){this.checkMineArroundFn(index + this.hitSection.columnNum);if(!this.rules.left) {this.checkMineArroundFn(index + this.hitSection.columnNum - 1);}if(!this.rules.right){this.checkMineArroundFn(index + this.hitSection.columnNum + 1);}}if(!this.rules.left){this.checkMineArroundFn(index - 1);}if(!this.rules.right){this.checkMineArroundFn(index + 1);}}gameStartFn(){ // 游戏开始this.hitSectionInitFn();this.columnInitFn();this.mineInitFn();this.visibleItem = { mine: false, location: false,};}gameEndFn(){ // 游戏结束debuggerthis.visibleItem = { mine: true, location: false };this.isOver = true;for(let i = 0; i < this.columnArray.length; i++){this.columnArray[i].clicked = true;this.columnArray[i].isFlag = false;}}ifSuccessFn(){ //判断是否过关let temCheckSuccess = false;// 查看地雷画布中，所有 isMine 对应的 isFlag 是否同为 true（也就是说，左右雷都被标记）for(let i = 0; i < this.columnArray.length; i++){if( this.columnArray[i].isFlag != this.columnArray[i].isMine ) {temCheckSuccess = false;return;} else {temCheckSuccess = true;}}// 询问是否进入下一关if(temCheckSuccess){this.isSuccess = true;if(this.isSuccess){let confirmNext = confirm('Congaratulations! You have pass the section ' + this.hitSection.sectionNum + '. \n Would you like go on?')if(confirmNext){this.hitSection.sectionNum++;this.gameStartFn();} else {this.router.navigate(['/home']);}}}}getWidth(){ // 根据列数，获取外层盒子宽度return { width: this.hitSection.columnNum * 50 + 'px' } }}