<!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>
<body οncοntextmenu="self.event.returnValue=false">
<table cellpadding="0" cellspacing="0">
</table>
行数:<input id="rows"/><br />
列数:<input id="columns"/><br/>
雷数:<input id="number"/><br/>
<input id="btn" type="button" value="确定" />
</body>
</html>