5 扫雷

5.1 扫雷规则

展示信息：总雷数 剩余雷数(总雷数-插旗数) 用时
规格：难度增加=雷数增加+类概率增加： 10%  15% 20%
状态：被点击(触雷+周围0雷+周围n雷+插旗)+未点击
规则：点击到雷 结束点击到周围n雷的 显示n即可点击到周围0雷的 周围的全展示----

5.2 扫雷代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery练习03扫雷</title>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<style type="text/css">#div_0{border:1px solid blue;margin:10px auto;padding:10px;width:520px;height:560px;text-align: center;}table{width:500px;margin:10px auto;border:1px solid blue;border-collapse: collapse;}#tab_lei{height:500px;}td{width:45px;height:45px;background-color: #aaaaaa;background-repeat: none;background-position: center;}td,th{border:3px double #cccccc;text-align: center;}span{font-weight: bold;color:red;}.cla{background-color: #ffffff;}</style>
</head>
<body><div id="div_0"><table id="tab_num"><tr><th>总数：<span id="span_total"></span></th><th>剩余：<span id="span_sheng_yu"></span></th><th>时间：<span id="span_time"></span></th></tr></table><table id="tab_lei"></table></div><script type="text/javascript">$(function(){createTable(10,10,10);setSpan();});//定义全家变量记录idvar setTimeSpanId;//定义数组装是类的trvar collLei=[];//定义一个二维数组 装所有的tdvar collTd=[];//写一个方法 给span赋值function setSpan(){//设置span_total$("#span_total").text("10");//设置span_sheng_yu$("#span_sheng_yu").text("10");//"span_time"每1秒钟+1$("#span_time").text("0");setTimeSpanId=window.setInterval("$('#span_time').text(parseInt($('#span_time').text())+1)",1000);}//类表格创建trfunction createTable(hang,lie,num){for(var i=0;i<hang;i++){var $tr=$("<tr></tr>");//创建行for(var j=0;j<lie;j++){var $td=$("<td></td>");//创建单元格$tr.append($td);}collTd.push($tr[0].cells);$("#tab_lei").append($tr);}//随机num个雷//alert($("#tab_lei")[0].rows[0].cells.length);for(var n=0;n<num;){var hangNum=parseInt(Math.random()*hang);var lieNum=parseInt(Math.random()*lie);var $td=$("#tab_lei tr:eq("+hangNum+") td:eq("+lieNum+")");//先判断$td是否已经在collLei中if(!arrContains(collLei,$td[0])){collLei.push($td[0]);$td.text("雷");n++;}}//给所有的td添加点击事件$("#tab_lei td").bind("click",function(){//判断当前td是不是雷if(arrContains(collLei,this)){alert("触雷了！！！游戏结束！");$(this).css("background-image","url('01.png')");window.clearInterval(setTimeSpanId);$("#tab_lei td").unbind();return;}//显示周围的雷数showNum(this);});//给所有的按钮添加点击右键的事件  插旗$("#tab_lei td").bind("mousedown",function(e){//alert(e.button);//2为右键 0 为左键 1 为滚动轴if(e.button==2){if(parseInt($("#span_sheng_yu").text())<=0){alert("旗子的数量大于雷数了！！！！");return;}if($(this).css("background-image")=="none"){$(this).css("background-image","url('02.png')");//设置span_sheng_yu$("#span_sheng_yu").text(parseInt($("#span_sheng_yu").text())-1);}else{$(this).css("background-image","none");//设置span_sheng_yu$("#span_sheng_yu").text(parseInt($("#span_sheng_yu").text())+1);}}});}//写一个方法显示当前单元格的雷数function showNum(td){//alert($(td).css("background-color"));//判断当前td是不是已经是展开的if($(td).attr("class")){return;}//获取当前单元格所有的朋友var collFriends=getFriends(td);//判断朋友的雷到个数var count=0;for(var i=0;i<collFriends.length;i++){count+=arrContains(collLei,collFriends[i])?1:0;}$(td).addClass("cla");if(count!=0){$(td).text(count);}$(td).unbind();//判断count是不是0if(count==0){//对所有的朋友展示for(var i=0;i<collFriends.length;i++){showNum(collFriends[i]);}}}//写一个方法判断 参数数组 是否包含参数元素function arrContains(arr,td){for(var i=0;i<arr.length;i++){if(arr[i]==td){return true;}}return false;}//写一个方法 计算参数td的周围的tdfunction getFriends(td){var i,j;//获取参数td在collTd中的下标//alert(collTd.length+"::"+collTd[1].length);for(var ki=0;ki<collTd.length;ki++){for(var kj=0;kj<collTd[ki].length;kj++){if(collTd[ki][kj]==td){i=ki;j=kj;}}}var collFriends=[];for(var ii=i-1;ii<=i+1;ii++){for(var jj=j-1;jj<=j+1;jj++){if(collTd[ii]&&collTd[ii][jj]){if(!(ii==i&&jj==j)){collFriends.push(collTd[ii][jj]);}}}}return collFriends;}</script>
</body>
</html>

