用JQUERY写个小小游戏

 

效果图：


玩法：


插件代码：

JScript code

$.fn.game 
=
 
function
(options)
{
    
var
 parms 
=
 {
        block:
"
block
"
,
        atler:
"
#E3E3E3
"
,
        width:
40
,
        height:
40
,
        row:
0
,
        cell:
0
,
        time:
60

    };
    
if
(options) {
        $.extend(parms, options);
    };
    
var
 _this 
=
 $(
this
);
    
var
 _score 
=
 
0
;
    
var
 _scoreFrame 
=
 
0
;
    
var
 _timeFrame;
    
var
 _timeContent;
    
var
 _timeUse 
=
 parms.time;
    
var
 _time;
    
var
 _table;
    
var
 _tr;
    
var
 _td;
    
var
 _random;
    
var
 color 
=
 [
        { index:
1
, rgb:
"
#006600
"
 },
        { index:
2
, rgb:
"
#006666
"
 },
        { index:
3
, rgb:
"
#990000
"
 },
        { index:
4
, rgb:
"
#663399
"
 },
        { index:
5
, rgb:
"
#FF6600
"
 },
        { index:
6
, rgb:
"
#000
"
 }
    ];

    
var
 initStatus 
=
 
function
()
    {
        _scoreFrame 
=
 $(
"
<div/>
"
).css(
"
margin-bottom
"
,
"
10px
"
).css(
"
color
"
,
"
#FF0000
"
).css(
"
font-family
"
,
"
微软雅黑
"
).html(
"
分数：
"
+
_score).appendTo(_this);
        _timeFrame 
=
 $(
"
<div/>
"
).css(
"
width
"
,
"
500
"
).css(
"
height
"
,
"
20
"
).css(
"
padding
"
,
"
1px
"
).css(
"
margin-bottom
"
,
"
10px
"
).css(
"
border
"
,
"
1px #ccc solid
"
).appendTo(_this);
        _timeContent 
=
 $(
"
<div/>
"
).css(
"
width
"
,
"
100%
"
).css(
"
height
"
,
"
20
"
).css(
"
background
"
,
"
#009900
"
).appendTo(_timeFrame);
        _time 
=
 setInterval(changeTime,
1000
);
    }
    
    
var
 changeTime 
=
 
function
()
    {
        
if
(_timeUse
>
0
)
        {
            _timeUse
--
;
            _timeContent.css(
"
width
"
,(_timeUse
/
parms.time)*100+"%");


        }
        
else

        {
            alert(
"
Sorry，时间到了！
"
);
            clearInterval(_time);
        }
    }

    
var
 initBlock 
=
 
function
()
    {
        _table 
=
 $(
"
<table/>
"
).attr(
"
id
"
,parms.block).attr(
"
cellPadding
"
,
"
0
"
).attr(
"
cellSpacing
"
,
"
0
"
).css(
"
border
"
,
"
1px #ccc solid
"
).appendTo(_this);
        
for
(
var
 i
=
0
; i
<
parms.row; i
++
)
        {
            _tr 
=
 $(
"
<tr/>
"
).appendTo(_table);
            
for
(
var
 j
=
0
; j
<
parms.cell; j
++
)
            {
                _td 
=
 $(
"
<td/>
"
).attr(
"
id
"
,i
+
"
-
"
+
j).css(
"
width
"
,parms.width).css(
"
height
"
,parms.height).appendTo(_tr);
                _td.click(
function
(){
                    clickFunc(
this
.id);
                });
                
if
((parseInt(i)
+
parseInt(j))
%
2
==
0
)
                {
                    _td.css(
"
background
"
,parms.atler);
                }
                
if
(random(
20
)
<
10
)
                {
                    _random 
=
 random(color.length);
                    _td.attr(
"
id
"
,i
+
"
-
"
+
j
+
"
-
"
+
color[_random
-
1
].index);
                    _td.css(
"
background
"
,color[_random
-
1
].rgb);
                    _td.unbind(
"
click
"
);
                }
            }
        }
    }
    
    
var
 selectRowCell 
=
 
function
(row,cell)
    {
        
return
 $(
"
#block tr:eq(
"
+
row
+
"
) td:eq(
"
+
cell
+
"
)
"
);
    }
    
    
var
 clickFunc 
=
 
