jQuery實(shí)現(xiàn)掃雷小游戲
更新時(shí)間：2022年05月09日 12:13:39 作者：zhumengstyle
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)掃雷小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)掃雷小游戲的具體代碼，供大家參考，具體內(nèi)容如下
掃雷小游戲?qū)崿F(xiàn)思路：
設(shè)計(jì)為9*9簡(jiǎn)單面板，每次隨機(jī)生成10顆雷，然后計(jì)算每顆雷周圍八個(gè)位置上每個(gè)位置應(yīng)該標(biāo)記的數(shù)字（該數(shù)字表示此位置周圍八個(gè)位置上存在雷的數(shù)量），基本原理大致如此。交互問題以簡(jiǎn)單的方式實(shí)現(xiàn)即可。
<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ū)周圍的八個(gè)位置標(biāo)記數(shù)字
?? ??? ?//---獲取每個(gè)雷區(qū)周圍的八個(gè)位置
?? ??? ?var xy_arr=v.split('-');
?? ??? ?var x=xy_arr[0],y=xy_arr[1];
?? ??? ?//獲取每個(gè)雷區(qū)周圍的八個(gè)位置
?? ??? ?eight_arr.push(getEightPosition(v,leiqu_weizhi));
?? ?})
?? ?//console.log(eight_arr);
?? ?//編號(hào)區(qū)域
?? ?//---寫入一個(gè)一維數(shù)組,并去除重復(fù)值
?? ?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){
?? ??? ?//編號(hào)去用綠色表示
?? ??? ?//$('td[weizhi="'+v+'"]').css('background-color','#9ce6d9');
?? ??? ?$('td[weizhi="'+v+'"]').attr('type','NUMBER');
?? ?})
?? ?//編號(hào)區(qū)域標(biāo)記數(shù)字
?? ?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');
?? ??? ?}
?? ??? ?
?? ?})
})
//編號(hào)區(qū)域標(biāo)記數(shù)字
function signLeiNumber(zhouwei_arr,leiqu_weizhi){
?? ?$.each(zhouwei_arr,function(k,v){
?? ??? ?zhouWeiLeiNumber(v,leiqu_weizhi);
?? ?})
}
//獲取每個(gè)編號(hào)區(qū)塊的八個(gè)周邊位置的雷的數(shù)量,并做出標(biāo)記
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);
?? ?//---右邊一個(gè)
?? ?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);
?? ?//---左邊一個(gè)
?? ?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;
}
//獲取每個(gè)雷區(qū)周圍的八個(gè)位置
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);
?? ?//---右邊一個(gè)
?? ?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);
?? ?//---左邊一個(gè)
?? ?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;
}
//隨機(jī)生成10個(gè)雷
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);
?? ??? ?//寫入位置數(shù)據(jù)
?? ??? ?leiqu_weizhi.push(radom_num_x+'-'+radom_num_y);
?? ??? ?//console.log(leiqu_weizhi);
?? ?}
?? ?return leiqu_weizhi;
}
</script>
</body>
</html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片上傳預(yù)覽與刪除操作的相關(guān)代碼，感興趣的小伙伴們可以參考一下2016-05-05
jquery實(shí)現(xiàn)滑動(dòng)圖片自己測(cè)試的例子
最近使用jquery寫了一個(gè)圖片滑動(dòng)的插件，雖然還是有些問題存在，用法很簡(jiǎn)單，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了jQuery常見的遍歷DOM操作,結(jié)合實(shí)例形式詳細(xì)分析了針對(duì)DOM節(jié)點(diǎn)的parent()、parents()、parentsUntil()、find()、eq()、filter()等各種遍歷操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-09-09
淺談jQuery中 wrap() wrapAll() 與 wrapInner()的差異
本文結(jié)合W3School的文檔，分析了jQuery中 wrap() wrapAll() 與 wrapInner()的差異，并給出了圖文對(duì)比教程，非常的簡(jiǎn)單實(shí)用，有需要的朋友可以參考下2014-11-11
jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鏈接的title快速出現(xiàn)的方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法詳解
這篇文章主要介紹了jQuery解析與處理服務(wù)器端返回xml格式數(shù)據(jù)的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax的get方法與后臺(tái)交互操作xml格式數(shù)據(jù)的相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2016-07-07
瀑布流布局并自動(dòng)加載實(shí)現(xiàn)代碼
Pinterest使用一種新的方式布局取得成功之后，們把他叫做瀑布流，國(guó)內(nèi)現(xiàn)有美麗說，蘑菇街，花瓣等代表的網(wǎng)站接下來為你介紹一個(gè)juqery的插件masonry的使用，感興趣的你可以參考下哈2013-03-03
這篇文章主要介紹了jQuery 移除事件的方法，文中講解非常詳細(xì)，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-06-06
不定義JQuery插件，不要說會(huì)JQuery，為什么這么說，請(qǐng)看下文2016-03-03
PHP+jQuery實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置
本文講解了如何采用PHP+MySQL+jQuery,實(shí)現(xiàn)隨意拖動(dòng)層并即時(shí)保存拖動(dòng)位置。 十分的實(shí)用，有需要的小伙伴可以參考下。2015-04-04