html：
<div class="bangMap"></div>
css：
.bangMap{
width: 200px;
height: 200px;
background-color: aliceblue;
border-bottom: 1px solid gainsboro;
border-right: 1px solid gainsboro;
}
.bangMap>div{
background-color: beige;
width: 20px;
height: 20px;
border-left: 1px solid gainsboro;
border-top: 1px solid gainsboro;
float: left;
box-sizing: border-box;
text-align: center;
font-size: 12px;
line-height: 20px;
cursor: default;
}
.bangMap>div.opened{
background-color: #fff;
}
.bangMap>div.signed{
background-color: goldenrod;
}
script：
function Bang(w,h,bang){ //初始化扫雷地图
this.width = w || 10;
this.height = h || 10;
this.bang = bang || 10;
this.squares = []; //存放所有格子信息
this.divs = []; //存放所有divDom
this.bangArr = [0,5,11,18,32,33,56,62,87,88] //雷的位置，可以优化一个随机数组
this.signDivArr = []
}
Bang.prototype.init = function(){ //初始化一个二维数组存放扫雷数据
var num = 0
for (var i=0; i<this.width; i++) {
this.squares[i] = []
for (var j=0; j<this.height; j++) {
if(this.bangArr.indexOf(num++)>=0){
this.squares[i][j] = {type:'bang',x:j,y:i}
}else{
this.squares[i][j] = {type:'number',x:j,y:i,value:0}
}
}
}
this.updateNum() //把雷周围的提示数字加上
this.initDom() //把dom显示实现
document.querySelector('.bangMap').oncontextmenu = function(){ //鼠标右击雷的位置，禁止鼠标默认事件
return false
}
}
Bang.prototype.updateNum = function(){
for (var i=0; i<this.squares.length; i++) {
for (var j=0; j<this.squares[i].length; j++) {
if(this.squares[i][j].type == 'bang'){
var result = this.getAround(this.squares[i][j])
for(var k=0; k<result.length; k++){
this.squares[result[k].j][result[k].i].value++
}
}
}
}
console.log(this.squares)
}
Bang.prototype.getAround = function(curBang){
var x = curBang.x, y=curBang.y;
var result = [];
for(var i=x-1;i<=x+1;i++){
for(var j=y-1;j<=y+1;j++){
if(i<0||j<0||i>this.height-1||j>this.width-1||(i==x && j==y)||this.squares[j][i].type=='bang'){//边缘，本身，雷去掉
continue;
}
result.push({i,j})
}
}
// console.log(result)
return result
}
Bang.prototype.initDom = function(){
var This = this
for(var i=0; i<this.width; i++){
this.divs[i] = []
for(var j=0; j<this.height; j++){
var div = document.createElement('div')
// if(this.squares[i][j].type=='number'){
// div.innerHTML = this.squares[i][j].value==0?'':this.squares[i][j].value
// }else{
// div.style.backgroundColor = 'red'
// }
div.pos={i,j}
this.divs[i][j]=div
div.onmousedown = function(e){
This.play(e,this)
}
document.querySelector('.bangMap').appendChild(div)
}
}
}
Bang.prototype.play = function(event,div){
if(event.which==1 && div.className != 'signed'){
if(this.squares[div.pos.i][div.pos.j].type == 'bang'){
this.losed()
alert('game over')
}else{
div.innerHTML = this.squares[div.pos.i][div.pos.j].value
div.className = 'opened'
if(this.squares[div.pos.i][div.pos.j].value == 0){
div.innerHTML = ''
this.openAllZero(this.squares[div.pos.i][div.pos.j])
}
this.gameWin()
}
}
if(event.which == 3){
this.signDivArr.push({i:div.pos.i,j:div.pos.j})
div.className = 'signed'
// if(this.signDivArr.length==10){
// this.gameOver()
// }
}
console.log(this.signDivArr)
}
Bang.prototype.openAllZero = function(currenZero){
var result = this.getAround(currenZero)
// console.log(result['i'],result['j'])
for(var i=0; i<result.length; i++){
if(this.squares[result[i].j][result[i].i].type == 'number'){
this.divs[result[i].j][result[i].i].innerHTML = this.squares[result[i].j][result[i].i].value
this.divs[result[i].j][result[i].i].className = 'opened'
if(this.squares[result[i].j][result[i].i].value == 0){
if(!this.squares[result[i].j][result[i].i].check){
this.squares[result[i].j][result[i].i].check = true
this.openAllZero(this.squares[result[i].j][result[i].i])
}
this.divs[result[i].j][result[i].i].innerHTML = ''
}
}
}
}
Bang.prototype.gameWin = function(){
var count = 0
for(var i=0; i<this.squares.length; i++){
for(var j=0; j<this.squares[i].length; j++){
if(this.divs[i][j].className=='opened'){
++count
console.log(count)
if(count==90){
this.stylePass()
alert('Game Passed!')
}
}
}
}
}
Bang.prototype.stylePass = function(){
this.losed('green')
}
Bang.prototype.losed = function(color){
for(var i=0; i<this.squares.length; i++){
for(var j=0; j<this.squares[i].length; j++){
if(this.squares[i][j].type=='bang'){
this.divs[i][j].style.backgroundColor = color?'green' : 'red'
}
}
}
}
this.bang = new Bang()
this.bang.init()
总结：翻开到没有提示，也就是0的方块时，要使用递归的办法，先把它周围的8个方块找出来，如果还是0，继续；有提示就停止
网友评论