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版1024游戏源码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
- C++复现经典游戏——扫雷
国庆小长假,当大家都去看人山人海的时候,我独自一人狂码代码.这两天想要实现的内容是Windows上的一个经典游戏——扫雷.相信90后和一些上班族对此并不陌生.然而,从win8开始,扫雷就不再是Wind ...
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
- 前端优秀作品展示，JavaScript 版水果忍者
<水果忍者>是一款非常受喜欢的手机游戏,刚看到新闻说<水果忍者>四周年新版要上线了.网页版的切水果游戏由百度 JS 小组开发,采用 vml + svg 绘图,使用了 Rapha ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10（排行榜界面&界面管理）
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- 相当牛X的java版星际游戏
分享一款牛人用java写的经典游戏,目录结构如下: 虽然只能算一个Demo,但是用到了很多Java基础技术和算法: Java2D,双缓冲,A星寻路,粒子系统,动画效果,处理图片,Swing ui ,U ...
- Beat 'Em Up Game Starter Kit (横版格斗游戏) cocos2d-x游戏源代码
浓缩精华.专注战斗! 游戏的本质是什么?界面?养成?NoNo! 游戏来源于对实战和比赛的模拟,所以它的本源就是对抗.就是战斗! 是挥洒热血的一种方式! 一个游戏最复杂最难做的是什么?UI?商城? ...
- 【数据结构的JavaScript版实现】data-struct-js的npm包初版作成
[数据结构的JavaScript版实现]data-struct-js的npm包初版作成 码路工人 CoderMonkey [数据结构的JavaScript版实现] 拖了这么久,终于趁着春节假期把初版( ...
随机推荐
- 【洛谷P1101】单词方阵
题目大意:给一 \(n \times n\) 的字母方阵,内可能蕴含多个 \("yizhong"\) 单词.单词在方阵中是沿着同一方向连续摆放的.摆放可沿着 8 个方向的任一方向, ...
- Python里面这些点，据说80%的新手都会一脸懵逼
Python里面这些点,据说80%的新手都会一脸懵逼 菜鸟Python 关注 2018.10.10 12:51 字数 1833 阅读 123评论 0喜欢 10 Python虽然语法简单,通俗易懂,但是 ...
- 模拟生成环境的MySQL安装方法-通用二进制方式安装
模拟生成环境的MySQL安装方法-通用二进制方式安装 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.并发响应用户请求的网络IO模型 1>.单进程 特点:一个进程响应一个请 ...
- Windows环境下Qwt安装和使用
之前安装过,现在记录下关键步骤,方便后面使用和复习吧. 环境:win10 Qt5.9 Qt Creator 4.3 参考:https://blog.csdn.net/linuxarmsummar ...
- python---补充django中文报错（1），Django2.7使用sys.setdefaultencoding('utf-8')，以及使用reload(sys)原因
SyntaxError at /blog/ news/story Non-ASCII character , but no encoding declared; see http://python.o ...
- python---django使用数据库（orm）
官方教程点击此处 项目默认使用sqlite DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os. ...
- js基础回顾
值类型:值的拷贝. 引用类型:一般指对象,地址的指针引用 typeof有几种类型:6种 变量和布尔值之间的转换 js中内置的函数
- html5 canvas高级贝塞尔曲线运动动画(好吧这一篇被批的体无完肤！都说看不懂了！没办法加注释了！当然数学不好的我也没办法了，当然这还涉及到一门叫做计算机图形学的学科)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CF11D A Simple Task（状压DP）
\(solution:\) 思路大家应该都懂: 状压DP:\(f[i][j]\),其中 \(i\) 这一维是需要状压的,用来记录19个节点每一个是否已经走过(走过为 \(1\) ,没走为 \(0\) ...
- 克隆虚拟机重启之后eth0不见的解决方案
今天用虚拟机克隆多一个虚拟机的时候,发现克隆之后的新虚拟机的网卡eth0在配置之后完全是用不了的,下面说一下我的解决办法,亲测可用. 1.用ipconfig命令查看ip信息的时候会发现虚拟机没有找到e ...