jQuery消除方块小游戏源码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery消除方块小游戏源码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>jQuery消除方块小游戏源码</title>
<link rel="stylesheet" href="_css/jwe.css" />

<script src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="_js/method.js"></script>

<!--<script src="_js/ui/jquery.ui.core.js"></script>
<script src="_js/ui/jquery.ui.widget.js"></script>
<script src="_js/ui/jquery.ui.mouse.js"></script>
<script src="_js/ui/jquery.ui.draggable.js"></script>-->

<script type="text/javascript" src="_js/jwe.js"></script>
<script type="text/javascript" src="_js/jwe.core.js"></script>
<script type="text/javascript" src="_js/jwe.game.js"></script>
<script type="text/javascript" src="_js/jwe.ctrl.js"></script>
<script type="text/javascript" src="_js/jwe.animate.js"></script>
<script type="text/javascript" src="_js/jwe.arithmetic.js"></script>

<script>
$(document).ready(function(){
//		_dir = "x1a2";
//		_extName = "png";
	_bgExtName="png";
	_UniTypeNumber =6;
	
	
/*		$("#btnAgain")
	.bind("click",function(){	gameRest1Day();	});*/

	$("#btnReset")
	.bind("click",function(){	location.reload();	});

	$("#btnReset2")
	.bind("click",function(){	location.reload();	});

	gameStart();

});

</script>
</head>

<body>
<div id="bgTmp1"></div>
<div id="bgTmp2"><img src="_img/bg/bg000.png" /></div>
<div id="uGirl1"></div>

<h2 id="topH" align="center">总分：<span id="sumScore">0</span></h2>

<div id="scorePanel"><hr id="cLine" /></div>
<table id="panelTb" class="panelTb" align="center" ></table>
<div id="gameTimeBar"><div id="gameTime">???</div></div>

<h3 id="btmH" align="center">
	<!--<button id="btnAgain" class="aC1 clr1">休息一下</button>-->
	<button id="btnReset" class="aC1 clr2">重头开始</button>
</h3>

<div id="txtTit" class="warn1"></div>
<div id="txtTit2" class="warn2"></div>

<div id="debugPanel"></div>
<div id="cartoonPanel" class="cartoonPanel"></div>

<div id="endPanel">
	<h3 align="center">成绩统计</h3>
	<p>
		总分：<span id="finSumScore">0</span>
		<!--<a id="fuckA">Let it Go</a>-->
	</p>
	<p>
		<div align="center" id="finUni"></div>
		<br />
		GAME OVER
	</p>
	<div id="btnPnl" align="center">
		<button id="btnReset2" class="aC2 clr2">再玩一次</button>
	</div>
	<div id="aSpeech"></div>
</div>

</body>
</html>

JS代码(jwe.js):

 /*!* 总脚本*/
//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@//预置游戏变量：//说明：这些变量是可在一定范围下自由更改的。var _rowNum= 7;
	//游戏盘行数var _colNum = 7;
	//游戏盘列数var _sexyMoviePicNum = 459;
	//性感动画图片的数量_dir = "default";
	//默认图片目录（同时也是背景图片目录名）_extName = "png";
	//默认图片扩展名_bgExtName = "jpg";
	//默认背景图片扩展名_UniTypeNumberMax = 11;
	//总共最大的棋子种类数_UniTypeNumber = 5;
	//可用的棋子的种类数_oneSexyMovieCost = -1;
	//打开一个动画所需的花费_fullGameTime = 100;
	//游戏总时间//@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@var _gameTitle = "超级英雄宝石方块";
	//-------------------------------------------------------------------------------------/**调试栏信息*/
