整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

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


          家好，今天給大家介紹一款，用canvas制作的躲避球小游戲html5源碼 （圖1）。送給大家哦，獲取方式在本文末尾。
          圖1
          按上下左右鍵可以控制紅球的移動躲避綠色小球，按ctrl可以加大綠球的速度，游戲會自動計時，紅球碰撞到綠球游戲結束（圖2）
          圖2
          源碼完整，需要的朋友可以下載學習（圖3）
          圖3
          本源碼編碼：10142，需要的朋友，點擊下面的鏈接后，搜索10142，即可獲取。
          「鏈接」
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精久久一区二区三区|
精品一区二区三区水蜜桃|
免费高清av一区二区三区|
亚洲一区二区三区AV无码|
国产美女av在线一区|
久久亚洲色一区二区三区|
国产成人无码一区二区三区|
国产成人精品无码一区二区|
人妻久久久一区二区三区|
中文字幕乱码亚洲精品一区|
日韩AV片无码一区二区不卡
|
日韩伦理一区二区|
一区二区三区精品视频|
久久一区不卡中文字幕|
亚洲爆乳精品无码一区二区|
能在线观看的一区二区三区|
亚洲色精品aⅴ一区区三区|
无码精品人妻一区二区三区人妻斩|
中文字幕一区二区三区5566|
日韩三级一区二区|
秋霞午夜一区二区|
无码aⅴ精品一区二区三区|
精品一区二区无码AV|
99在线精品一区二区三区|
人妻内射一区二区在线视频|
一区二区三区国产精品
|
国产一区二区三区樱花动漫|
国产综合无码一区二区三区|
在线精品视频一区二区|
成人一区二区免费视频|
性色AV一区二区三区天美传媒|
jazzjazz国产精品一区二区|
激情亚洲一区国产精品|
精品乱子伦一区二区三区|
无码国产精品久久一区免费|
国产一区二区三区高清在线观看
|
国产精品日本一区二区不卡视频|
日本一道高清一区二区三区|
国产一区二区在线看|
国产丝袜无码一区二区视频|
亚洲电影唐人社一区二区|