jquery框架JS扫雷

来源：互联网发布：php与jsp的区别编辑：程序博客网时间：2024/05/17 02:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="../jquery-1.4.1.js"></script>
<style type="text/css">
table{
  border:1px solid red;}
tr{
  height:15px;}
td{
  border:1px solid gray;
  width:15px;
  background:green;}
</style>
<script type="text/javascript">
//rows 行数   columns 列数 number 雷数
var rows,columns,number;
//初始化
function Init(){
  //获取用户设置的信息并判断输入是否正确
  rows = $("#rows").val();
  columns = $("#columns").val();
  number = $("#number").val();
  if(isNaN(rows)||isNaN(columns)||isNaN(number)){
   alert("请输入数字");
   return;
  }
  if(rows==""||columns==""||number==""){
   alert("数据输入不正确");
   return;
  }
  if((rows*columns)/2<number){
   alert("多");
   return;
  }
  tableInit();
  mineInit();
}
//初始化地雷的位置
function mineInit(){
  for(var i=number;i>0;i--){
   var c = parseInt(Math.random()*columns);
   var r = parseInt(Math.random()*rows);
   if(choose(c,r).attr("ismine")){
    i++;
    continue;
   }
   choose(c,r).attr("ismine",true);
  }
}
//根据用户的设置初始化界面
function tableInit(){
  for(var r=rows;r>0;r--){
   var trs = $("<tr></tr>");
   for(var c = columns;c>0;c--){
    var tds = $("<td></td>");
    //设置每个的坐标
    tds.attr("columns",columns-c);
    tds.attr("rows",rows-r);
    $(trs).append(tds);
    $(tds).mousedown(function(e){
     tdClick(this,e);
    });
   }
   $("table").append(trs);
  }
}
//点击事件判断是否点中地雷
function tdClick(td,e){
  //判断按下的是什么键
  if(e.which==1){
   if($(td).attr("isl")){return;}
   if($(td).attr("ismine")){
    alert("你挂了");
   }else{
    minenumber(td);
   }
  }else{
   if($(td).attr("isl")){
    $(td).css("background","green").removeAttr("isl");
   }else{
    $(td).css("background","red").attr("isl",true);
   }
  }
  issl();
}
//判断是否胜利
function issl(){
  if($("td[isfangwen!=true]").length==number){
   alert("你胜利了");
  }
}
//根据行和列来选择
function choose(c,r){
  if(c<0||r<0||c>columns-1||r>rows-1){
   return null;
  }
  return $("td[columns="+c+"][rows="+r+"]");
}
//判断周围有多少地雷
function minenumber(td){
  if(td==null){
   return;
  }
  //判断此位置是否判断过
  if($(td).attr("isfangwen")){//已判断
   return;
  }else{//未判读
   $(td).attr("isfangwen",true);
   $(td).css("background","gray");
  }
  var c = parseInt($(td).attr("columns"));
  var r = parseInt($(td).attr("rows"));
  var count=0;//存储周围地雷的数量
  //判断各个方向是否是地雷
  if(mn(c,r-1)){count++;}//上
  if(mn(c+1,r-1)){count++;}//右上
  if(mn(c+1,r)){count++;}//右
  if(mn(c+1,r+1)){count++;}//右下
  if(mn(c,r+1)){count++;}//下
  if(mn(c-1,r+1)){count++;}//左下
  if(mn(c-1,r)){count++;}//左
  if(mn(c-1,r-1)){count++;}//左上
  if(count==0){
   minenumber(choose(c,r-1));
   minenumber(choose(c+1,r-1));
   minenumber(choose(c+1,r));
   minenumber(choose(c+1,r+1));
   minenumber(choose(c,r+1));
   minenumber(choose(c-1,r+1));
   minenumber(choose(c-1,r));
   minenumber(choose(c-1,r-1));
  }else{
   $(td).text(count);
  }
}
//判断指定位置是否是地雷
function mn(c,r){
  if(isNaN(c)||isNaN(r)){
   return false;
  }
  //判断边界
  if(c<0||r<0||c>columns-1||r>rows-1){
   return false;
  }
  if(choose(c,r).attr("ismine")){//是地雷
   return true;
  }else{//不是地雷
   return false;
  }
}
$(function(){
  $("#btn").click(function(){
   Init();
  });
});
</script>
</head>