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

跟着宝哥学java

于 2023-03-27 11:46:54 发布

阅读量4.4k

点赞数 1

文章标签： jquery 游戏 javascript

本文链接：https://blog.csdn.net/mtb278750/article/details/129792331

版权

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();
        });
        //定义全家变量记录id
        var setTimeSpanId;
        //定义数组装是类的tr
        var collLei=[];
        //定义一个二维数组 装所有的td
        var 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);
        }
        //类表格创建tr
        function 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是不是0
    		if(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的周围的td
        function 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>