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=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>
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>
js版扫雷（可直接运行试玩）的更多相关文章
- WinUI 3试玩报告
1. 什么是 WinUI 3 在微软 Build 2020 开发者大会上,WinUI 团队宣布可公开预览的 WinUI 3 Preview 1,它让开发人员可以在 Win32 中使用 WinUI.Wi ...
- 8个经典的HTML5游戏在线试玩及源码学习
原文地址:http://www.oschina.net/news/32364/html5-games 游戏,毫无疑问是拿来供大家娱乐玩耍的,这也无可厚非,但是,今天给大家分享的8个HTML5游戏,在好 ...
- HTML5+JS 《五子飞》游戏实现（七）游戏试玩
前面第一至第六章我们已经把<五子飞>游戏的基本工作都已经讲得差不多了,这一章主要是把所有的代码分享给大家,然后小伙伴们也可以玩一玩. 至于人机对战的我们放到后面讲进行分析. 试玩地址:ht ...
- 花一天时间试玩vsphere6.7（EXSI）服务器版的vmware
花一天时间试玩vsphere6.7(EXSI)服务器版的vmware 要注册账号(2019年11月14注册): 登陆网址:https://my.vmware.com/cn/group/vmware/h ...
- C+命令行+方向键=简易版扫雷
前言: 想起来做这个是因为那时候某天知道了原来黑框框里面的光标是可以控制的,而且又经常听人说起这个,就锻炼一下好了. 之前就完成了那1.0的版本,现在想放上来分享却发现有蛮多问题的,而且最重要的是没什 ...
- 1.2G内存试玩RAMOS_XP
1.2G内存试玩RAMOS_XP1.为了防止做系统时出现意外,用Bootice把C盘MBR修改为Grub4dos,这样子系统如果失败,可以进入PE重做. 2.进入PE格式化C盘,格式化的时候勾选启用N ...
- [试玩] FMXLinux (Firemonkey for Linux) Linux 桌面开发（第三方插件）
FMXLinux 是一个可以用来开发 Linux 桌面软件的第三方插件,它需要配合 Delphi 10.2 Toyko 官网:http://www.fmxlinux.com/ 使用方法:开启 FMX ...
- 试玩 GOWOG ，初探 OpenAI（使用 NeuroEvolution 神经进化）与 Golang 多人在线游戏开发
GOWOG: 原项目:https://github.com/giongto35/gowog 我调整过的:https://github.com/Kirk-Wang/gowog GOWOG 是一款迷你的, ...
- Apollo框架试玩
2017年7月5日,百度举行了AI开发者大会,在会上发布了Apollo项目,并进行了演示,该项目在Github上已经能够被访问.出于一个程序员的好奇,昨天试玩了一把,确实不错. http://apol ...
随机推荐
- 如何实现自定义的android WebView错误页
一般来说,可能第一时间想到的是自定义一个html来替代webview内置的异常页面. 但是实际操作时,这种方法比较困难. 这里介绍一个简单的替代方案,希望能有所帮助. 可以采用嵌套layout的方式 ...
- js中getBoundingClientRect的作用及兼容方案
js中getBoundingClientRect的作用及兼容方案 1.getBoundingClientRect的作用 getBoundingClientRect用于获取某个html元素相对于视窗的位 ...
- Dynamo分布式系统——「RWN」协议解决多备份数据如何读写来保证数据一致性，而「向量时钟」来保证当读取到多个备份数据的时候，如何判断哪些数据是最新的这种情况
转自:http://blog.jqian.net/post/dynamo.html Dynamo是Amazon开发的一款高可用的分布式KV系统,已经在Amazon商店的后端存储有很成熟的应用.它的特点 ...
- Android Monkey 压力测试 介绍
Monkey 是Android SDK提供的一个命令行工具, 可以简单,方便地运行在任何版本的Android模拟器和实体设备上. Monkey会发送伪随机的用户事件流,适合对app做压力测试 阅读目录 ...
- CodeForces #362 div2 B. Barnicle
题目链接: B. Barnicle 题意:给出科学计数法 转化成十进制的整数或小数 并输出. 思路:暑假训练赛见过了,当时大腿A掉了,并表示是道水题. 刷CF再次遇见,毫不留情WA了几次.比如: 0. ...
- oracle date change
select to_char(sysdate,'yyyy') from dual;-----2016select to_number(to_char(sysdate,'MM'))||'月' from ...
- 安装Linux Mint
1.尽量选择trusty的安装版本,kde和xfce不支持Win+..快捷键,推荐cinnamon:制作安装U盘后,选择非EFI模式启动:选择start Linux Mint(就是第一项): 2.In ...
- html 中自动换行的实现方式
1,<div type="word-wrap: break-word;word-break:break-all;"> </div> 2, <div t ...
- [css3]叉叉旋转效果
.close_frame{display:inline-block;height:14px;width:14px;background:url("../images/closeiframe. ...
- WebView 的使用----android 网络连接处理分析
在Android中,可以有多种方式来实现网络编程: 创建URL,并使用URLConnection/HttpURLConnection 使用HttpClient 使用WebView 创建URL,并使用U ...