jQuery實現掃雷小游戲
更新時間:2022年05月09日 12:13:39 作者:zhumengstyle
這篇文章主要為大家詳細介紹了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'); ?? ??? ?//該雷區(qū)周圍的八個位置標記數字 ?? ??? ?//---獲取每個雷區(qū)周圍的八個位置 ?? ??? ?var xy_arr=v.split('-'); ?? ??? ?var x=xy_arr[0],y=xy_arr[1]; ?? ??? ?//獲取每個雷區(qū)周圍的八個位置 ?? ??? ?eight_arr.push(getEightPosition(v,leiqu_weizhi)); ?? ?}) ?? ?//console.log(eight_arr); ?? ?//編號區(qū)域 ?? ?//---寫入一個一維數組,并去除重復值 ?? ?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'); ?? ?}) ?? ?//編號區(qū)域標記數字 ?? ?signLeiNumber(zhouwei_arr,leiqu_weizhi); ?? ?//空白區(qū)域 ?? ?$("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'){ ?? ??? ??? ?//空白區(qū)域 ?? ??? ??? ?$('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'); ?? ??? ?} ?? ??? ? ?? ?}) }) //編號區(qū)域標記數字 function signLeiNumber(zhouwei_arr,leiqu_weizhi){ ?? ?$.each(zhouwei_arr,function(k,v){ ?? ??? ?zhouWeiLeiNumber(v,leiqu_weizhi); ?? ?}) } //獲取每個編號區(qū)塊的八個周邊位置的雷的數量,并做出標記 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; } //獲取每個雷區(qū)周圍的八個位置 function getEightPosition(v,leiqu_weizhi){ ?? ?var xy_arr=v.split('-'),eight_position_arr=new Array(); ?? ?var x=xy_arr[0],y=xy_arr[1]; ?? ?//從該雷區(qū)的左上角位置開始找 ?? ?//---左上角 ?? ?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; } //不在邊界之外且不在任何雷區(qū)的位置上 function checkPosition(x,y,arr,leiqu_weizhi) { ?? ?if((x>=1 && x<=9) && (y>=1 && y<=9)){ ?? ??? ?if($.inArray((x+'-'+y).toString(),leiqu_weizhi)==-1){ ?? ??? ??? ?//不在任何雷區(qū)的位置上 ?? ??? ??? ?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>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
本文結合W3School的文檔,分析了jQuery中 wrap() wrapAll() 與 wrapInner()的差異,并給出了圖文對比教程,非常的簡單實用,有需要的朋友可以參考下2014-11-11