闲着蛋疼,用JQUERY写个小小游戏,要分的来咯! - Web 开发 / Ajax
今晚闲着蛋疼,长夜漫漫,无心睡眠,写了个JQUERY插件,给同学们一个小小游戏。
效果图:
玩法:
插件代码:
$.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();}
<div id="t"></div>
$("#t").game({row:10,cell:20});