以下是源代码
只写完了核心的东西，其他的零碎没有写。
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.outer{border:1px solid #333;}
.bomb{
width:43px; height:43px; line-height:43px;
font-size:24px; color:#09F; font-weight:bold;
text-align:center; float:left;
background:url(images/common.gif) no-repeat
}
.none{background:url(images/none.gif) no-repeat;}
.over{background:url(images/bomb.gif) no-repeat;}
</style>
</head>
<body>
<div id="inputNum">
<label>纵向数量（行数）
<input name="horizontalNum" type="text" id="horizontalNum" value="10" />
</label>
<label>横向数量（列数）
<input type="text" name="verticalNum" id="verticalNum" value="10" />
</label>
<label>雷的数量
<input type="text" name="bombNum" id="bombNum" value="10" />
</label>
<input type="button" value="开始" onclick="initBomb(document.getElementById('horizontalNum').value,
document.getElementById('verticalNum').value,
document.getElementById('bombNum').value)" />
</div>
<script type="text/javascript">
function initBomb(hN, vN, bN)
{
var allElements = document.getElementsByTagName("div");
for(var i=0; i<allElements.length; i++)
{
if(allElements[i].className == "outer")
{
document.body.removeChild(allElements[i]);
}
}
var hN = parseInt(hN);
var vN = parseInt(vN);
new Bomb(hN,vN,bN);
}
function addEvent(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
function removeEvent(obj,evt,fn) {
if (obj.removeEventListener)
obj.removeEventListener(evt,fn,false);
else if (obj.detachEvent)
obj.detachEvent('on'+evt,fn);
}
var Class =
{
create:function()
{
return function(){this.initialize.apply(this,arguments)};
}
}
Bomb = Class.create();
Bomb.prototype =
{
blockArray : new Array(),
openArray: new Array(),
closeArray: new Array(),
initialize:function(hN, vN, bN)
{
this.outer = document.createElement('div');
this.outer.setAttribute("class" , 'outer');
this.outer.setAttribute("className" , 'outer');
this.vN = vN;
this.hN = hN;
this.outer.style.width = vN * 43;
this.outer.style.height = hN * 43;
var bombBlock;
for(var i=0; i<hN; i++)
{
this.blockArray[i] = new Array();
for(var j=0; j<vN; j++)
{
this.blockArray[i][j] = document.createElement('div');
this.blockArray[i][j].className = "bomb";
this.blockArray[i][j].x = i;
this.blockArray[i][j].y = j;
this.blockArray[i][j].isBomb = false;//是否是炸弹
this.blockArray[i][j].bombNum = 0; //炸弹数量
this.blockArray[i][j].opened = false;
this.outer.appendChild(this.blockArray[i][j]);
}
}
document.body.appendChild(this.outer);
this.bombArray = new Array();
for(var n=0; n<bN; n++)
{
this.createRandom(vN, hN);
}
for(var m=0; m<this.bombArray.length; m++)
{
var tempStr = this.bombArray[m].split("_");
this.blockArray[tempStr[0]][tempStr[1]].isBomb = true;
}
var _self = this;
this._oClick = function(e)
{
_self.oClick.call(_self, e || window.event);
}
addEvent(this.outer, "click" , this._oClick);
},
createRandom:function(limitX, limitY)
{
var randomNumX = parseInt(Math.random() * limitX);
var randomNumY = parseInt(Math.random() * limitY);
for(var i=0; i<this.bombArray.length; i++)
{
if(this.bombArray[i] == randomNumX+"_"+randomNumY)
{
return this.createRandom.call(this, limitX, limitY);
}
}
this.bombArray.push(randomNumX+"_"+randomNumY);
},
oClick:function(e)
{
var evt = e || window.event;
var evtTarget = evt.target || evt.srcElement;
for(var i=0; i<this.blockArray.length; i++)
{
for(var j=0; j<this.blockArray[i].length; j++)
{
if(evtTarget == this.blockArray[i][j])
{
//alert("当前是第" + (i+1) + "行，第" + (j+1) + "个");
if(this.blockArray[i][j].opened) return;
if(this.blockArray[i][j].isBomb)
{
this.blockArray[i][j].className += " over";
removeEvent(this.outer, "click" , this._oClick);
alert("游戏结束，请重新开始");
return;
}
else
{
this.blockArray[i][j].opened = true;
this.blockArray[i][j].className += " none";
this.findAround(this.blockArray[i][j]);
}
}
}
}
},
isInCloseArray:function(ele)
{
for(var i=0; i<this.closeArray; i++)
{
if(this.closeArray[i] == ele)
{
return true;
}
}
return false;
},
isInOpenArray:function(ele)
{
for(var i=0; i<this.openArray; i++)
{
if(this.openArray[i] == ele)
{
return true;
}
}
return false;
},
findAround:function(clickNode)
{
this.openArray.push(clickNode);
var currentNode;
while(this.openArray.length > 0 )
{
currentNode = this.openArray.shift();
currentNode.opened = true;
this.closeArray.push(currentNode);
if(currentNode.isBomb)
{
currentNode.className += " over";
//alert("gameover");
}
var aroundArray = this.getAroundNode(currentNode.x, currentNode.y);
var tempNum = 0;
var node;
for (var i=0; i<aroundArray.length; i++)
{
node = aroundArray[i];
if(node.isBomb)
{
tempNum ++;
}
}
if (tempNum > 0)
{
currentNode.innerHTML = tempNum;
}
for (var i=0; i<aroundArray.length; i++)
{
node = aroundArray[i];
if (tempNum > 0) break;
if(!this.isInOpenArray(node) && !node.opened )
{
this.openArray.push(node);
node.opened = true;
node.className += " none";
}
}
}
},
getAroundNode:function(x, y)
{
var aroundArray = new Array();
//坐上角
if(x-1 >= 0 && y-1 >= 0)
{
aroundArray.push(this.blockArray[x-1][y-1]);
}
//左侧
if(x-1 >=0 && y >=0)
{
aroundArray.push(this.blockArray[x-1][y]);
}
//坐下角
if(x-1 >=0 && y+1 <= this.hN-1)
{
aroundArray.push(this.blockArray[x-1][y+1]);
}
//上面
if(x>=0 && y-1 >= 0)
{
aroundArray.push(this.blockArray[x][y-1]);
}
//下面
if(x>=0 && y+1 <= this.hN-1)
{
aroundArray.push(this.blockArray[x][y+1]);
}
//右上角
if(x+1<=this.vN-1 && y-1 >= 0)
{
aroundArray.push(this.blockArray[x+1][y-1]);
}
//右侧
if(x+1<=this.vN-1 && y >= 0)
{
aroundArray.push(this.blockArray[x+1][y]);
}
//右下角
if(x+1<=this.vN-1 && y+1 <= this.hN-1)
{
aroundArray.push(this.blockArray[x+1][y+1]);
}
return aroundArray;
}
}
</script>
</body>
</html>
浙公网安备 33010602011771号