function debug(info){
	if(info==null || info.length==0) return;
	var txt0 = $("#debugPanel").html();
	var txt1 = txt0+"<br>"+info;
	if(txt1.length>400){
	txt1=txt1.substring(txt1.length-400);
}
$("#debugPanel").html(txt1);
}
//-------------------------------------------------------------------------------------/**框架初始化*/
function initContainer(){
	//新随机生成应用棋子代码if(_UniTypeNumber > _UniTypeNumberMax) _UniTypeNumber = _UniTypeNumberMax;
	createAppCode();
	//默认背景showBg(999);
	//游戏盘var tb = $("#panelTb");
	var html="";
	for(var i=0;
	i<_rowNum;
	i++){
	html+="<tr>";
	for(var j=0;
	j<_colNum;
	j++){
	var id= "td_"+i+"_"+j;
	//注意：id格式非常重要！记录了行号和列号，一直要用到html+="<td id='"+id+"'></td>";
}
html+="</tr>";
}
tb.append(html);
	//计分牌html="";
	var scP = $("#scorePanel");
	for(var i=0;
	i<_UniTypeNumber;
	i++){
	var N = _ucArr[i];
	//!!!html+="<div class='sDiv' id='sDiv"+N+"'>";
	html+=uniCode(N) + "x" + scoCode(N);
	html+="</div>";
}
scP.append(html);
	//游戏时间条：_gameTime = _fullGameTime;
	animGameTimeBar(_gameTime);
	//----------------//位置调整方法：resizeContainer();
	//----------------}
/*重新调整容器及内容*/
function resizeContainer(){
	var tb = $("#panelTb");
	var wi=-1,hi=-1;
	var o=null;
	var WI = $(window).width();
	var HI = $(window).height();
	var minBD = Math.min(WI,HI);
	var hi_top= parseInt($("#topH").css("height"));
	var hi_btm= parseInt($("#btmH").css("height"));
	//调整容器尺寸var tdHi = Math.round((minBD - hi_top - hi_btm*2) / _rowNum);
	var tdWi = tdHi;
	var os = tb.find("td");
	os.each(function(){
	$(this).css({
	width:tdWi,height:tdHi}
);
}
);
	//计分栏尺寸：o= $("#scorePanel");
	o.css({
	height:tb.css("height"),fontSize:tdHi /4}
);
	o.find(".uni").css({
	width:tdWi *2/3,height:tdHi *2/3}
);
	//背景层$("#bgTmp1").css({
	width:WI,height:HI}
);
	$("#bgTmp2").css({
	width:WI,height:HI}
);
	//gi面板：o = $("#uGirl1");
	hi = HI * 0.75;
	wi = hi * 497 / 400;
	o.css({
	width:wi,height:hi,left:WI -wi,top:HI -hi}
);
	//动画面板1o = $("#cartoonPanel");
	hi = HI -20;
	wi = hi *1280/960;
	o.css({
	width:wi,height:hi,left:(WI-wi)/2,top:(HI-hi)/2}
);
	//提醒文字：var minB = Math.min(WI,HI);
	var fSz = minB/5;
	var fSz2=minB/15;
	var pTop = (HI-fSz)/3;
	var pTop2 = (HI-fSz)/2;
	$(".warn1").css({
	paddingTop:pTop,fontSize:fSz}
);
	$(".warn2").css({
	top:pTop2,fontSize:fSz2}
);
	//游戏时间条:o = $("#gameTimeBar");
	hi = tdHi * _rowNum;
	wi = tdWi/3;
	o.css({
	width:wi,height:hi,left:parseInt( (WI-parseInt(tb.css("width")))/2 ) - wi -10,top:parseInt(tb.position().top)+5}
);
	//结束面板：$("#endPanel").css({
	height:HI,fontSize:minBD/20}
);
	$("#endPanel #btnReset2").css({
	fontSize:minBD/20}
);
	//最终释放按钮://$("#endPanel #fuckA").css({
	fontSize:minBD/40}
);
}
/*** 清理*/
function clearContainer(){
	clearTimeout(_itv_run);
	clearTimeout(_itv_score);
	clearTimeout(_itv_animate);
	$("#panelTb .uni").remove();
	//清除棋子小单元$("#debugPanel").html("");
	_sumScore = 0;
	_ani_thread_pool =0;
	_focusUni =null;
	$("#cartoonPanel").hide(0);
	$("#gameTimeText").text(_fullGameTime);
}
/*生成一套全新的棋子* @param evt:激活事件标识。*/
function newStuff(){
	var os = $("#panelTb td");
	os.each(function(){
	createUni(this);
}
);
}
/***消除满足条件的棋子*@param os 要删除的棋子对象列表* return Array:需要向下移动的容器的列号集合*/
function KillUnits(os){
	if(os==null || os.length<=0) return null;
	var str = "";
	//记录需要向下移动的列信息for(var i=0;
	i<os.length;
	i++){
	id = $(os[i]).parent()[0].id;
	//当前被消除的棋子的单元格的id//~~~~~~~~~~~~~//获得列号：var ss = id.split("_");
	str += ss[2]+",";
	//~~~~~~~~~~~~~killUni(os[i]);
}
var arr = str.split(",");
	//去重var arr2 = arr.unique4();
	//debug(arr2)return arr2;
}
/**棋子下落*@param dropingColArr:需要向下移动的容器的列号集合*/
function DropDownUnits(dropingColArr){
	if(dropingColArr==null || dropingColArr=="") return;
	var idsArr=new Array();
	//TODO 获取每个下降列中每个格子最终应有的棋子信息for(var i=0;
	i<dropingColArr.length;
	i++){
	var c = dropingColArr[i];
	if(c=="")continue;
	var rNArr = new Array();
	//记录最低空格子以上的有内容的格子的行号var deepEm = -1;
	//记录最下面的一个空位置的行号（注意默认值必须小于零！）var emptyNum = 0;
	//记录该列的空格子数//第1步：从下到上记录所有有棋子的格子信息for(var r=_rowNum-1;
	r>=0;
	r--){
	var id = "td_"+r+"_"+c;
	var TD = $("#"+id);
	var o = TD.find(".uni");
	if(o.length>0){
	//不为空if(deepEm>=0) rNArr.push(r);
	//记录存在的行号（空位置以上的）}
else{
	if(deepEm<0) deepEm = r;
	emptyNum ++;
}
}
//第2步：这些现有的棋子最终应该紧密排列在最下面的格子里，顺序不变var rowN = deepEm;
	for(var k=0;
	k<rNArr.length;
	k++){
	var id = "td_"+ rNArr[k] +"_"+c;
	var id2 = "td_"+ rowN +"_"+c;
	var TD = $("#"+id);
	//源单元格var TD2 = $("#"+id2);
	//目标单元格copyUniFromTD(TD,TD2);
	//-------复制棋子rowN--;
	idsArr.push(id2);
	//+}
//第3步：由此上面空出的所有格子应该从框架外新生成棋子，落到里面for(var k=0;
	k<emptyNum;
	k++){
	var id = "td_"+k+"_"+c;
	var TD = $("#"+id);
	//目标单元格newSkyUniAtTD(TD,emptyNum);
	//--------空降新棋子idsArr.push(id);
	//+}
}
idsArr.sort();
	moveToZeroPlace(idsArr);
	//动画实现}
/***计分面板单元根据分数排序*/
function SortScorePanle(){
	clearTimeout(_itv_score);
	_itv_score = setTimeout(function(){
	var o,o1;
	var sbs =$("#scorePanel .scBar");
	//------------------------//排序var arr=new Array(sbs.length);
	for(var i=0;
	i<sbs.length;
	i++){
	var id = sbs[i].lang;
	var v = parseInt( $(sbs[i]).text() );
	arr[i] = new Array(id,v);
}
//debug(arr)arr.bubbleSort_Array();
	//debug(arr)//------------------------//改变位置及高亮:if(_bestUType!=null){
	o = $("#sDiv"+_bestUType);
	//原来的冠军o.removeClass("hiScore");
	//原来的冠军取消高亮}
var base = $("#cLine");
	for(var i=0;
	i<arr.length;
	i++){
	o1 = $("#sDiv"+arr[i][0]);
	o1.insertAfter(base);
}
o1.addClass("hiScore");
	//新的冠军颜色高亮var newT = arr[arr.length-1][0];
	//新的冠军编号if(_bestUType != newT){
	_bestUType = newT;
	//记录新的冠军编号showBg(_bestUType);
	//切换高分girl背景showGi1(_bestUType);
	//高分girl现身1}
}
,500);
}
/**游戏数据统计*/
function GameDataStatisic(){
	//统计整理资料：var eP = $("#endPanel");
	var o2 = eP.find("#finUni");
	var html="最强的超级英雄:";
	if(_bestUType!=null){
	html+= "<a id='aWinner'>"+ uniCode(_bestUType) +"</a>";
	html+= "<b>进无止境！</b>";
}
else{
	html +="啊...竟然一个都没有?<br>阁下的运气真是...";
}
o2.html(html);
	//if(_sumScore>0){
	//eP.find("#fuckA").show();
	//}
}

CSS代码(jwe.css):

/* -----样式表----- */
 @charset "utf-8";body{background-color:#ddd;overflow:hidden;background-position:center center;}
body *{font-family:"微软雅黑";}
h1,h2,h3,h4{margin:0;color:#000;background-color:#eee;}
a,a:link,button{cursor:pointer;}
hr{margin:2px;}
.aC1,.aC1:link{margin:0 5px 0 5px;font-size:16px;width:120px;height:26px;display:inline-block;border:1px solid #FFF;border-bottom:2px solid #aaa;text-align:center;vertical-align:middle;}
.clr1{background-color:#3CF !important;color:#fff !important;}
.clr2{background-color:#3CF !important;color:#000 !important;}
.aC1:hover{border:1px solid #000;border-bottom:2px solid #fff;color:#FFF;}
.aC1:active{background-color:#FF6;color:#333;}
.aC2,.aC2:link{padding:8px;display:inline-block;border:2px solid #ccc;text-align:center;vertical-align:middle;}
.tmpFlo{padding:0;margin:0;position:absolute;z-index:99;}
/*游戏棋盘*/
.panelTb{border:6px solid #ccc;text-align:center;vertical-align:middle;border-collapse:collapse;background-color:#000;overflow:hidden;cursor:pointer;/*!*/
}
.panelTb td{text-align:center;vertical-align:middle;margin:0;padding:0;/*border:1px solid #ddd;*/
}
.panelTb .uni,.tmpFlo .uni{padding:0;margin:0;position:relative;display:block;text-align:center;vertical-align:middle;cursor:pointer;}
.panelTb .uni img,.tmpFlo .uni img{width:100%;height:100%;}
.warn1{display:none;position:absolute;font-weight:900;color:red;text-align:center;width:100%;height:100%;left:0;top:0;background-color:#fff;z-index:900;}
.warn2{display:none;position:absolute;color:#000;text-align:center;width:100%;left:0;top:0;background-color:#3CF;font-weight:bold;z-index:899;}
/*调试栏*/
#debugPanel{/* display:none;*/
background-color:#FFF;position:absolute;height:100%;left:0;top:0;color:#000;z-index:999;overflow:scroll;}
/*棋子计分面板*/
#scorePanel{position:absolute;float:left;font-size:12px;color:#396;}
#scorePanel .hiScore{color:#FF0;}
#scorePanel div{white-space:nowrap;}
#scorePanel .uni{display:inline-block;margin-right:5px;cursor:pointer;}
#scorePanel .uni img{width:100%;height:100%;border:1px solid #666;}
#scorePanel .uni img:hover{border-color:#FFF;}
/*棋子单独计数栏*/
.scBar{font-weight:bold;}
/*复背景层2*/
#bgTmp1,#bgTmp2{position:absolute;margin:0;padding:0;width:100%;height:100%;left:0;top:0;background-position:center center;}
#bgTmp2 img{width:100%;height:100%;border:none;}
#bgTmp1{z-index:-99;/*!*/
}
#bgTmp2{z-index:-98;/*!*/
}
/*播放动画的容器*/
.cartoonPanel{display:none;position:absolute;margin:0;padding:0;border:1px solid #ccc;z-index:99;/*!*/
}
.cartoonPanel img{width:100%;height:100%;border:none;}
/*游戏时间条*/
#gameTimeBar{position:absolute;border:2px solid #fff;border-top:none;background-color:#555;}
#gameTimeBar #gameTime{color:#000;text-align:center;vertical-align:bottom;width:100%;height:50%;background-color:#CFC;position:inherit;bottom:0;}
#uGirl1{position:absolute;bottom:0;right:0;width:497px;height:400px;background-position:right bottom;z-index:-98;/*!*/
}
#uGirl1 img{width:100%;height:100%;border:none;}
/*游戏结束后信息面板*/
#endPanel{display:none;position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;/*opacity:0.95;*/
background-color:#FFF;color:#000;z-index:200;}
#endPanel #finSumScore{color:#090;font-weight:bold;}
#endPanel p{width:100%;padding:0;margin:0;}
#endPanel #finUni{position:absolute;width:100%;padding:0;margin:0;background-color:#6CF;}
#endPanel .uni{position:inherit;width:20%;}
#endPanel .uni img{border:none;width:100%;height:100%;}
/*#fuckA{display:none;padding:2px 6px 3px 6px;border:2px solid #333;background-color:#F0C;color:#000;}
#fuckA:hover{background-color:#FFC;}
*/
#btnPnl{position:fixed;width:100%;text-align:center;bottom:10px;z-index:800;}
#endPanel #uGirl1{z-index:798 !important;}
#endPanel #aSpeech{padding:5px;position:absolute;background-color:#eee;color:#06C;opacity:0.8;}

附件:下载该文件资源,减少时间成本(增值服务)