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();
});
var setTimeSpanId;
var collLei=[];
var collTd=[];
function setSpan(){
$("#span_total").text("10");
$("#span_sheng_yu").text("10");
$("#span_time").text("0");
setTimeSpanId=window.setInterval("$('#span_time').text(parseInt($('#span_time').text())+1)",1000);
}
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);
}
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+")");
if(!arrContains(collLei,$td[0])){
collLei.push($td[0]);
$td.text("雷");
n++;
}
}
$("#tab_lei td").bind("click",function(){
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){
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").text(parseInt($("#span_sheng_yu").text())-1);
}else{
$(this).css("background-image","none");
$("#span_sheng_yu").text(parseInt($("#span_sheng_yu").text())+1);
}
}
});
}
function showNum(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();
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;
}
function getFriends(td){
var i,j;
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>
5.3 效果