5.3 效果

jquery练习03_手写扫雷(全网最强jquery练习)，扫雷游戏 150行代码轻松搞定相关推荐

ibm软件工程师含金量_令人难以理解的软件工程师：几千行代码能搞定的为什么要写几万行？...
原标题:令人难以理解的软件工程师:几千行代码能搞定的为什么要写几万行? 一我们公司的 Windows 版软体已经有十多年的历史,经过历代工程师的整治之后,内容已经凌乱不堪.过去三个月,我找时间自己重 ...
难以理解的软件工程师：几千行代码能搞定为什么要写几万行？
导读:"所以程序高手原本就不多,而一直继续在写程序的程序高手就更是稀有了."本文是一位从业多年的软件工程师分享的经验和看法,他提到的一些现象,槽点颇多,应该是从业人员都会遇到的,不 ...
原来写刮刮卡这么简单，几行代码就搞定，你来你也行，谢谢惠顾！
利用属性属性 globalCompositeOperation,设置值为 destination-out,后绘制的图形会擦除与先绘制图形重叠的部分效果图: 思路 1.写一个div,div的内容就是刮 ...
【线程池】自行准备linux环境，带你手写线程池，只需仅仅150行代码|内存池|API|连接池|应用协议丨C/C++Linux服务器开发
[线程池]自行准备linux环境,带你手写线程池,只需仅仅150行代码视频讲解如下,点击观看: [线程池]自行准备linux环境,带你手写线程池,只需仅仅150行代码|内存池|API|连接池|应用协 ...
【线程池】自行准备linux环境，带你手写线程池，只需仅仅150行代码
[线程池]自行准备linux环境,带你手写线程池,只需仅仅150行代码视频讲解如下,点击观看: [线程池]自行准备linux环境,带你手写线程池,只需仅仅150行代码|内存池|API|连接池|应用协 ...
C++ 中的多线程的使用和线程池建设。150行代码，手写线程池
C++ 11 引入了 std::thread 标准库,方便了多线程相关的开发工作. 说到多线程开发,可不仅仅是创建一个新线程就好了,不可避免的要涉及到线程同步的问题. 而保证线程同步,实现线程安全,就 ...
还在用Word写论文？收下这个排版神器，轻松搞定所有公式！
写论文一点也不可怕可怕的是论文排版稍微修改了下字体, 插图就不知道跑哪去了, 好不容易挪了回来, 文字又打乱了, 文字排好了参考文献又乱了? 图片与公式显示又乱了写论文只是费脑子排版简直是要 ...
JSignature手写签名的实现（JQuery实现手写电子签名）
JSignature手写签名的实现 jSignature.js是实现手写签名的插件,由于jSignature.js是基于jQuery的,所以使用时需要先引入jQuery. 具体使用方法如下: 第一步, ...
手写数字识别实现课设cnsd博客_使用Tesseract轻松实现OCR字体识别
本教程翻译自PyImageSearch英文原文实现效果今天的博客文章是安装和是用Tesseract library 进行OCR识别的两章系列中的第一部分. OCR可以自动对手写或者印刷字体进行类型 ...

jquery练习03_手写扫雷(全网最强jquery练习)，扫雷游戏 150行代码轻松搞定

5 扫雷

5.1 扫雷规则

5.2 扫雷代码

5.3 效果

jquery练习03_手写扫雷(全网最强jquery练习)，扫雷游戏 150行代码轻松搞定相关推荐

最新文章

热门文章