扫雷

扫雷(一)

js学到了一定程度，是时候找个小项目练练手了

	经典的扫雷作为万千小项目的扛把子，我们拿它作为第一个磨刀石，就很适合了。

html和css就不赘述了。直接进入主题----js。
首先我们要动态的创建格子。
这里我建立10X10的方格。

var div;
var box;
for(var i = 0; i < 10; i++){
	for(var j = 0; j < 10; j++){
		div = document.createElement('div');
		box = document.getElementById('box');
		box.appendChild(div);
		div.setAttribute('id',i+ '-' +j);
		div.setAttribute('class','block');
		div.onclick = function(){
			var bc = this.style.backgroundColor;
				if(bc != 'red' && bc != 'blue'){
					this.style.backgroundColor="red";
				}
			}
		mineNum.push({mine:0});
	}
}

div是小格子，box是我在html里设置好的div。
这里要注意，动态的创建标签的时候，一定要先把标签create出来，然后再appendchild到父级下面，appendchild不接受字符串。
然后该给盒子加样式了。父级一起加上。

*{
	margin:0;
	padding: 0;
	text-decoration: none;
}

#box{
	width: 500px;
	height:500px;
	position: relative;
	left: 50%;
	top: 50px;
	margin-left: -250px;
}


.block{
	height: 48px;
	width: 48px;
	border: 1px solid black;
	float: left;
}

设置了边线和float后，我们的格子排好了，setAttribute给它们编号且设置class，编号让格子从一维变为二维，class让这些格子成一类。
格子设好了，该设置雷了。

var mineMap = 10;
while(mineMap){
	var mineIndex = Math.floor(Math.random() * 100);
	if(mineNum[mineIndex].mine == 0){
		mineNum[mineIndex].mine = 1;
		block[mineIndex].style.backgroundColor = 'blue';
		mineMap--;
	}
}

用随机数弄10个雷。
之前我用的for但是由于我要判断随机函数是否重复，重复了就要重新随机，但for不能在里面修改计数器i所以我就用了while，可以把计数器拆到if循环里
之前我这小demo是将backgroundcolor当成雷，绑定点击事件，但是后来发现不能这样，因为颜色(图片)应该是用来显示或遮挡的，而不是实现逻辑上的雷，需要再设置一个变量mineNum来储存雷，尽量将展示与绑定分离，
之前我的随机数是先全部随机出来再与div一一匹配，然后发现这样判断重复的话很麻烦，如下图所示。

1	1
20	20
58	58
…	…

比较好的方法是在循环里一个一个的判断，有重复立马丢掉，直到随机数达到10个。

下一章就要进行‘隐藏雷’和‘雷周围数字的累加’实现了。