JAVASCRIPT 扫雷
这次不是用命名空间的方式。。。而且比较懒，js，css ，html写在一起了。。。
效果图
好吧。。。还是直接上代码
对了用到的图片
:flag.jpg 
:mine.jpg 
:red.jpg 
:xmine.jpg
<!DOCTYPE >
<HTML>
<HEAD>
<TITLE> 扫雷 </TITLE>
<style>
*{
margin:0px;
padding:0px;
}
.cell{
width:18px;
height:18px;
border:1px solid #fff;
border-right:1px solid #666;
border-bottom:1px solid #666;
float:left;
background:#ccc;
text-align:center;
color:green;
font-weight: bolder;
cursor: hand;
}
#content{
width:400px;
height:300px;
margin:20px auto;
border:1px solid #666;
}
#menu{
width:400px;
height:100px;
margin:20px auto;
background:#ccc;
position:relative;
}
</style>
<script>
/*-----------------------------------------------------------------------------
*作者:cici , email:105466706@qq.com
*version:1.0 , 时间：2013-05-22
-----------------------------------------------------------------------------*/
window.onload = function(){
var btn = document.getElementById("start");
var play = new PlayMine({'xCount':15,'yCount':20,'wCount':20});
play.init();
play.initEvent();
btn.onclick = function(){
var oSeconds = document.getElementById('seconds');
oSeconds.value='000';
if(play.timer){
clearInterval(play.timer);
}
play = new PlayMine({'xCount':15,'yCount':20,'wCount':20});
play.init();
play.initEvent();
}
}
function PlayMine(){
//行数
this.xCount =10;
//列数
this.yCount = 10;
//雷数
this.wCount = 20;
this.tempCount=0;
this.seconds=0;
this.leaveCount =20;
//布局数组
this.aMap = new Array(this.xCount);
//雷数组
this.aMine = new Array(this.wCount);
//div数组
this.aDivs = [];
this.timer = null;
//根据参数初始化属性，参数为json对象
if(arguments.length==1){
for(key in arguments[0]){
this[key] = arguments[0][key];
}
}
this.leaveCount = this.wCount;
//阻止左键弹窗
document.oncontextmenu=function(ev){
if (event){
event.returnValue = false;
}else{
ev.preventDefault();
}
};
}
//初始化雷的分布
PlayMine.prototype.init = function(){
var _this = this;
var i=0,j=0,z=0;
var iLength = this.xCount*this.yCount;
//获取父级对象
var oDiv = document.getElementById('content');
//临时数组，用来帮助生成随机数
var aTemp = new Array(this.xCount*this.yCount);
var oTxt = document.getElementById('mineCount');
oTxt.value=_this.leaveCount;
//初始化父级元素，根据雷的个数设置长宽
var oDiv = document.getElementById('content');
oDiv.style.width = this.yCount*20+'px';
oDiv.style.height = this.xCount*20+'px';
oDiv.innerHTML='';
//初始化临时数组，用来帮助生成随机数
for(i=0;i<iLength;i++){
aTemp[i]=i;
}
//进行雷的随机分布
for(i=0;i<this.wCount;i++){
var t = Math.floor(Math.random()*(iLength+1));
this.aMine[i] = aTemp[t];
aTemp[t] = aTemp[iLength-1];
iLength--;
}
//定义二维地图数组
for(i=0;i<this.xCount;i++){
this.aMap[i] = new Array(this.yCount);
}
for(i=0;i<this.xCount;i++){
for(j=0;j<this.yCount;j++){
var oData = new Mine();
var oTemp = document.createElement('div');
oTemp.className = 'cell';
oTemp.index= i*this.yCount+j;
oData.oDiv = oTemp;
oData.index = i*this.yCount+j;
oData.x=i;
oData.y=j;
oDiv.appendChild(oTemp);
this.aMap[i][j] = oData;
for(z=0;z<this.wCount;z++){
if((i*this.yCount+j)==this.aMine[z]){
this.aMap[i][j].isMine = true;
}
}
}
}
for(i=0;i<this.xCount;i++){
for(j=0;j<this.yCount;j++){
if(this.aMap[i][j].isMine==false){
var x1,x2,y1,y2;
x1=(i-1)>=0?i-1:i;
x2=(i+2)<=this.xCount?i+2:this.xCount;
y1=(j-1)>=0?j-1:j;
y2=(j+2)<=this.yCount?j+2:this.yCount;
for(var x=x1;x<x2;x++){
for(var y=y1;y<y2;y++){
if(this.aMap[x][y].isMine==true){
this.aMap[i][j].mineCount++;
}
}
}
}
}
}
}
//雷的触发事件
PlayMine.prototype.initEvent = function(){
var _this = this;
for(i=0;i<this.xCount;i++){
for(j=0;j<this.yCount;j++){
var obj = this.aMap[i][j];
// 闭包
(function (obj){
obj.oDiv.onmousedown=function(ev){
if(_this.timer){
}else{
_this.showTime();
}
var oEvent = event||ev;
if(oEvent.button==2){//右击
if(obj.isOpen){
return;
}
if(obj.isSafe){
_this.leaveCount++
changeCount(_this.leaveCount);
obj.isSafe = false;
this.style.background = '#ccc';
if(obj.isMine){
_this.tempCount--;
}
}else{
_this.leaveCount--;
changeCount(_this.leaveCount);
obj.isSafe = true;
this.style.background = 'url(img/flag.jpg)';
if(obj.isMine){
_this.tempCount++;
}
}
if((_this.tempCount==_this.wCount)&&(_this.leaveCount==0)){
clearInterval(_this.timer);
for(i=0;i<_this.xCount;i++){
for(j=0;j<_this.yCount;j++){
_this.aMap[i][j].oDiv.onmousedown = null;
}
}
alert('赢了');
}
}else if(oEvent.button==3){
alert('sss');
}else if(oEvent.button==0||oEvent.button==1){
if(obj.isSafe){
return;
}else{
if(obj.isMine){
_this.show();
this.style.background='url(img/red.jpg)';
}else if(obj.mineCount!=0){
this.style.background = '#fff';
this.innerHTML=obj.mineCount;
obj.isOpen=true;
}else{
check(obj,_this.aMap);
}
}
}
};
})(obj);
}
}
}
PlayMine.prototype.show=function (){
var i=0,j=0,z=0;
clearInterval(this.timer);
for(i=0;i<this.xCount;i++){
for(j=0;j<this.yCount;j++){
this.aMap[i][j].oDiv.onmousedown = null;
if(this.aMap[i][j].isSafe){
if(this.aMap[i][j].isMine){
continue;
}else{
this.aMap[i][j].oDiv.style.background = 'url(img/xmine.jpg)';
}
}else{
if(this.aMap[i][j].isMine){
this.aMap[i][j].oDiv.style.background = 'url(img/mine.jpg)';
}
}
}
}
}
PlayMine.prototype.showTime=function(){
var _this = this;
_this.seconds=0;
//document.title = this.seconds;
var oSeconds = document.getElementById('seconds');
clearInterval(_this.timer);
_this.timer = setInterval(function(){
_this.seconds++;
oSeconds.value = toThree(_this.seconds+'');
},1000);
}
function toThree(val){
if(val.length==3){
return val+'';
}else if(val.length==2){
return '0'+val;
}else{
return '00'+val;
}
}
function changeCount(val){
var obj = document.getElementById('mineCount');
obj.value = val;
}
function check(obj,aMap){
var x1,x2,y1,y2,xCount,yCount;
xCount = aMap.length;
yCount = aMap[0].length;
x1=(obj.x-1)>=0?obj.x-1:obj.x;
x2=(obj.x+2)<=xCount?obj.x+2:xCount;
y1=(obj.y-1)>=0?obj.y-1:obj.y;
y2=(obj.y+2)<=yCount?obj.y+2:yCount;
if(obj.mineCount==0){
obj.oDiv.style.background='#fff';
obj.oDiv.innerHTML='';
obj.isOpen = true;
for(var x=x1;x<x2;x++){
for(var y=y1;y<y2;y++){
if(aMap[x][y].isSafe==false&&aMap[x][y].isMine==false&&aMap[x][y].isOpen==false){
aMap[x][y].oDiv.style.background='#fff';
aMap[x][y].isOpen=true;
if(aMap[x][y].mineCount==0){
aMap[x][y].oDiv.innerHTML='';
}else{
aMap[x][y].oDiv.innerHTML=aMap[x][y].mineCount;
}
check(aMap[x][y],aMap);
}
}
}
}
}
/*
雷
*/
function Mine(){
this.isMine =false;
this.oDiv = null;
this.index = 0;
this.mineCount = 0;
this.isSafe = false;
this.isOpen=false;
this.x;
this.y;
}
/*
根据class 获取对象
oParent:父对象
sClassName:class名
*/
function getByClass(oParent,sClassName){
var aEles = oParent.getElementsByTagName('*');
var aResults = [];
for(var i=0;i<aEles.length;i++){
aResults.push(aEles[i]);
}
return aResults;
}
/*
绑定事件
oObj:被绑定对象
sEvent:要绑定的事件
fn:绑定的函数
本来想使用该方法进行mousedown事件绑定，但是无法删除，因此暂时没用
*/
function addEvent(oObj,sEvent,fn){
//因为IE在绑定后，this指向window对象，因此，使用call让this指向当前被绑定对象；火狐不会出现这种问题
if(oObj.attachEvent){
//IE
oObj.attachEvent('on'+sEvent,function(){
fn.call(oObj);
});
}else{
oObj.addEventListener(sEvent,fn,false);
}
}
</script>
</HEAD>
<BODY>
<div id="menu">
<input type="text" id="mineCount" style="width:70px;height:50px;line-height:50px;position:absolute;top:25px;left:10px;font-size:40px;text-align:right" value="0"/>
<input type="text" id="seconds" style="width:70px;height:50px;line-height:50px;position:absolute;top:25px;right:10px;font-size:40px;" value="000"/>
<input type="button" value="开始" id="start" style="position:absolute;left:170px;top:50px;width:50px"/>
</div>
<div id="content">
</div>
</BODY>
</HTML>
