jQuery实现扫雷小游戏
作者：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');
//该雷区周围的八个位置标记数字
//---获取每个雷区周围的八个位置
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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。