JavaScript版经典游戏之扫雷游戏完整示例【附demo源码下载】
本文实例讲述了JavaScript扫雷游戏。分享给大家供大家参考，具体如下：
翻出年初写的游戏贴上来，扫雷相信大家都玩过，先上图：
源码：
<!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>Javascript版扫雷</title>
<style>
input{ margin:0; padding:0;}
input{ outline:none;}
#game_box{ width:400px; height:430px; margin:100px auto; border:#333 1px solid; background:#ccc -webkit-repeating-linear-gradient(top,#ccc,#000);background:#ccc -moz-repeating-linear-gradient(top,#ccc,#000);background:#ccc -o-repeating-linear-gradient(top,#ccc,#000);background:#ccc -ms-repeating-linear-gradient(top,#ccc,#000); box-shadow:0 0 50px 10px #333; box-shadow:0 0 50px 10px #333;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CBCBCB', endColorstr='#000000');
}
#map{width:400px; height:348px;*height:380px;}
#time{ height:18px; line-height:22px; text-align:center;margin:6px 0; margin-top:10px; _margin-top:40px; color:#fff; position:relative;}
#time input{ width:40px; height:18px; line-height:18px; text-align:center;}
#table_map{ width:336px; height:336px; border:none; border-left:#000 1px solid;border-top:#000 1px solid; margin:32px 32px 0px 32px; background:#D8ECF6; text-align:center; border-collapse: collapse}
#table_map td{ width:20px; height:20px; border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; color:#333333; transition:all 0.7s; cursor:pointer;}
#table_map td.mask{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; background:#333; }
#table_map td.over{ border:none;border-right:#000 1px solid;border-bottom:#000 1px solid; }
.over_bg{ background:#E1E1E1;}
@-webkit-keyframes round{
from{ -webkit-transform:rotateX(0);}
to{ -webkit-transform:rotateX(360deg);}
}
@-webkit-keyframes show{
from{ -webkit-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -webkit-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
@-moz-keyframes round{
from{ -moz-transform:rotateX(0);}
to{ -moz-transform:rotateX(360deg);}
}
@-moz-keyframes show{
from{ -moz-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -moz-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
@-ms-keyframes round{
from{ -ms-transform:rotateX(0);}
to{ -ms-transform:rotateX(360deg);}
}
@-ms-keyframes show{
from{ -ms-transform:rotateX(180deg) rotateY(0) scale(0);}
to{ -ms-transform:rotateX(360deg) rotateY(360deg) scale(1);}
}
#game_box{-webkit-animation:show 3s;-moz-animation:show 3s;-ms-animation:show 3s;}
</style>
</head>
<body>
<div id="game_box">
<div id="map"></div>
<div id="time">时间：<input type="text" value="0" disabled="disabled" /> 炸弹：<input type="text" value="50" disabled="disabled" /></div>
</div>
<script>
// 2014年3月 by 王美建 QQ1207526854
window.onload=function()
{
Game.init('game_box','map');
};
var Game={
data : { //关卡数据
mine : 40, col : 16, row : 16
},
init : function(box_id,mapbox_id){ //初始化
this.oBox = document.getElementById(box_id);
this.mapBox = document.getElementById(mapbox_id)
this.mapBox.innerHTML = this.createMap();
this.oMap = this.mapBox.getElementsByTagName('table')[0];
this.aTd = this.oMap.getElementsByTagName('td');
this.time = document.getElementById('time').getElementsByTagName('input')[0];
this.mineNum = document.getElementById('time').getElementsByTagName('input')[1];
this.mineNum.value = this.data.mine;
this.surplus = [];
this.iCount = this.data.col*this.data.row-this.data.mine;
this.createMine();
this.addVal();
this.play();
},
createMap : function() //生成画布
{
var html = '';
var This = this.data;
var i=0,j=0;
function createTd()
{
var tds = '';
for(j = 0; j < This.row; j++)
{
tds += '<td class = "mask" index='+ (This.col*i+j) +'></td>';
};
return tds;
}
for(i = 0; i < This.col; i++)
{
html += '<tr>' + createTd() + '</tr>';
};
return ('<table id="table_map" cellpadding="0" cellspacing="0" ><tbody>'+html+'</table></tbody>');
},
createMine : function(){ //生成炸弹
var This = this.data;
this.indexArr = [];
this.mineArr = [];
for(var i = 0,j = This.col*This.row; i < j; i++ )
{
this.indexArr.push(i) ; //所有单元格的索引
};
for( var i = 0; i < This.mine; i++ ) //随机取出This.mine个做为炸弹的索引，不重复
{
var index = Math.round(Math.random()*(this.indexArr.length-1)); //索引
this.mineArr.push(this.indexArr.splice(index,1)[0]);
};
this.mineArr.sort( function(a,b){return a-b;} );
},
addVal : function() //给有炸弹的td添加自定义属性hasMine值为true
{
for(var i = 0, j = this.mineArr.length; i < j; i++)
{
this.aTd[ this.mineArr[i] ].hasMine = true;
};
},
play : function()
{//鼠标左右键同时按下 ev.button=3
this.timeOnoff = false;
var This = this;
this.markNum = [];
this.oMap.oncontextmenu=function(ev) //插旗标记
{
var ev = ev || window.event;
var target = ev.srcElement || ev.target;
if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' )
{
!target.mark ? (target.innerHTML = '▲',target.style.color = '#FFEFAD',target.mark = true,This.mineNum.value--,This.markNum.push( target.getAttribute( 'index' ) )) : (target.innerHTML = '',target.style.color = '#333333',target.mark = false,This.mineNum.value++,This.markNum.splice( This.findIndex( This.markNum,target.getAttribute( 'index' ) ),1 ));
};
return false;
};
this.oMap.onclick = function(ev)
{
var ev = ev || window.event;
var target = ev.srcElement || ev.target;
if(!This.timeOnoff) //开始计时
{
This.timeOnoff = true;
This.timer=setInterval(function(){
This.time.style.webkitAnimation = 'round 1s infinite'; //计时器翻转
This.time.value++;
},1000)
};
function openTd(aTd,meg,len)
{
var num = 0;
var show = null;
var t = Math.ceil( 15*This.data.col*This.data.row/len ); //未打开格子越多，翻开时间间隔越短
show = setInterval(function(){
aTd[ This.surplus[num] ].className = 'over';
aTd[ This.surplus[num] ].style.webkitAnimation = 'round 1s 1';
if( aTd[ This.surplus[num] ].hasMine && aTd[ This.surplus[num] ].className == 'over' )
{
aTd[ This.surplus[num] ].style.color = '#333333';
aTd[ This.surplus[num] ].innerHTML = '★';
}else{
aTd[ This.surplus[num] ].innerHTML = '';
};
num++;
if(num == len)
{
clearInterval(show);
alert(meg);
}
},t)
};
function countSur() //统计没打开的格子的索引
{
var iCheck = 0;
This.surplus = [];
for( var i = 0,j = This.data.col*This.data.row; i < j; i++ )
{
if( This.aTd[i].className == 'mask' )
{
iCheck++;
This.surplus.push( i );
};
};
return iCheck;
};
if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && !target.hasMine )//没踩到雷
{
This.count( parseInt(target.getAttribute('index')) ); //递归
target.style.webkitAnimation = 'round 1s 1';
if( This.iCount <= 10 ) //通关检测
{
//console.log( 'iCheck='+iCheck+'iCount='+This.iCount )
if( countSur() == This.data.mine ) //剩下格子数等于炸弹数而又没踩到炸弹，可不就是过关了
{
clearInterval( This.timer );
This.time.style.webkitAnimation = ''; //停止计时器翻转
openTd( This.aTd,'不错小伙子，过关了！用时：'+This.time.value+'s',This.surplus.length );
};
};
}else if( target.tagName.toLowerCase() == 'td' && target.className == 'mask' && target.hasMine ){ //踩到雷
clearInterval(This.timer); //停止计时器
This.time.style.webkitAnimation = ''; //停止计时器翻转
var mineArr = This.mineArr; //优化：全局变局部
var aTd = This.aTd;
for( var i = 0,j = mineArr.length; i < j; i++ )
{
aTd[ mineArr[i] ].style.color = '#333333';
aTd[ mineArr[i] ].className = 'over';
aTd[ mineArr[i] ].innerHTML = '★'; //显示炸弹标志
};
target.style.color = 'red';
countSur();
openTd( aTd,'小朋友，你输了~',This.surplus.length );
};
};
},
findIndex : function(arr,ele) //找到数组某个元素在数组中的位置
{
for(var i=0,j=arr.length;i<j;i++)
{
if(ele === arr[i])
{
return i;
};
};
return -1;
},
count : function(iNow) //统计事件源周围炸弹
{
var arr = []; //事件源周围的格子索引
var iNum = 0; //事件源周围炸弹个数
var len = this.data.col;
if( iNow % len == 0 ) //点击最左边的格子时
{
arr = [iNow+1,iNow-len,iNow-len+1,iNow+len,iNow+len+1];
}else if( iNow == ( Math.floor( iNow/len ) + 1 ) *len -1 ){ //点击靠右边的格子时
arr = [iNow-1,iNow-len,iNow-len-1,iNow+len,iNow+len-1];
}else{ //点击不靠边的格子时
arr = [iNow-1,iNow+1,iNow-len,iNow-len+1,iNow-len-1,iNow+len,iNow+len-1,iNow+len+1];
};
for( var i = 0; i < arr.length; i++ ) //统计周围炸弹
{
if( this.aTd[ arr[ i ] ] && this.aTd[ arr[ i ] ].hasMine )
{
iNum++;
}
};
if( iNum == 0 ) //当前点击格子周围没有炸弹则递归
{
this.aTd[iNow].className = '';
this.aTd[ iNow ].innerHTML == '▲' ? this.aTd[ iNow ].innerHTML = '' : '';
for( var i = 0,j = arr.length; i < j; i++ )
{
if( this.aTd[ arr[ i ] ] && this.aTd[ arr[i] ].className == 'mask')
{
this.aTd[ arr[i] ].className = '';
this.aTd[ arr[i] ].innerHTML == '▲' ? this.aTd[ arr[i] ].innerHTML = '' : '';
this.iCount--;
this.count( arr[i] );
};
};
}else{ //当前点击格子周围有炸弹则显示炸弹个数
this.aTd[iNow].innerHTML = iNum;
this.aTd[iNow].style.color = '#333333';
this.aTd[iNow].style.webkitAnimation = 'round 1s 1';
this.aTd[iNow].className == 'mask' ? (this.aTd[iNow].className = '',this.iCount--) : '';
};
}
};
</script>
</body>
</html>
完整实例代码点击此处本站下载。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数据结构与算法技巧总结》、《JavaScript数学运算用法总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》及《JavaScript遍历算法与技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
这只是一个简单的JAVAscript和HTML5小程序,没有实现人机对战. 五子棋棋盘落子点对应的二维数组.数组的元素对应落子点.比如数组元素值为0表示该元素对应的落子点没有棋子,数组元素值为1表示该元素对应的落子点有白棋子,数组元素值为2表示该元素对应的落子点有黑棋子: 判断五子棋赢棋的算法是通过对五子棋棋盘落子点对应的二维数组的操作来实现的. 判断五子棋赢棋算法 下边的函数可以实现判断五子棋赢棋的算法,也可以按照教材中相应的算法实现. 其中函数的参数xx.yy为数组下标,chess数组实现五
-
JS+Canvas实现的俄罗斯方块游戏完整实例
本文实例讲述了JS+Canvas实现的俄罗斯方块游戏.分享给大家供大家参考,具体如下: 试玩(没有考虑兼容低版本浏览器): ********************************************************************** 9月3日更新: 修复了隐藏的比较深的BUG 加上暂停.再来一次功能 速度随分数增高而递减 添加log日志 ****************************************************************
-
js实现大转盘抽奖游戏实例
本文实例讲述了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"> <hea
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
javascript 制作坦克大战游戏初步 图片与代码
学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n
-
javascript HTML5 canvas实现打砖块游戏
本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库 游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
-
JavaScript 打地鼠游戏代码说明
演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc
-
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="
-
原生JavaScript编写canvas版的连连看游戏
本文实例为大家分享了JavaScript编写canvas版的连连看游戏的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ /*border: 1px solid #D1D1D1; */ overflow: hidden; pos
-
js H5 canvas投篮小游戏
本文实例为大家分享了H5 canvas投篮小游戏实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body onload="init(19,'mylegend',820,500,main,LEvent.INIT)"> <div
-
javascript和HTML5利用canvas构建猜牌游戏实现算法
让我猜猜你心中的牌,先随机生成27张牌,不能重复列出三列牌,然后记住其中一张,然后点击牌所在的列,多次就可以猜出你想的牌. 如果是9张只要猜2次,如果是27张就是猜3次. 实现方法(27张): 如果点击了第三列,那就是说牌一定在这9张里面,就把第三列的9张牌平均给每列分3张,假设编号为123,456,789 再点击一次,如果点击第二列,那么猜的牌就在456里面,再分到三列,4,5,6 再点击一次,就可以知道牌是哪个了. 实现算法: 我是使用一维数组实现,第一次猜第三列就把第三列的数据和0,1,2