用javascript实现win7系统扫雷游戏

闲来无事，想用javascrpt做些小游戏，感觉Win7系统中的扫雷游戏比较有意思，故花了一些时间通过b编写原生的javascript代码来实现网页版扫雷游戏。

首先，应该通过HTML+CSS写好网页的静态布局，如下所示：

<div class="wrap">
    <div class="head"> <div class="hleft"><em></em><span>扫雷</span></div><div class="hright"><span></span><span></span><span id="close"></span></div></div><div class="main"><!--游戏主体部分--><p><span>游戏(G)</span><span>帮助(H)</span></p><div class="box">   <div id="con"></div><div id="maskBox"></div><!--表面的遮罩层--><div id="failBox"><!--游戏结束后的弹出框--><div class="fhead"><span>游戏失败</span><span id="fbClose"></span></div><div class="fbCon">    <h3 id="fbTitle"></h3><p id="gtime"></p><p><span id="bestTime"></span><span id="gDate"></span></p><p><span id="total"></span><span id="winSum"></span></p><input type="button" id="playAgain" value="再玩一局" /></div></div><div class="foot"><div class="fleft"><span class="ficon"></span><span class="fNum" id="ftime">0</span></div><div class="fright"><span class="fNum">10</span><span  class="ficon"></span></div></div></div></div></div>

扫雷游戏重点在于javascript部分，故HTML+CSS布局部分就不详细介绍了。

接下来，开始写javascript代码：

（1）先要完成页面初始化，生成页面主体部分的方格及表面遮罩层方格，如下图所示：

（2）然后再方格中，随机选择10个位置买下10个雷；

（3）埋完雷后，需要计算每个方格的周围8个方格内的雷数并写入方格中，如下图所示：

相关的详细代码如下：

function init(){var lei=0;//生成游戏界面的9*9方格及遮罩层var con=document.getElementById("con");var maskBox=document.getElementById("maskBox");var conih="";var mbih="";for(var i=0;i<9;i++){for(var j=0;j<9;j++){conih+="<span></span>";mbih+="<em></em>";}}con.innerHTML=conih;maskBox.innerHTML=mbih;//埋雷var csps=con.getElementsByTagName("span");for(var i=0;i<10;i++){lei=Math.floor(Math.random()*csps.length);if(csps[lei].className==""){csps[lei].className="cLei";}else{i--;}  }//计算每个方格周围存在的雷数for(var i=0;i<csps.length;i++){csps[i].onOff=true;if(csps[i].className=="cLei"){continue;}num=0; if(i%9!=8){if(i+10<csps.length && csps[i+10].className == "cLei"){num+=1;}if(i+1<csps.length && csps[i+1].className=="cLei"){num+=1;}if(i-8>=0 && csps[i-8].className=="cLei"){num+=1;}}if(i%9!=0){if(i-1>=0 && csps[i-1].className=="cLei"){num+=1;}if(i-10>=0 && csps[i-10].className=="cLei"){num+=1;}if(i+8<csps.length && csps[i+8].className=="cLei"){num+=1;}}if(i-9>=0 && csps[i-9].className=="cLei"){num+=1;} if(i+9<csps.length && csps[i+9].className=="cLei"){num+=1;}  if(num!=0){csps[i].innerHTML=num;}}
}

（4）为每个方格绑定点击事件处理函数，该函数要实现的功能是：点击的这个方格下面是否是雷及各自情况下如何处理：

a.如果点击的方格下面不是雷，而是数字。则只需此方格表面遮罩层，露出底下的数字即可；

b.如果点击的方格下面不是雷，并且没有数字，而是空白。则需要以此方格为中心，找出周围内容是空白的方格并去除这些方格的表面遮罩层。这一步算是整个游戏的难点了，本人是利用递归来一层一层找出所有内容为空白的方格的；实现效果如下图所示：

当点击上图中的红色圈出来的那块方格时，出现的效果是：以这个方格为中心，向四处发散，露出空白方格。

详细代码如下：

function fn(n){var csps=con.getElementsByTagName("span");if(csps[n].className=="cLei"){return;}mbems[n].style.opacity=0;if(csps[n].innerHTML=="" && csps[n].onOff){csps[n].onOff=false;if(n+9<csps.length && csps[n+9].className=="" &&csps[n+9].onOff){mbems[n+9].style.opacity=0;     if(csps[n+9].innerHTML==""){fn(n+9);}     }if(n%9!=0){if(n-1>=0 && csps[n-1].className=="" && csps[n-1].onOff){mbems[n-1].style.opacity=0;if(csps[n-1].innerHTML==""){fn(n-1);}}if(n-10>=0 && csps[n-10].className=="" && csps[n-10].onOff){mbems[n-10].style.opacity=0;if(csps[n-10].innerHTML==""){fn(n-10);}}if(n+8<csps.length && csps[n+8].className=="" && csps[n+8].onOff){mbems[n+8].style.opacity=0;if(csps[n+8].innerHTML==""){fn(n+8);}}}if(n%9!=8){if(n+10<csps.length && csps[n+10].className=="" && csps[n+10].onOff){mbems[n+10].style.opacity=0;if(csps[n+10].innerHTML==""){fn(n+10);}}if(n+1<csps.length && csps[n+1].className=="" && csps[n+1].onOff){mbems[n+1].style.opacity=0;if(csps[n+1].innerHTML==""){fn(n+1);}}if(n-8>=0 && csps[n-8].className=="" && csps[n-8].onOff){mbems[n-8].style.opacity=0;if(csps[n-8].innerHTML==""){fn(n-8);}}          }   if(n-9>=0 && csps[n-9].className=="" && csps[n-9].onOff){mbems[n-9].style.opacity=0;if(csps[n-9].innerHTML==""){fn(n-9);}}}
}

