1）jquery.tableGen.js，这段js的作用是产生一个表格，表格中显示数字和雷区，调用的方法很简单，如下:
var options ={
rows:5,
cols:5,
percent:0.1
}
$("table").tableGen(options)
思路是：根据table的单元格的数目随机产生percent的雷，并填充td。然后遍历所有的td，查找周围雷的个数来填充单元格的数字
[javascript] view plain copy
var neigUp = new Array()
var neig = new Array()
var neigDw = new Array()
var cols,rows
var table,tds
var colors =["black","blue","red","orange","yellow","green","black","black"] var mineNum
function($){
var randoms = function(max,percent){
// General digital between 0 and max num times
if(!max)max =100
if(!percent) percent =0.1
num = max*percent
var i=0
var arr = new Array()
while(i<num) arr[i++]=Math.floor(Math.random()*max)
return arr
}
$.fn.tableGen = function(options){
var setting = $.extend({
rows:10,
cols:10,
percent:0.1
},options || {}
)
rows = setting.rows
cols = setting.cols
neigUp = [-(cols+1),-cols,-(cols-1)]
neig =[-1,1]
neigDw =[cols-1,cols,cols+1]
var str = ""
for(var j=0j<setting.rowsj++){
str+="<tr>"
for(var i=0i<setting.colsi++){
str+="<td>"+i+"</td>"
}
str+="</tr>"
}
this.empty()
this.append(str)
$("td",this).addClass("org") // orginal color
//fill
var arr = randoms(setting.rows*setting.cols,setting.percent)
tds = $("td",this)
mineNum = arr.length
for(var i=0i<arr.lengthi++){
$(tds[arr[i]]).addClass("mine").html("<span>"+"*"+"</span>").find("span").css("opacity",0)
}
// add tips number to regular cells
var $this =this
tds.each(function(i){
if($(this).text() == "*") return
var cnt = 0
var seq = i
for(var i=0i<neig.lengthi++){
var p = neig[i]+seq
if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++
}
for(var i=0i<neigUp.lengthi++){
var p = neigUp[i]+seq
if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() == "*") cnt++
}
for(var i=0i<neigDw.lengthi++){
var p = neigDw[i]+seq
if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() == "*") cnt++
}
if(!cnt) { cnt = "" colors[""]=""}
$(this).html("<span>"+cnt+"</span>").css("color",colors[cnt]).find("span").css("opacity",0)
})
tds.addClass("mark")
} // tableGen Fn end
)(jQuery)
2）jquery.fill.js。这段代码的作用是定义点击事件，每次点击根据点击的内容来显示周围的区域或者提示成功失败
[javascript] view plain copy
(function($){
neig =[-1,1]
neigDw =[cols]
neigUp = [-cols]
var recover =function(td,table){
if(!td) return
if(!td.attr) td = $(td)
if(!td.hasClass("mark")){
return
}
if(td.text() == ""){
td.removeClass("mark").find("span").css("opacity",1)
}
else if(td.text() !="*"){
td.removeClass("mark").find("span").css("opacity",1)
return
}
else if(td.text() == "*"){
return
}
var seq = td.index("td",table)
tds = table.filter("td")
/*----------------------------*/
for(var i=0i<neig.lengthi++){
var p = neig[i]+seq
if(tds[p]&&Math.floor(p/cols) == Math.floor(seq/cols) && $(tds[p]).text() != "*") {
recover($(tds[p]),table)
}
}
for(var i=0i<neigUp.lengthi++){
var p = neigUp[i]+seq
if(tds[p]&&Math.floor(p/cols)+1 == Math.floor(seq/cols )&& $(tds[p]).text() != "*") {
recover($(tds[p]),table)
}
}
for(var i=0i<neigDw.lengthi++){
var p = neigDw[i]+seq
if(tds[p]&&Math.floor(p/cols)-1 == Math.floor(seq/cols) && $(tds[p]).text() != "*") {
recover($(tds[p]),table)
}
}
}
$.fn.fill = function(){
table = $(this)
tds =$("td",table)
var mineCnt = 0
tds.click(function(event){
if($(this).text() != "*"){
if(event.altKey){
tds.removeClass("mark").find("span").css("opacity",1)
var rs = confirm("No Bomb here !Bad Luck,Try Again?")
if(rs){
table.tableGen(options).fill()
}
return
}
}
if($(this).text() == "*"){
$(this).removeClass("mark").find("span").css("opacity",1)
var event = event || window.event
if(event.altKey){
mineCnt++
if(mineCnt == mineNum){
var rs = confirm("congratulations!Try Again?")
if(rs){
table.tableGen(options).fill()
}
return
}
return
}
// Game over
tds.removeClass("mark").find("span").css("opacity",1)
var rs = confirm("Bomb!Bad Luck,Try Again?")
if(rs){
table.tableGen(options)
table.fill()
}
}
else if($(this).text() !="*" && $(this).text() !=""){
$(this).removeClass("mark").find("span").css("opacity",1)
}
else
recover($(this),tds)
})
}
})(jQuery)
[html] view plain copy
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.table.js"></script>
<script type="text/javascript" src="jquery.fill.js"></script>
<title>Mine</title>
<style type="text/css">
table{
table-layout: fixed
}
.org {
border:1px solid black
background-color:white
overflow: hidden
width: 10px
height:10px
}
.mine{
}
.mark{
background-color: orange
}
.flag{
background: url(flag.png)
background-color: blue
}
</style>
</head>
<body>
<h3>Mine Game</h3>
<table colspan='4'>
</table>
<script type="text/javascript" >
var options ={
rows:5,
cols:5,
percent:0.1
}
$("table").tableGen(options)
$("table").fill()
</script>
</body>
</html> -->
用递归啊。你肯定已经做了一个方法用来检测当前点周边8个点是否无雷了吧？对于无雷的点逐个再次调用该方法。
以下是伪码示例. isBad是用来检测指定的点是否是雷的方法
function checkRimPoint(x, y) {var points = [[x-1,y-1],[x,y-1],[x+1,y-1],[x-1,y],[x+1,y],[x-1,y+1],[x,y+1],[x+1,y+1]
for(var i = 0i <points.lengthi++) {
if (! isBad(points[i][0], points[i][1])) {
showPoint(points[i][0], points[i][1]))//这个不是雷，调用方法显示这个点
checkRimPoint(points[i][0], points[i][1]))//对该点递归处理
}
}
}
以上只是个思路，没有实际价值哦，我记得展开后的效果一种可能是到边界了，另一种可能就是显示周围有几个雷的那种数字框。不过核心就是递归处理。
如果有帮助的话望采纳
