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]))//对该点递归处理
}
}
}
以上只是个思路，没有实际价值哦，我记得展开后的效果一种可能是到边界了，另一种可能就是显示周围有几个雷的那种数字框。不过核心就是递归处理。
如果有帮助的话望采纳
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns="">
<head>
<style type="text/css">
.ul1{
height:50px
list-style-type:none
margin-top:2px
margin-right:0px
margin-bottom:0px
margin-left:0px
}
.li1{
width:46px
float:left
margin-left:2px
border-top:1px solid #000000
border-right:1px solid #000000
border-bottom:1px solid #000000
border-left:1px solid #000000
height:46px
list-style-type:none
text-align:center
line-height:46px
}
</style>
<script>
function aa(num){
var bombs = new Array(num)
var flag = 0
while( flag <num ){
bomb = Math.round(Math.random()*(num*num-1))
var f = true
for(var i = 0 i <=flag i++){
if(bomb == bombs[i]){
f = false
break
}
}
if(f){
bombs[flag++] = bomb
}
}
return bombs
}
function createDiv(num,bombs){
var pDiv = document.getElementById("pdiv")
for(i = 0 i <num i++){
var flag = false
var newUl = document.createElement("ul")
newUl.className = "ul1"
for(j = 0 j <num j++){
var newLi = document.createElement("li")
newLi.className = "li1"
newLi.id = "li" + (i*num + j)
flag = 0
for(k = 0 k <num k++){
if(bombs[k] == (i*num + j)){
flag = true
break
}
}
if(flag){
var newtext = document.createTextNode(-1)
}else{
var newtext = document.createTextNode(0)
}
newLi.appendChild(newtext)
newUl.appendChild(newLi)
}
pDiv.appendChild(newUl)
}
}
function creatBox(num){
var bombs = aa(num)
createDiv(num,bombs)
return bombs
}
function play(num){
var bombs = creatBox(num)
var temps = new Array(num*num -1)
for(i = 0 i <num*numi ++){
temps[i] = 0
}
for( j = 0 j <numj++){
temps[bombs[j]] = -1
}
lis = document.getElementsByTagName("li")
for(i = 0 i <lis.length i++){
lis[i].onclick=function ss(){
liid = this.id
num = parseInt(liid.substring(2))
if(temps[num] == -1){
alert("你踩到雷了")
}else{
alert(temps[num])
}
}
lis[i].oncontextmenu=function tt(){
liid = this.id
num = parseInt(liid.substring(2))
if(temps[num] == -1){
alert("你排到雷了")
}else{
alert(temps[num])
}
return false
}
}
}
function myplay(){
var pDiv = document.getElementById("pdiv")
pDiv.innerHTML = ""
num = parseInt(document.getElementById("nd").value)
play(num)
}
</script>
<select name="nd" onchange="myplay()" id="nd">
<option value="4">简单</option>
<option value="10">中等</option>
<option value="20">难</option>
</select>
</head>
<body>
<div id="pDiv">
</div>
<script language="javascript">
play(6)
</script>
</body>
</html>
最近学dom写的一个小代码，本来是写扫雷的，也没写完，你看看，我现在就是点击li，显示li里的内容，运行一下就知道了
原理还是创建li的时候给它加上id
var newLi = document.createElement("li")
newLi.className = "li1"
newLi.id = "li" + (i*num + j)
然后取的时候根据id取就可以了
lis = document.getElementsByTagName("li")
for(i = 0 i <lis.length i++){
lis[i].onclick=function ss(){
liid = this.id
num = parseInt(liid.substring(2))
if(temps[num] == -1){
alert("你踩到雷了")
}else{
alert(temps[num])
}
}
}
