<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery.js" type="text/javascript" language="javascript"></script>
</head>
<body>
<div id="t"></div>
<script>
$.fn.game = function(imgData,options)
{
if(imgData == null) return;
var parms = {
block:"block",
atler:"#E3E3E3",
width:40,
height:40,
row:0,
cell:0,
time:60
};
if(options) {
$.extend(parms, options);
};
parms.time = parms.time*10;
var _this = $(this);
var _score = 0;
var _scoreFrame = 0;
var _timeFrame;
var _timeContent;
var _msgFrame;
var _timeUse = parms.time;
var _time;
var _table;
var _tr;
var _td;
var _random;
_this.css("position","relative");
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","#FFFF00").appendTo(_timeFrame);
_time = setInterval(changeTime,100);
_msgFrame = $("<div/>").css("width","100").css("padding","10px").css("text-align","center").css("font-family","微软雅黑").css("border","1px #ccc solid").css("position","absolute").css("top","10").css("left","680").hide().appendTo(_this);
}
var changeTime = function()
{
if(_timeUse>0)
{
_timeUse--;
_timeContent.css("width",(_timeUse/parms.time)*100+"%");
}
else
{
msg(-1);
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(imgData.length);
_td.attr("id",i+"-"+j+"-"+imgData[_random-1].index);
$("<img/>").attr("src",imgData[_random-1].img).appendTo(_td);
_td.unbind("click");
}
}
}
}
var selectRowCell = function(row,cell)
{
return $("#"+parms.block).find("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=-1,_right_id=-2,_top_id=-3,_bottom_id=-4;
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);
setScore(4);
}
else if(_left_id==_top_id&&_left_id==_right_id)
{
action(_left);
action(_top);
action(_right);
setScore(3);
}
else if(_left_id==_top_id&&_left_id==_bottom_id)
{
action(_left);
action(_top);
action(_bottom);
setScore(3);
}
else if(_left_id==_right_id&&_left_id==_bottom_id)
{
action(_left);
action(_right);
action(_bottom);
setScore(3);
}
else if(_right_id==_top_id&&_right_id==_bottom_id)
{
action(_right);
action(_top);
action(_bottom);
setScore(3);
}
else if(_left_id==_top_id)
{
action(_left);
action(_top);
setScore(2);
}
else if(_left_id==_right_id)
{
action(_left);
action(_right);
setScore(2);
}
else if(_left_id==_bottom_id)
{
action(_left);
action(_bottom);
setScore(2);
}
else if(_top_id==_right_id)
{
action(_right);
action(_top);
setScore(2);
}
else if(_top_id==_bottom_id)
{
action(_top);
action(_bottom);
setScore(2);
}
else if(_right_id==_bottom_id)
{
action(_right);
action(_bottom);
setScore(2);
}
else
{
setScore(0);
}
}
var setScore = function(level)
{
switch(level)
{
case 2:
_score = _score+2;
msg(2);
break;
case 3:
_score = _score+3;
msg(3);
break;
case 4:
_score = _score+4;
msg(4);
break;
default:
msg(0);
break;
}
_scoreFrame.html("分数："+_score)
}
var action = function(obj)
{
if(typeof obj == "undefined") return;
var _idArr = obj.attr("id").split('-');
obj.attr("id",_idArr[0]+"-"+_idArr[1]);
obj.find("img:eq(0)").hide(500);
obj.click(function(){
clickFunc(_idArr[0]+"-"+_idArr[1]);
});
}
var random = function(n)
{
return Math.floor(Math.random()*n+1);
}
var msg = function(level)
{
_msgFrame.show(500);
if(level == -1)
{
_msgFrame.html("时间到啦！");
_table.hide();
return;
}
_msgFrame.html(level+"连击 +"+level+"分");
}
initStatus();
initBlock();
}
var imgData = [
{ index:1, img:"1.gif" },
{ index:2, img:"2.gif" },
{ index:3, img:"3.gif" },
{ index:4, img:"4.gif" },
{ index:5, img:"5.gif" },
{ index:6, img:"6.gif" }
];
$("#t").game(imgData,{row:10,cell:20});
</script>
</body>
</html>
JQUERY写的小小游戏
4星 · 超过85%的资源 需积分: 10 94 浏览量
2011-06-19
20:20:37
上传
评论 2
收藏 29KB RAR 举报 
JQUERY写的小小游戏.rar （8个子文件） 
JsGame 
1.gif 537B 4.gif 597B 3.gif 640B
jquery.js 70KB 5.gif 670B 2.gif 469B
index.html 6KB 6.gif 614B资源评论
SummerSun-Tx2014-06-27我看着有点困难，我是入门者，是太笨了么。。。。- William_20132013-07-02注释应再详细点……并且感觉程序有点麻烦……
- tomatojacky2012-09-24写的不错，就是注释应该再详细些
- 安静的蜗牛2012-06-06没有说明 一开始没看懂 不过学习了
lqh36722012-04-18程式不太好，但可以学习一下
