jQuery实现扫雷小游戏
本文实例为大家分享了jQuery实现扫雷小游戏的具体代码,供大家参考,具体内容如下
扫雷小游戏实现思路:
设计为9*9简单面板,每次随机生成10颗雷,然后计算每颗雷周围八个位置上每个位置应该标记的数字(该数字表示此位置周围八个位置上存在雷的数量),基本原理大致如此。交互问题以简单的方式实现即可。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <style> td{ border:1px solid #ccc; width:70px; height:70px; } </style> </head> <body> <table style="border:1px solid #2e6377;background-color:#789dc3;text-align:center;margin-top:60px;margin-left:60px;" border="1px"> <tr> <td weizhi="1-9"></td> <td weizhi="2-9"></td> <td weizhi="3-9"></td> <td weizhi="4-9"></td> <td weizhi="5-9"></td> <td weizhi="6-9"></td> <td weizhi="7-9"></td> <td weizhi="8-9"></td> <td weizhi="9-9"></td> </tr> <tr> <td weizhi="1-8"></td> <td weizhi="2-8"></td> <td weizhi="3-8"></td> <td weizhi="4-8"></td> <td weizhi="5-8"></td> <td weizhi="6-8"></td> <td weizhi="7-8"></td> <td weizhi="8-8"></td> <td weizhi="9-8"></td> </tr> <tr> <td weizhi="1-7"></td> <td weizhi="2-7"></td> <td weizhi="3-7"></td> <td weizhi="4-7"></td> <td weizhi="5-7"></td> <td weizhi="6-7"></td> <td weizhi="7-7"></td> <td weizhi="8-7"></td> <td weizhi="9-7"></td> </tr> <tr> <td weizhi="1-6"></td> <td weizhi="2-6"></td> <td weizhi="3-6"></td> <td weizhi="4-6"></td> <td weizhi="5-6"></td> <td weizhi="6-6"></td> <td weizhi="7-6"></td> <td weizhi="8-6"></td> <td weizhi="9-6"></td> </tr> <tr> <td weizhi="1-5"></td> <td weizhi="2-5"></td> <td weizhi="3-5"></td> <td weizhi="4-5"></td> <td weizhi="5-5"></td> <td weizhi="6-5"></td> <td weizhi="7-5"></td> <td weizhi="8-5"></td> <td weizhi="9-5"></td> </tr> <tr> <td weizhi="1-4"></td> <td weizhi="2-4"></td> <td weizhi="3-4"></td> <td weizhi="4-4"></td> <td weizhi="5-4"></td> <td weizhi="6-4"></td> <td weizhi="7-4"></td> <td weizhi="8-4"></td> <td weizhi="9-4"></td> </tr> <tr> <td weizhi="1-3"></td> <td weizhi="2-3"></td> <td weizhi="3-3"></td> <td weizhi="4-3"></td> <td weizhi="5-3"></td> <td weizhi="6-3"></td> <td weizhi="7-3"></td> <td weizhi="8-3"></td> <td weizhi="9-3"></td> </tr> <tr> <td weizhi="1-2"></td> <td weizhi="2-2"></td> <td weizhi="3-2"></td> <td weizhi="4-2"></td> <td weizhi="5-2"></td> <td weizhi="6-2"></td> <td weizhi="7-2"></td> <td weizhi="8-2"></td> <td weizhi="9-2"></td> </tr> <tr> <td weizhi="1-1"></td> <td weizhi="2-1"></td> <td weizhi="3-1"></td> <td weizhi="4-1"></td> <td weizhi="5-1"></td> <td weizhi="6-1"></td> <td weizhi="7-1"></td> <td weizhi="8-1"></td> <td weizhi="9-1"></td> </tr> </table> <div style="width:500px;height:200px;margin-left:60px;margin-top:20px;text-align:center;color:red;display:none;" id="tips"><h1>哦,NO!,你挖中了炸弹!</h1></div> <!--JS部分--> <script> $(document).ready(function(){ var radom_weizhi=new Array(); var leiqu_weizhi=radom_lei(); var eight_arr=new Array(); $.each(leiqu_weizhi,function(k,v){ //$('td[weizhi="'+v+'"]').css({'background-color':'red'}); $('td[weizhi="'+v+'"]').html('<b>炸弹</b>'); $('td[weizhi="'+v+'"]').attr('type','TNT'); //隐藏 $('td[weizhi="'+v+'"] b').css('display','none'); //该雷区周围的八个位置标记数字 //---获取每个雷区周围的八个位置 var xy_arr=v.split('-'); var x=xy_arr[0],y=xy_arr[1]; //获取每个雷区周围的八个位置 eight_arr.push(getEightPosition(v,leiqu_weizhi)); }) //console.log(eight_arr); //编号区域 //---写入一个一维数组,并去除重复值 var zhouwei_arr=new Array(); $.each(eight_arr,function(k,v){ $.each(v,function(kk,vv){ if($.inArray(vv,zhouwei_arr)==-1){ zhouwei_arr.push(vv); } }) }) //console.log(zhouwei_arr); $.each(zhouwei_arr,function(k,v){ //编号去用绿色表示 //$('td[weizhi="'+v+'"]').css('background-color','#9ce6d9'); $('td[weizhi="'+v+'"]').attr('type','NUMBER'); }) //编号区域标记数字 signLeiNumber(zhouwei_arr,leiqu_weizhi); //空白区域 $("td").each(function(){ if($.inArray($(this).attr('weizhi'),zhouwei_arr)==-1){ if($.inArray($(this).attr('weizhi'),leiqu_weizhi)==-1){ //空位置 //$(this).css('background-color','white'); $(this).attr('type','BLANK'); } } }) //遮罩棋盘 $('td').css('background-color','#6ad0ef'); }) //事件 $(document).ready(function(){ $('td').click(function(){ console.log($(this).attr('type')); if($(this).attr('type')=='BLANK'){ //空白区域 $('td[type="BLANK"').css('background-color','white'); } if($(this).attr('type')=='NUMBER'){ $(this).css('background-color','#9ce6d9'); $(this).find('b').css('display','block'); } if($(this).attr('type')=='TNT'){ $(this).css('background-color','red'); $(this).find('b').css('display','block'); $('td[type="TNT"]').each(function(){ $(this).find('b').css('display','block'); $(this).css('background-color','red'); }) $('td[type="NUMBER"]').each(function(){ $(this).css('background-color','#9ce6d9'); $(this).find('b').css('display','block'); }) $('#tips').css('display','block'); } }) }) //编号区域标记数字 function signLeiNumber(zhouwei_arr,leiqu_weizhi){ $.each(zhouwei_arr,function(k,v){ zhouWeiLeiNumber(v,leiqu_weizhi); }) } //获取每个编号区块的八个周边位置的雷的数量,并做出标记 function zhouWeiLeiNumber(v,leiqu_weizhi) { var xy_arr=v.split('-'),eight_position_arr=new Array(); var x=xy_arr[0],y=xy_arr[1]; //---左上角 var x1=x-1,y1=parseInt(y)+1; eight_position_arr=getPosition(x1,y1,eight_position_arr); //---正上方 var x2=x,y2=parseInt(y)+1; eight_position_arr=getPosition(x2,y2,eight_position_arr); //---右上角 var x3=parseInt(x)+1,y3=parseInt(y)+1; eight_position_arr=getPosition(x3,y3,eight_position_arr); //---右边一个 var x4=parseInt(x)+1,y4=y; eight_position_arr=getPosition(x4,y4,eight_position_arr); //---右下角 var x5=parseInt(x)+1,y5=y-1; eight_position_arr=getPosition(x5,y5,eight_position_arr); //---正下方 var x6=x,y6=y-1; eight_position_arr=getPosition(x6,y6,eight_position_arr); //---左下角 var x7=x-1,y7=y-1; eight_position_arr=getPosition(x7,y7,eight_position_arr); //---左边一个 var x8=x-1,y8=y; eight_position_arr=getPosition(x8,y8,eight_position_arr); var num_lei=0; $.each(eight_position_arr,function(kk,vv){ if($.inArray(vv,leiqu_weizhi)>-1){ num_lei++; } }) $('td[weizhi="'+v+'"]').html('<b>'+num_lei+'</b>'); //隐藏 $('td[weizhi="'+v+'"] b').css('display','none'); } //不在边界之外 function getPosition(x,y,arr) { if((x>=1 && x<=9) && (y>=1 && y<=9)){ arr.push(x+'-'+y); } return arr; } //获取每个雷区周围的八个位置 function getEightPosition(v,leiqu_weizhi){ var xy_arr=v.split('-'),eight_position_arr=new Array(); var x=xy_arr[0],y=xy_arr[1]; //从该雷区的左上角位置开始找 //---左上角 var x1=x-1,y1=parseInt(y)+1; eight_position_arr=checkPosition(x1,y1,eight_position_arr,leiqu_weizhi); //---正上方 var x2=x,y2=parseInt(y)+1; eight_position_arr=checkPosition(x2,y2,eight_position_arr,leiqu_weizhi); //---右上角 var x3=parseInt(x)+1,y3=parseInt(y)+1; eight_position_arr=checkPosition(x3,y3,eight_position_arr,leiqu_weizhi); //---右边一个 var x4=parseInt(x)+1,y4=y; eight_position_arr=checkPosition(x4,y4,eight_position_arr,leiqu_weizhi); //---右下角 var x5=parseInt(x)+1,y5=y-1; eight_position_arr=checkPosition(x5,y5,eight_position_arr,leiqu_weizhi); //---正下方 var x6=x,y6=y-1; eight_position_arr=checkPosition(x6,y6,eight_position_arr,leiqu_weizhi); //---左下角 var x7=x-1,y7=y-1; eight_position_arr=checkPosition(x7,y7,eight_position_arr,leiqu_weizhi); //---左边一个 var x8=x-1,y8=y; eight_position_arr=checkPosition(x8,y8,eight_position_arr,leiqu_weizhi); return eight_position_arr; } //不在边界之外且不在任何雷区的位置上 function checkPosition(x,y,arr,leiqu_weizhi) { if((x>=1 && x<=9) && (y>=1 && y<=9)){ if($.inArray((x+'-'+y).toString(),leiqu_weizhi)==-1){ //不在任何雷区的位置上 arr.push(x+'-'+y); } } return arr; } //随机生成10个雷 function radom_lei(){ var leiqu_x=new Array(),leiqu_y=new Array(),leiqu_weizhi=new Array(); for(var a=1;a<=10;a++){ var radom_num_x=(10*Math.random()).toString().substring(0,1); if(radom_num_x==0){ if(leiqu_x.length==0){ radom_num_x=1; }else{ radom_num_x=leiqu_x.length; } } leiqu_x.push(radom_num_x); //console.log(leiqu_x); var radom_num_y=(10*Math.random()).toString().substring(0,1); if(radom_num_y==0){ if(leiqu_y.length==0){ radom_num_y=1; }else{ radom_num_y=leiqu_y.length; } } leiqu_y.push(radom_num_y); //console.log(leiqu_y); //写入位置数据 leiqu_weizhi.push(radom_num_x+'-'+radom_num_y); //console.log(leiqu_weizhi); } return leiqu_weizhi; } </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
赞 (0)