function
(id)
    {
        
if
(
typeof
 id 
!=
 
"
string
"
) 
return
;
        
var
 _arr 
=
 id.split(
'
-
'
);
        
var
 _current,_left,_right,_top,_bottom;
        
var
 _left_id,_right_id,_top_id,_bottom_id;
        
for
(
var
 i
=
_arr[
1
]
-
1
; i
>=
0
; i
--
)
        {
            _current 
=
 selectRowCell(_arr[
0
],i);
            
if
(_current.attr(
"
id
"
).split(
'
-
'
).length
>
2
)
            {
                _left 
=
 _current;
                _left_id 
=
 _current.attr(
"
id
"
).split(
'
-
'
)[
2
];
                
break
;
            }
        }
        
for
(
var
 i
=
parseInt(_arr[
1
])
+
1
; i
<
parms.cell; i
++
)
        {
            _current 
=
 selectRowCell(_arr[
0
],i);
            
if
(_current.attr(
"
id
"
).split(
'
-
'
).length
>
2
)
            {
                _right 
=
 _current;
                _right_id 
=
 _current.attr(
"
id
"
).split(
'
-
'
)[
2
];
                
break
;
            }
        }
        
for
(
var
 i
=
_arr[
0
]
-
1
; i
>=
0
; i
--
)
        {
            _current 
=
 selectRowCell(i,_arr[
1
]);
            
if
(_current.attr(
"
id
"
).split(
'
-
'
).length
>
2
)
            {
                _top 
=
 _current;
                _top_id 
=
 _current.attr(
"
id
"
).split(
'
-
'
)[
2
];
                
break
;
            }
        }
        
for
(
var
 i
=
parseInt(_arr[
0
])
+
1
; i
<
parms.row; i
++
)
        {
            _current 
=
 selectRowCell(i,_arr[
1
]);
            
if
(_current.attr(
"
id
"
).split(
'
-
'
).length
>
2
)
            {
                _bottom 
=
 _current;
                _bottom_id 
=
 _current.attr(
"
id
"
).split(
'
-
'
)[
2
];
                
break
;
            }
        }

        
if
(_left_id
==
_top_id
&&
_left_id
==
_right_id
&&
_left_id
==
_bottom_id)
        {
            action(_left);
            action(_right);
            action(_top);
            action(_bottom);
            _score 
=
 _score
+
4
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_top_id
&&
_left_id
==
_right_id)
        {
            action(_left);
            action(_top);
            action(_right);
            _score 
=
 _score
+
3
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_top_id
&&
_left_id
==
_bottom_id)
        {
            action(_left);
            action(_top);
            action(_bottom);
            _score 
=
 _score
+
3
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_right_id
&&
_left_id
==
_bottom_id)
        {
            action(_left);
            action(_right);
            action(_bottom);
            _score 
=
 _score
+
3
;
            setScore();
            
return
;
        }
        
else
 
if
(_right_id
==
_top_id
&&
_right_id
==
_bottom_id)
        {
            action(_right);
            action(_top);
            action(_bottom);
            _score 
=
 _score
+
3
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_top_id)
        {
            action(_left);
            action(_top);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_right_id)
        {
            action(_left);
            action(_right);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
        
else
 
if
(_left_id
==
_bottom_id)
        {
            action(_left);
            action(_bottom);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
        
else
 
if
(_top_id
==
_right_id)
        {
            action(_right);
            action(_top);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
        
else
 
if
(_top_id
==
_bottom_id)
        {
            action(_top);
            action(_bottom);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
        
else
 
if
(_right_id
==
_bottom_id)
        {
            action(_right);
            action(_bottom);
            _score 
=
 _score
+
2
;
            setScore();
            
return
;
        }
    }
    
    
var
 setScore 
=
 
function
()
    {
        _scoreFrame.html(
"
分数：
"
+
_score)
    }
    
    
var
 action 
=
 
function
(obj)
    {
        
if
(
typeof
 obj 
==
 
"
undefined
"
) 
return
;
        
var
 _idArr 
=
 obj.attr(
"
id
"
).split(
'
-
'
);
        obj.attr(
"
id
"
,
"
1111
"
);
        obj.css(
"
background
"
,(parseInt(_idArr[
0
])
+
parseInt(_idArr[
1
]))
%
2
==
0
?
parms.atler:
"
#fff
"
);
        obj.click(
function
(){
                    clickFunc(_idArr[
0
]
+
"
-
"
+
_idArr[
1
]);
                });
    }
    
    
var
 random 
=
 
function
(n)
    {
        
return
 Math.floor(Math.random()
*
n
+
1
);
    }
    
    initStatus();
    initBlock();
}

调用：

HTML code

<
div 
id
="t"
></
div
>

JScript code

$(
"
#t
"
).game({row:
10
,cell:
20
});

还有许多小BUG，有已经发现的和未发现的，以及参数说明，都放到明天再说了，好困，睡去了，晚安 =.=