多特效代码请添加HTML5前端交流群581549454

废话不多说，上代码

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;

}

更多特效代码请添加HTML5前端交流群581549454

网页源码

<!DOCTYPE html PUBLIC "-//aaa-cg//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">

<html xmlns="http://www.aaa-cg.com.cn?lcc">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jQuery网页消除方块小游戏源码</title>

<link rel="stylesheet" href="_css/jwe.css" />

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.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>