<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head>
<body>
<style>
table{background-color: red;}
tr td{width: 20px;height: 20px;background-color: yellow;}
</style> <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<table>
<script> var x=9;//宽度
var y=9;//高度
var shu=20;//雷数
var lei=new Array();//雷的位置
//循环出随机雷的位置
for(var l=0;l<shu;l++){
var c=Math.floor(Math.random()*parseInt(String(x)+y));
lei[l]=c;
} for(var i=1;i<x;i++){
document.write('<tr>');
for(var s=1;s<y;s++){
//如果这个位置是雷 显示*
if(xunhuan(String(i) + String(s))){
document.write('<td value="*"></td>');
}else{
//不是累就显示 周围的雷数
document.write('<td value="'+leishu(i,s)+'"></td>'); } }
document.write('</tr>'); }
//判断一个坐标是不是雷
function xunhuan(xy){ if(jQuery.inArray(parseInt(xy), lei)!=-1){
return true;
}else{
return false;
}
}
//判断一个坐标的 上下左右的坐标
function leishu(i,s){
var shu=0;
//上边
if((i-1)>=1){
if(xunhuan(String(i-1)+s)){
shu+=1;
}
}
//下边
if((i+1)<y){
if(xunhuan(String(i+1)+s)){
shu+=1;
}
}
//左边
if((s-1)>=1){
if(xunhuan(String(i)+(s-1))){
shu+=1;
}
}
//右边
if((s+1)<x){
if(xunhuan(String(i)+(s+1))){
shu+=1;
}
}
//左上
if((i-1)>=1 && (s-1)>=1){
if(xunhuan(String(i-1)+String(s-1))){
shu+=1;
}
}
//右上
if((i-1)>=1 && (s+1)<x){
if(xunhuan(String(i-1)+String(s+1))){
shu+=1;
}
}
//左下
if((i+1)<y && (s-1)>=1){
if(xunhuan(String(i+1)+String(s-1))){
shu+=1;
}
}
//右下
if((i+1)<y && (s+1)<x){
if(xunhuan(String(i+1)+String(s+1))){
shu+=1;
}
} return shu;
}
$(function(){
$("table").on("click","td", function () {
$val=$(this).attr("value");
if($val=='*'){
$(this).text('雷');
}else{
$(this).text($val);
} });
}); </script>
</table>
</body>
</html>