分享个小游戏【扫雷】

以前觉得扫雷挺无聊的，某天玩了一个下午后，感觉还有点意思，于是也用js写了个～～<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>扫雷</title>
</head>
<style>
div.cell{
width:20px;
height:20px;
background-color:#0066FF;
line-height:20px;
font-size:16px;
text-align:center;
float:left;
margin:1px;
cursor:pointer;
font-weight:bold;
}
#box{ border:#333333 solid 1px; margin:auto; cursor:default;}
</style>
<body>
<div>
<div id="box">
</div>
</div>
</body>
<script language="javascript">
/**
 * by cayleung
 */
var Game = {
width : 16,
height : 16,
bobNum : 40,
numClr:[null, "#33FF66", "#339900", "#CC9999", "#CC66FF", "#CC0099", "#FF0000", "#CC9900", "#000000"],
_obj :[],
//初始化
init: function(w,h,n){
this._obj = [];
//生成div
var html = "";
for(var i=0; i<this.height;i++){
var arr = [];
for(var j=0;j <this.width;j++){
html += '<div id="'+i+"_"+j+'" class="cell" onclick="Game.click(this);"></div>';
var obj = {show:false, bob:false, x:i, y:j, border:[]};
//获取周边的元素
var borderCell = [[i-1,j-1], [i-1,j], [i-1,j+1], [i,j-1], [i, j+1], [i+1, j-1], [i+1, j], [i+1, j+1]];
for(var k=0;k<borderCell.length; k++){
if(!(borderCell[k][1]<0 || borderCell[k][1]>= this.width || borderCell[k][0]<0 || borderCell[k][0]>=this.height)){
obj.border.push([borderCell[k][0],borderCell[k][1]]);
}
}
arr.push(obj);
}
this._obj.push(arr);
}
//将所有元素放进box了
var box = document.getElementById("box");
box.style.width = this.width*22+"px";
box.style.height = this.height*22+"px";
box.innerHTML = html;
//生成炸弹
var bobstr = "0";
var i=0;
while(i<this.bobNum){
var id = this.rand(0, this.width) +"_"+ this.rand(0, this.height);
if(bobstr.search(new RegExp(id)) === -1){
bobstr += "|" + id;
i ++;
}
}
var bobArr = bobstr.split(/\|/);
bobArr.shift();
for(var i=0;i<bobArr.length;i++){
this.getObjById(bobArr[i]).bob = true;
}
},
//点击操作
click:function(elem){
var obj = Game.getObjById(elem.id);
if(obj.show){//显示过的不响应
return false;
}else if(obj.bob){ //是地雷就结束游戏
Game.showBob();
if (window.confirm("杯具！踩到地雷了！还来不？")){
Game.init();
}
return false;
}else{//没点中地雷
Game.showCell(obj);
if(Game.isFinish()){
if (window.confirm("恭喜完成！还来不？")){
Game.init();
}
}
}
},
//显示所点中的方格
showCell : function(obj){
if(obj.show){
return;
}
//获取四周的地雷数量
var num = 0;
var ele = this.getEleByXy(obj.x, obj.y);
for(var i=0;i<obj.border.length;i++){
var borderObj = this.getObjByXy(obj.border[i][0], obj.border[i][1]);
if(borderObj.bob){
num++;
}
}
if(num==0){//如果没地雷，就显示所有周边方格
obj.show = true;
ele.style.backgroundColor = "#EEEEEE";
for(var i=0;i<obj.border.length;i++){
this.showCell(this.getObjByXy(obj.border[i][0], obj.border[i][1]));
}
}else{//只显示点击的方格
obj.show = true;
ele.innerHTML = num;
ele.style.color = this.numClr[num];
ele.style.backgroundColor = "#EEEEEE";
}
},
//显示所有地雷
showBob:function(){
for(var i=0; i<this.width;i++){
for(var j=0;j <this.height;j++){
var obj = this.getObjByXy(i, j);
if(obj.bob){
var ele = this.getEleByXy(obj.x, obj.y);
ele.style.color = "#FFFFFF";
ele.style.backgroundColor = "#FF0000";
ele.innerHTML = "B";
obj.show = true;
}
}
}
},
//检查是否完成，对比隐藏方格数量和炸弹数量
isFinish:function(){
var nowNum = 0;
for(var i=0; i<this.width;i++){
for(var j=0;j <this.height;j++){
if(!this.getObjByXy(i, j).show){
nowNum++;
}
}
}
return this.bobNum === nowNum;
},
//下面的都是些基础方法
//生成随机数
rand:function(min, max){
return Math.round(Math.random() * (max - min-1) + min);
},
getEleById:function(id){
return document.getElementById(id);
},
getEleByXy:function(x, y){
return document.getElementById(x+"_"+y);
},
getObjByXy:function(x, y){
if(x<0 || x>= this.width || y<0 || y>=this.height){
return null;
}
return this._obj[x][y];
},
getObjById:function(id){
var xy = id.split(/_/);
return this.getObjByXy(parseInt(xy[0]),parseInt(xy[1]));
}
}
Game.init();
</script>
</html>