用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，有已经发现的和未发现的，以及参数说明，都放到明天再说了，好困，睡去了，晚安 =.=