c. 如果点击的方格是雷，则这个游戏就结束了，如下图所示：

总结:

总体来说，扫雷游戏实现难度不大。本人在做的时候，基本只在用递归实现时遇到困难，浏览器报了堆栈溢出的错误。然后经过调试查找错误，发现是因为函数在递归时，有的空白方格在找出后，又会重复被找到，这样就会一直递归下去，程序跳不出来，然后就会报错。找到报错的原因就好办了，稍加修改代码，为每个方格加一个是否被点开的开关，那么空白方格一旦被找出，就立刻修改这个开关的状态，并且查找空白方格的判断条件再补充判断方格的开关状态就行了。再进行测试，发现bug得以解决。

另外，在这里只贴出一些关键代码，如果需要详细源码可以留邮箱。

用javascript实现win7系统扫雷游戏相关推荐

VC系统扫雷游戏外挂源代码程序下载（转帖
VC系统扫雷游戏外挂源代码程序下载(转帖) 2008-03-04 10:25 经过了多次测试写出了历史上第一个有点意义的MFC程序.效果差强人意.^_^ CODE: // CrackWinmineDl ...
lol提示游戏环境异常重启计算机,教你win7系统lol游戏环境异常请重启机器后再试的解决教程...
最近有用户反馈,打开LOL游戏发现登陆不上,游戏弹出窗口提示游戏环境异常请重启机器,照着重启了一遍依然没办法打开,其实还是可尝试修复以下的,接下来小编带来win7系统lol游戏环境异常请重启机器后再试 ...
win7运行java配色方案_技术编辑帮您win7系统运行游戏时提示配色方案已更改为Windows 7 Basic的恢复教程...
win7系统有很多人都喜欢使用,我们操作的过程中常常会碰到win7系统运行游戏时提示配色方案已更改为Windows 7 Basic的问题.如果遇到win7系统运行游戏时提示配色方案已更改为Window ...
解决笔记本win7系统玩游戏不能全屏办法
我们在使用笔记本win7系统玩游戏时,经常会发现屏幕居中两边有黑条,而有一些台式机的宽屏显示器也经常出现下玩游戏不能全屏的问题,下面系统之家给大家介绍游戏不能全屏问题通用解决方法. 1.修改注册表中的 ...
鬼泣4计算机丢失xinput,Win7系统运行游戏报错“计算机丢失XINPUT1-3.dll”
如今,很多用户都是骨灰级的游戏玩家,因此对电脑的要求配置都比较高.特别是电脑故障时游戏玩家最不能忍受的,游戏正到高潮,电脑出现故障,想想是多么令人难受的.今天U大侠小编就带大家一起来看看win7系统下 ...
win7系统玩游戏提示缺少D3DCompiler_47.dll文件怎么办
很多小伙伴在下载游戏了之后,win7电脑提示缺少D3DCompiler_47.dll文件,这是什么原因呢,是因为电脑没有及时下载更新的文件,也是这个原因导致无法加载游戏,只要我们重新下载一个就可以了, ...
WIN7系统下游戏不能全屏问题解决
Win键+R键,打开运行窗口,输入regedit 回车,这样就打开了注册表编辑器,然后,定位到以下位置: HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Contro ...
JavaScript扫雷游戏，仿Windows扫雷
javascript版仿windows扫雷游戏,单个HTML文件. CSDN下载(v2.2):http://download.csdn.net/user/cuixiping CSDN下载(v2.1): ...
360游戏大厅打不开HTML游戏,win7系统无法打开360游戏大厅玩游戏的解决方法
很多小伙伴都遇到过win7系统无法打开360游戏大厅玩游戏的困惑吧,一些朋友看过网上零散的win7系统无法打开360游戏大厅玩游戏的处理方法,并没有完完全全明白win7系统无法打开360游戏大厅玩游戏 ...
win7怎么降低游戏的延迟？
Windows7是微软公司开发的操作系统,也是Windows所有操作系统中最稳定的操作系统.有朋友觉得用Win7系统玩游戏会有一些游戏延迟.下面和大家分享一下win7怎么降低游戏的延迟. 有什么办法降 ...

用javascript实现win7系统扫雷游戏

用javascript实现win7系统扫雷游戏相关推荐

最新文章

热门文章