html5程序員jQuery網頁消除方塊小游戲源碼

多特效代碼請添加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;

}

網頁源碼

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

<head>

<title>jQuery網頁消除方塊小游戲源碼</title>

<!--<script src="_js/ui/jquery.ui.core.js"></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>

</h3>

<p>

總分：<span id="finSumScore">0</span>

</p>

<p>

<br />

GAME OVER

</p>

</div>

</div>

</body>

</html>

用sketch預先設計好UI界面

要想成為真正的全棧開發者，自己會設計那是必不可少

sketch工具

切圖片導入hype編碼

實現方式：

無聊花了半天做的，其實就是拿一個<audio>實現的，把audio給隱藏了..然后獲取播放進度，切歌就是替換audio的src路徑，<audio>標簽有很多api足以自己動手做一個播放器了，無需第三方庫，用到了jQuery，不過這個只是個demo做著玩兒的，還有些功能沒寫了。

在線預覽地址

http://show.lslbk.cn/html5/musicApp/musicApp.html

源碼demo下載地址：

http://myblog-1253111993.cosgz.myqcloud.com/file/musicAppH5.zip

子創意，關注前沿科技和創業資訊，提供專業的互聯網開發，產品設計，媒體運營支撐服務和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，點擊上方【訂閱】，訂閱橘子創意。

一、摘要

今天給大家介紹有關HTML5移動開發APP開發框架,這里主要給大家介紹10款移動APP開發框架,下一篇文章將給大家具體演示一下如何用這些框架來搭建一個移動APP應用.

十款移動APP開發框架:

1.jquery mobile框架

2.bootstrap框架

3.ionic框架

4.Mobile Angular UI框架

5.Intel XDK框架

6.Appcelerator Titanium框架

7.Sencha Touch框架

8.Kendo UI框架

9.PhoneGap框架

10.mui框架

1.jquery mobile框架

jQuery Mobile是jQuery 在手機上和平板設備上的版本。jQuery Mobile 不僅會給主流移動平臺帶來jQuery核心庫，而且會發布一個完整統一的jQuery移動UI框架。支持全球主流的移動平臺。

2.bootstrap框架

Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。

它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。

Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。

國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。

3.ionic框架

Ionic 是一個強大的 HTML5 應用程序開發框架，可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。

Ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。

4.Mobile Angular UI框架

Mobile Angular UI是使用 bootstrap 3 和 AngularJS 的響應式移動開發HTML5框架。

Mobile Angular UI的關鍵字有：

1.Bootstrap 3

2.AngularJS

Bootstrap 3 Mobile組件，比如switches, overlays和sidebars，這些都是bootstrap中沒有的。

AngularJS modules，比如 angular-route, angular-touch 和 angular-animate

響應式媒體查詢是將bootstrap作為單獨的文件，你只需要包含你所需要的東西。

Mobile Angular UIu并不包含任何jQuery依賴，你需要做的只是通過一些AngularJS指令創建友好的用戶體驗。

5.Intel XDK框架

Intel發布了其首個版本基于web的編程工具，可幫助開發者為Android和iOS開發移動應用。

這款免費的軟件名為Intel XDK，實際上這是今年2月份Intel收購的AppMobi軟件的重新包裝后的版本，所以并非新鮮事物。開發者可用此軟件開發基于HTML5的應用，并用于移動設備中。

6.Appcelerator Titanium框架

Titanium 是一個跟手機平臺無關的開發框架，用來開發具有本地應用效果的Web應用。當前主要支持 iPhone 和 Android 手機。

主要提供的API包括：

2D/3D animations

Geo-location, compass, and maps

Augmented reality features

Social app authentication and native client support for email

SOAP or REST API calls

Audio, video, and image capture and playback

Taps into local filesystem and SQL lite databases

Accesses photo gallery or address data

橘子創意，關注前沿科技和創業資訊，提供專業的互聯網開發，產品設計，媒體運營支撐服務和咨詢。如有需求歡迎朋友們合作和咨詢。

更多資訊，搜索微信公眾號juzimedia，關注橘子創意。

在線咨詢

上一篇：HTML5技術不知從何學起，那這12個網站你值得擁有
下一篇：jsp技術被淘汰了？那還要不要學它？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

html5程序員jQuery網頁消除方塊小游戲源碼

css源碼：

更多特效代碼請添加HTML5前端交流群581549454

網頁源碼

用sketch預先設計好UI界面

切圖片導入hype編碼

實現方式：

在線預覽地址

源碼demo下載地址：

您的項目需求