在改章节中,我们主要介绍生成格的内容,自我感觉有个不错的建议和大家分享下
经典的window小游戏扫雷，支撑IE9,chrome,firefox,safari,opera等现代浏览器！~IE8以下没测试~
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS扫雷</title>
<
script type
=
"text/javascript"
>
var
$
=
function
(
id
)
{
return
document.
getElementById
(
id
)
}
;
var
minesweeper
=
{
}
;
//雷区对象
var
mineArray
=
[
]
;
//地雷组
var
_differendNumber
=
null
;
//生成不同置位的随机地雷
var
overcomeMineLenth
=
{
overcome
:
0
,
minelength
:
10
}
;
function
CreateBox
(
y
,
x
,
mine
)
{
//造构雷格对象
this
.
position
=
1
;
//1在雷区面里，0不在
this
.
y
=
y
;
this
.
x
=
x
;
this
.
mine
=
mine
;
//1有雷，0无
this
.
on
=
0
;
//0未扫，1已扫，2已记标
this
.
t_l
=
{
y
:
y
-
1
,
x
:
x
-
1
}
;
//左上格子坐标
this
.
t_c
=
{
y
:
y
-
1
,
x
:
x
}
;
//上
this
.
t_r
=
{
y
:
y
-
1
,
x
:
x
+
1
}
;
//右上
this
.
b_l
=
{
y
:
y
+
1
,
x
:
x
-
1
}
;
//左下
this
.
b_c
=
{
y
:
y
+
1
,
x
:
x
}
;
//下
this
.
b_r
=
{
y
:
y
+
1
,
x
:
x
+
1
}
;
//右下
this
.
l
=
{
y
:
y
,
x
:
x
-
1
}
;
//左
this
.
r
=
{
y
:
y
,
x
:
x
+
1
}
;
//右
}
function
getMineSweeper
(
)
{
var
oCount
=
parseInt
(
$
(
'oCount'
)
.
innerHTML
)
;
var
y
,
x
,
max
,
boxslist
=
[
]
,
has
=
[
]
;
switch
(
oCount
)
{
//获得雷区长宽
case
10
:
y
=
9
;
x
=
9
;
break
;
case
40
:
y
=
16
;
x
=
16
;
break
;
case
99
:
y
=
16
;
x
=
30
;
break
;
}
max
=
y
*
x
;
$
(
'oMain'
)
.
style
.
width
=
24
*
x
+
2
+
'px'
;
for
(
var
i
=
0
;
i
<
y
;
i
++
)
{
//生成格子
boxslist
[
i
]
=
[
]
;
for
(
var
j
=
0
;
j
<
x
;
j
++
)
{
boxslist
[
i
]
.
push
(
new
CreateBox
(
i
,
j
,
0
)
)
;
}
}
for
(
var
k
=
0
;
k
<
oCount
;
k
++
)
{
//生成随机雷格组数序号
var
new_num
=
Math
.
floor
(
Math
.
random
(
)
*
max
+
1
)
;
getDifferentNumber
(
new_num
,
has
,
max
)
;
new_num
=
_differendNumber
;
has.
push
(
new_num
)
;
}
function
setMine
(
arr
)
{
for
(
var
i
=
0
;
i
<
has.
length
;
i
++
)
{
var
mineX
=
arr
[
i
]
%
x
==
0
?
x
:
arr
[
i
]
%
x
;
var
mineY
=
Math
.
ceil
(
arr
[
i
]
/
x
)
;
boxslist
[
mineY
-
1
]
[
mineX
-
1
]
.
mine
=
1
;
}
}
mineArray
=
has
;
overcomeMineLenth.
minelength
=
mineArray.
length
;
setMine
(
has
)
;
function
getDifferentNumber
(
n
,
has
,
max
)
{
//生成不重复的随机数
var
_has
=
has
;
var
_max
=
max
;
var
_n
=
n
;
var
isin
=
0
;
for
(
var
i
=
0
;
i
<
_has.
length
;
i
++
)
{
if
(
_n
==
has
[
i
]
)
{
isin
=
1
;
}
}
if
(
isin
==
1
)
{
//如果雷同，递归行执
var
_num
=
Math
.
floor
(
Math
.
random
(
)
*
_max
+
1
)
;
arguments.
callee
(
_num
,
_has
,
_max
)
;
}
else
{
_differendNumber
=
_n
;
}
}
minesweeper.
len
=
max
;
minesweeper.
x
=
x
;
minesweeper.
y
=
y
;
minesweeper.
boxslist
=
boxslist
;
//雷格组数
}
function
mineSweeperToHTML
(
obj
)
{
//布雷到面页HTML
var
x_len
=
obj.
x
;
var
y_len
=
obj.
y
;
var
arr
=
obj.
boxslist
;
var
str
=
''
;
for
(
var
i
=
0
;
i
<
arr.
length
;
i
++
)
{
var
_tr
=
'<tr>'
;
for
(
var
j
=
0
;
j
<
arr
[
i
]
.
length
;
j
++
)
{
var
id
=
'box-'
+
i
+
'-'
+
j
;
var
_mineclass
=
'hidden'
;
//arr[i][j].mine==0?'':'mine'
_tr
+=
'<td id="'
+
id
+
'" class="'
+
_mineclass
+
'"> </td>'
;
}
_tr
+=
'</tr>'
;
str
+=
_tr
;
}
$
(
'mineField'
)
.
innerHTML
=
'<table>'
+
str
+
'</table>'
;
//添加事件
var
boxs
=
$
(
'mineField'
)
.
getElementsByTagName
(
'td'
)
;
var
len
=
boxs.
length
;
for
(
var
k
=
0
;
k
<
len
;
k
++
)
{
boxs
[
k
]
.
onclick
=
function
(
)
{
mineBoxClick
(
this
)
;
}
boxs
[
k
]
.
onmousedown
=
function
(
event
)
{
addFlag
(
this
,
event
)
;
}
}
}
function
mineBoxClick
(
ele
)
{
//格子点击
var
ele_id
=
ele.
getAttribute
(
'id'
)
;
var
ele_id_arr
=
ele_id.
split
(
'-'
)
;
var
y
=
parseInt
(
ele_id_arr
[
1
]
)
;
var
x
=
parseInt
(
ele_id_arr
[
2
]
)
;
var
box
=
minesweeper.
boxslist
[
y
]
[
x
]
;
var
eleclass
=
ele.
getAttribute
(
'class'
)
;
if
(
eleclass
!=
'hidden'
)
{
return
false
;
}
//如果已点击，返回false
// var ele = $('box-'+y+'-'+x);
box.
on
=
1
;
if
(
box.
mine
==
0
)
{
//不是雷
overcomeMineLenth.
overcome
+=
1
;
var
tl
,
tc
,
tr
,
bl
,
bc
,
br
,
l
,
r
;
//取获四周的格子对象
var
out
=
{
position
:
0
,
mine
:
0
}
;
var
maxY
=
minesweeper.
y
-
1
;
var
maxX
=
minesweeper.
x
-
1
;
if
(
box.
t_l
.
y
<
0
||
box.
t_l
.
y
>
maxY
||
box.
t_l
.
x
<
0
||
box.
t_l
.
x
>
maxX
)
{
tl
=
out
;
}
else
{
tl
=
minesweeper.
boxslist
[
box.
t_l
.
y
]
[
box.
t_l
.
x
]
;
}
if
(
box.
t_c
.
y
<
0
||
box.
t_c
.
y
>
maxY
||
box.
t_c
.
x
<
0
||
box.
t_c
.
x
>
maxX
)
{
tc
=
out
;
}
else
{
tc
=
minesweeper.
boxslist
[
box.
t_c
.
y
]
[
box.
t_c
.
x
]
;
}
if
(
box.
t_r
.
y
<
0
||
box.
t_r
.
y
>
maxY
||
box.
t_r
.
x
<
0
||
box.
t_r
.
x
>
maxX
)
{
tr
=
out
;
}
else
{
tr
=
minesweeper.
boxslist
[
box.
t_r
.
y
]
[
box.
t_r
.
x
]
;
}
if
(
box.
b_l
.
y
<
0
||
box.
b_l
.
y
>
maxY
||
box.
b_l
.
x
<
0
||
box.
b_l
.
x
>
maxX
)
{
bl
=
out
;
}
else
{
bl
=
minesweeper.
boxslist
[
box.
b_l
.
y
]
[
box.
b_l
.
x
]
;
}
if
(
box.
b_c
.
y
<
0
||
box.
b_c
.
y
>
maxY
||
box.
b_c
.
x
<
0
||
box.
b_c
.
x
>
maxX
)
{
bc
=
out
;
}
else
{
bc
=
minesweeper.
boxslist
[
box.
b_c
.
y
]
[
box.
b_c
.
x
]
;
}
if
(
box.
b_r
.
y
<
0
||
box.
b_r
.
y
>
maxY
||
box.
b_r
.
x
<
0
||
box.
b_r
.
x
>
maxX
)
{
br
=
out
;
}
else
{
br
=
minesweeper.
boxslist
[
box.
b_r
.
y
]
[
box.
b_r
.
x
]
;
}
if
(
box.
l
.
y
<
0
||
box.
l
.
y
>
maxY
||
box.
l
.
x
<
0
||
box.
l
.
x
>
maxX
)
{
l
=
out
;
}
else
{
l
=
minesweeper.
boxslist
[
box.
l
.
y
]
[
box.
l
.
x
]
;
}
if
(
box.
r
.
y
<
0
||
box.
r
.
y
>
maxY
||
box.
r
.
x
<
0
||
box.
r
.
x
>
maxX
)
{
r
=
out
;
}
else
{
r
=
minesweeper.
boxslist
[
box.
r
.
y
]
[
box.
r
.
x
]
;
}
var
round
=
tl.
mine
+
tc.
mine
+
tr.
mine
+
bl.
mine
+
bc.
mine
+
br.
mine
+
l.
mine
+
r.
mine
;
switch
(
round
)
{
//四周格子元素式样设置
case
8
:
ele.
setAttribute
(
'class'
,
'on8'
)
;
ele.
innerHTML
=
8
;
break
;
case
7
:
ele.
setAttribute
(
'class'
,
'on7'
)
;
ele.
innerHTML
=
7
;
break
;
case
6
:
ele.
setAttribute
(
'class'
,
'on6'
)
;
ele.
innerHTML
=
6
;
break
;
case
5
:
ele.
setAttribute
(
'class'
,
'on5'
)
;
ele.
innerHTML
=
5
;
break
;
case
4
:
ele.
setAttribute
(
'class'
,
'on4'
)
;
ele.
innerHTML
=
4
;
break
;
case
3
:
ele.
setAttribute
(
'class'
,
'on3'
)
;
ele.
innerHTML
=
3
;
break
;
case
2
:
ele.
setAttribute
(
'class'
,
'on2'
)
;
ele.
innerHTML
=
2
;
break
;
case
1
:
ele.
setAttribute
(
'class'
,
'on1'
)
;
ele.
innerHTML
=
1
;
break
;
default
:
ele.
setAttribute
(
'class'
,
'on'
)
;
//如果有格空，继承搜索
if
(
tl.
position
!=
0
&&
tl.
on
==
0
)
{
$
(
'box-'
+
tl.
y
+
'-'
+
tl.
x
)
.
click
(
)
}
if
(
tc.
position
!=
0
&&
tc.
on
==
0
)
{
$
(
'box-'
+
tc.
y
+
'-'
+
tc.
x
)
.
click
(
)
}
if
(
tr.
position
!=
0
&&
tr.
on
==
0
)
{
$
(
'box-'
+
tr.
y
+
'-'
+
tr.
x
)
.
click
(
)
}
if
(
bl.
position
!=
0
&&
bl.
on
==
0
)
{
$
(
'box-'
+
bl.
y
+
'-'
+
bl.
x
)
.
click
(
)
}
if
(
bc.
position
!=
0
&&
bc.
on
==
0
)
{
$
(
'box-'
+
bc.
y
+
'-'
+
bc.
x
)
.
click
(
)
}
if
(
br.
position
!=
0
&&
br.
on
==
0
)
{
$
(
'box-'
+
br.
y
+
'-'
+
br.
x
)
.
click
(
)
}
if
(
l.
position
!=
0
&&
l.
on
==
0
)
{
$
(
'box-'
+
l.
y
+
'-'
+
l.
x
)
.
click
(
)
}
if
(
r.
position
!=
0
&&
r.
on
==
0
)
{
$
(
'box-'
+
r.
y
+
'-'
+
r.
x
)
.
click
(
)
}
}
if
(
overcomeMineLenth.
overcome
+
overcomeMineLenth.
minelength
==
minesweeper.
len
)
{
alert
(
'喜恭，你赢了！'
)
;
$
(
'start'
)
.
onclick
(
)
;
}
}
else
{
//是雷
for
(
var
i
=
0
;
i
<
mineArray.
length
;
i
++
)
{
var
mineElement
=
$
(
'mineField'
)
.
getElementsByTagName
(
'td'
)
;
mineElement
[
mineArray
[
i
]
-
1
]
.
setAttribute
(
'class'
,
'mine'
)
;
}
ele.
setAttribute
(
'class'
,
'boom'
)
;
$
(
'start'
)
.
setAttribute
(
'src'
,
'http://www.cssha.com/wp-content/uploads/2012/09/sad.gif'
)
;
//移除添加事件
var
boxs2
=
$
(
'mineField'
)
.
getElementsByTagName
(
'td'
)
;
var
len
=
boxs2.
length
;
for
(
var
k
=
0
;
k
<
len
;
k
++
)
{
boxs2
[
k
]
.
onclick
=
function
(
)
{
return
false
;
//mineBoxClick(this);
}
boxs2
[
k
]
.
onmousedown
=
function
(
event
)
{
return
false
;
//addFlag(this,event);
}
}
}
}
function
addFlag
(
ele
,
event
)
{
//记标红旗
var
e
=
event
||
window.
event
;
if
(
e.
button
==
'2'
)
{
var
_c
=
ele.
getAttribute
(
'class'
)
;
if
(
_c
==
'hidden'
)
{
ele.
setAttribute
(
'class'
,
'flag'
)
;
$
(
'oCount'
)
.
innerHTML
=
parseInt
(
$
(
'oCount'
)
.
innerHTML
)
-
1
;
}
else
if
(
_c
==
'flag'
)
{
ele.
setAttribute
(
'class'
,
'hidden'
)
;
$
(
'oCount'
)
.
innerHTML
=
parseInt
(
$
(
'oCount'
)
.
innerHTML
)
+
1
;
}
else
{
return
false
;
}
}
}
function
startGame
(
)
{
//开始游戏
getMineSweeper
(
)
;
mineSweeperToHTML
(
minesweeper
)
;
overcomeMineLenth.
overcome
=
0
;
}
function
chooseDifficulty
(
)
{
//难度选择
var
arr
=
document.
getElementsByName
(
'radio'
)
;
var
len
=
arr.
length
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
arr
[
i
]
.
onclick
=
function
(
)
{
$
(
'oCount'
)
.
innerHTML
=
this
.
value
;
$
(
'start'
)
.
setAttribute
(
'src'
,
'http://www.cssha.com/wp-content/uploads/2012/09/happy.gif'
)
;
startGame
(
)
;
}
}
}
function
getDifficulty
(
)
{
//取获已选难度
var
arr
=
document.
getElementsByName
(
'radio'
)
;
var
len
=
arr.
length
;
for
(
var
i
=
0
;
i
<
len
;
i
++
)
{
if
(
arr
[
i
]
.
checked
)
{
$
(
'oCount'
)
.
innerHTML
=
arr
[
i
]
.
value
;
}
}
}
window.
onload
=
function
(
)
{
chooseDifficulty
(
)
startGame
(
)
;
$
(
'start'
)
.
onclick
=
function
(
)
{
this
.
setAttribute
(
'src'
,
'http://www.cssha.com/wp-content/uploads/2012/09/happy.gif'
)
;
getDifficulty
(
)
;
startGame
(
)
;
}
$
(
'oMain'
)
.
style
.
display
=
'block'
;
$
(
'loading'
)
.
style
.
display
=
'none'
;
document.
oncontextmenu
=
function
(
)
{
return
false
;
}
}
</
script
>
<style type="text/css"> *{ padding: 0; margin: 0; } table { /*border-collapse: collapse; */border-spacing: 0; } fieldset,img { border: 0; } strong{ font-weight:bold;} body{ background:url("http://www.cssha.com/wp-content/uploads/2012/05/bg1.png"); text-align:center; font-size:12px; } .solid-border-up{ border:2px solid #fff; border-right:2px solid #848484; border-bottom:2px solid #848484; } .solid-border-down{ border:2px solid #848484; border-right:2px solid #fff; border-bottom:2px solid #fff; } .main{ 200px; height:auto; background:#CECFCE; margin:20px auto; padding:4px; } .top { padding:5px;} .top table{100%;} .top table td{text-align: left;} .count { 26px; height: 20px; line-height:20px; background:#000; color:red; text-align:center; } #start { margin-top:2px; } .mine-field { margin:8px 0 0 0; font-weight:bold} .mine-field td { 20px; height:21px; border:2px solid #fff; border-right:2px solid #848484; border-bottom:2px solid #848484; cursor:default; overflow:hidden; } .mine-field td.on { border:1px solid #B4B4B4; border-right:1px solid #B4B4B4; border-bottom:1px solid #B4B4B4; } .mine-field td.on1 {color:#00CD00;} .mine-field td.on2 {color:#00BFFF;} .mine-field td.on3 {color:#CD0000;} .mine-field td.on4 {color:#BF3EFF;} .mine-field td.on5 {color:#8B0000;} .mine-field td.on6 {color:#C71585;} .mine-field td.on7 {color:#CDCD00;} .mine-field td.on8 {color:#000000;} .mine-field td.flag { background:url("http://cssha.com/wp-content/uploads/2012/09/flag.gif") no-repeat center center; } .mine-field td.mine, .mine-field td.boom { background:url("http://cssha.com/wp-content/uploads/2012/09/mine.gif") no-repeat center center; } .mine-field td.boom {background-color:red;} #hananTOP h3{ color:#000; border-bottom:1px solid #ccc; margin-bottom:10px; padding:10px; text-align:center; } #hananTOP h3 img{ } #hananBottom { border-top:1px solid #ccc; margin-top:10px; padding:10px; text-align:center; } </style> </head> <body> <div id="hananTOP"> <h3> <a href="http://www.cssha.com/"> <img src="http://www.cssha.com/wp-content/uploads/2012/04/logo1.gif" alt="前端手记"> </a> <p>JS版扫雷游戏</p> </h3> </div> <div class="main solid-border-up" id="oMain" style=" 213px; display:none"> <div class="solid-border-down top"> <table> <tr> <td style=" 42px;"> <div class="solid-border-down count" id="oCount">10</div> </td> <td> <input title="点击开始游戏" type="image" src="/wp-content/uploads/2012/09/happy.gif" id="start" /> </td> <td style="text-align: right;"> <label><input type="radio" name="radio" checked="checked" value="10" />低级</label> <label><input type="radio" name="radio" value="40" />中级</label> <label><input type="radio" name="radio" value="99"/>级高</label> </td> </tr> </table> </div> <div class="mine-field solid-border-down" id="mineField"></div> </div> <img src="http://www.cssha.com/wp-content/uploads/2012/09/loading.gif" id="loading"> <div id="hananBottom"> by <a href="http://www.cssha.com/">阿安</a> </div> <span style="display:none"> <script src="http://s95.cnzz.com/stat.php?id=3377831&web_id=3377831" language="JavaScript"></script> </span> </body> </html>
文章结束给大家分享下程序员的一些笑话语录： 有一天，一个男人穿越森林的时候，听到一个细微的声音叫住他。他低头一看，是一只青蛙。
“如果你亲我一下，我会变成一个美丽的公主哦。”男人一言不发，把青蛙捡起来，放入口袋。
“如果你亲我一下，我会变成一个美丽的公主哦。而且，我会告诉我遇到的每一个人，你是多么聪明和勇敢，你是我的英雄。”男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一星期。”男人又把青蛙拿出来，对着它微微一笑，把它放回口袋。
“如果你亲我一下，我会变成一个美丽的公主，然后我愿意成为你的爱人一年，而且你可以对我做任何事。”再一次，男人把青蛙拿出来，对着它微微一笑，又把它放回口袋。
最后，青蛙无力地问：“我开出了这么好的条件，为什么你还不肯吻我？”男人说：“我是一个程序员，我可没时间和什么公主鬼混。不过，拥有一个会说话的青蛙，倒是蛮酷的。”