自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

寶石碰碰：HTML5開發(fā)Android本地化App游戲案例

作者：佚名
移動開發(fā) Android
本次來說一說如何利用lufylegend.js引擎制作一款HTML5游戲后，將其轉(zhuǎn)換為android本地化的App應(yīng)用，轉(zhuǎn)換過程其實很簡單，下面一步步來做說明。

首先來開發(fā)一個類似于對對碰的游戲，游戲界面如下。

游戲操作：上下左右劃動屏幕，來操作寶石向不同的方向移動。

游戲規(guī)則：當(dāng)有三個一樣的寶石相鄰則消除，被消除過一次的寶石會變成半透明，當(dāng)所有寶石都被消除一次后，則進入下一關(guān)。

游戲測試連接：http://lufylegend.com/demo/GemGem

制作開始

一，準(zhǔn)備

首先，需要下載lufylegend.js引擎，下載地址：http://lufylegend.com/lufylegend

二，游戲開發(fā)

引擎lufylegend1.7.0中擴展了LLoadManage靜態(tài)類，可以讀取圖片，js文件以及文本文件，本次游戲開發(fā)就來體驗一下這個新功能，首先看下面數(shù)組：

  1. var loadData = [   
  2. {path:"../jquery.js",type:"js"},   
  3. {path:"./js/share.js",type:"js"},   
  4. {path:"./js/Social.js",type:"js"},   
  5. {path:"./js/GameRanking.js",type:"js"},   
  6. {path:"./js/GameLogo.js",type:"js"},   
  7. {path:"./js/GameClear.js",type:"js"},   
  8. {path:"./js/Gem.js",type:"js"},   
  9. {path:"./js/Stage.js",type:"js"},   
  10. {path:"./js/Clock.js",type:"js"},   
  11. {path:"./js/Point.js",type:"js"},   
  12. {path:"./js/GetPoint.js",type:"js"},   
  13. {path:"./js/Bullet.js",type:"js"},   
  14. {path:"./js/Event.js",type:"js"},   
  15. {path:"./js/function.js",type:"js"},   
  16. {path:"./js/GameBody.js",type:"js"},   
  17. {name:"num.+",path:"./images/plus.png"},   
  18. {name:"num.0",path:"./images/0.png"},   
  19. {name:"num.1",path:"./images/1.png"},   
  20. {name:"num.2",path:"./images/2.png"},   
  21. {name:"num.3",path:"./images/3.png"},   
  22. {name:"num.4",path:"./images/4.png"},   
  23. {name:"num.5",path:"./images/5.png"},   
  24. {name:"num.6",path:"./images/6.png"},   
  25. {name:"num.7",path:"./images/7.png"},   
  26. {name:"num.8",path:"./images/8.png"},   
  27. {name:"num.9",path:"./images/9.png"},   
  28. {name:"back",path:"./images/back.png"},   
  29. {name:"line",path:"./images/line.png"},   
  30. {name:"clear",path:"./images/clear.png"},   
  31. {name:"gem01",path:"./images/gem01.png"},   
  32. {name:"gem02",path:"./images/gem02.png"},   
  33. {name:"gem03",path:"./images/gem03.png"},   
  34. {name:"gem04",path:"./images/gem04.png"},   
  35. {name:"gem05",path:"./images/gem05.png"},   
  36. {name:"gem06",path:"./images/gem06.png"},   
  37. {name:"gem07",path:"./images/gem07.png"},   
  38. {name:"gem08",path:"./images/gem08.png"},   
  39. {name:"gem09",path:"./images/gem09.png"},   
  40. {name:"ico_sina",path:"./images/ico_sina.gif"},   
  41. {name:"ico_qq",path:"./images/ico_qq.gif"},   
  42. {name:"ico_facebook",path:"./images/ico_facebook.png"},   
  43. {name:"ico_twitter",path:"./images/ico_twitter.png"}   
  44. ];   

將需要的js文件和圖片文件都加到數(shù)組內(nèi)，如果需要加載文件為js文件時，需要指定type為js，如果加載的文件為圖片，則type可以不設(shè)定。

讀取過程與之前用法完全一樣：

  1. function main(){   
  2.     loadingLayer = new LoadingSample3();   
  3.     addChild(loadingLayer);    
  4.     LLoadManage.load(   
  5.         loadData,   
  6.         function(progress){   
  7.             loadingLayer.setProgress(progress);   
  8.         },   
  9.         function(result){   
  10.             LGlobal.setDebug(true);   
  11.             datalist = result;   
  12.             removeChild(loadingLayer);   
  13.             loadingLayer = null;   
  14.             gameInit();   
  15.         }   
  16.     );   
  17. }   

下面來向游戲中添加8行8列64塊寶石，具體做法如下：

  1. function addGem(){   
  2.     stage.setStage(stage.num + 1);   
  3.     gemLayer.removeAllChild();   
  4.     list = [];   
  5.     //添加寶石   
  6.     for(i=0;i<8;i++){   
  7.         list.push([]);   
  8.         for(var j=0;j<8;j++){   
  9.             num = (Math.random()*9 >>> 0)+1;   
  10.             g = new Gem(num);   
  11.             g.x = j*60;   
  12.             g.y = i*60+120;   
  13.             gemLayer.addChild(g);   
  14.             list[i].push(g);   
  15.         }   
  16.     }   
  17.     //檢驗可消除寶石   
  18.     do{   
  19.         clearList = checkClear();   
  20.         if(clearList.length > 0){   
  21.             for(i=0;i<clearList.length;i++){   
  22.                 g = clearList[i];   
  23.                 num = (Math.random()*9 >>> 0)+1;   
  24.                 g.change(num);   
  25.             }   
  26.         }   
  27.     }while(clearList.length > 0);   
  28. }   

上面代碼中的Gem對象是一個寶石類，完整代碼如下：

  1. function Gem(num){   
  2.     var self = this;   
  3.     base(self,LSprite,[]);   
  4.     self.num = num;   
  5.     self.bitmap = new LBitmap(new LBitmapData(datalist["gem0"+num]));   
  6.     self.bitmap.x=self.bitmap.y=10;   
  7.     self.addChild(self.bitmap);   
  8.        
  9. }   
  10. Gem.prototype.change = function (num){   
  11.     var self = this;   
  12.     self.num = num;   
  13.     self.bitmap.bitmapData = new LBitmapData(datalist["gem0"+num]);   
  14. }   

Gem類繼承自LSprite，內(nèi)部包含一個LBitmap對象來顯示寶石圖片。

代碼清單3中調(diào)用了checkClear函數(shù)，來檢驗是否有可消除寶石，檢測方法為先進行橫向檢索，然后進行縱向檢索。

  1. clearList = [];   
  2.     //橫向檢索   
  3.     for(i=0;i<8;i++){   
  4.         checkList = [list[i][0]];   
  5.         for(j=1;j<8;j++){   
  6.             if(checkList[checkList.length - 1].num == list[i][j].num){   
  7.                 checkList.push(list[i][j]);   
  8.             }else{   
  9.                 clearList = addClearList(clearList,checkList);   
  10.                 checkList = [list[i][j]];   
  11.             }   
  12.         }   
  13.         clearList = addClearList(clearList,checkList);   
  14.     }   
  15.     //縱向檢索   
  16.     for(i=0;i<8;i++){   
  17.         checkList = [list[0][i]];   
  18.         for(j=1;j<8;j++){   
  19.             if(checkList[checkList.length - 1].num == list[j][i].num){   
  20.                 checkList.push(list[j][i]);   
  21.             }else{   
  22.                 clearList = addClearList(clearList,checkList);   
  23.                 checkList = [list[j][i]];   
  24.             }   
  25.         }   
  26.         clearList = addClearList(clearList,checkList);   
  27.     }   

addClearList函數(shù)作用是將可消除寶石壓入clearList數(shù)組，做法如下：

  1. function addClearList(clearList,checkList){   
  2.     if(checkList.length >= 3){   
  3.         clearList = clearList.concat(checkList)   
  4.     }   
  5.     return clearList;   
  6. }   

游戲操作需要劃動屏幕，但是在lufylegend.js引擎中，是沒有劃動屏幕的事件的，所以我通過下面MOUSE_DOWN,MOUSE_UP獲取點擊時和點擊后的位置，來模擬一下劃動事件。

  1. backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown);   
  2. backLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp);   

再來看看具體做法，先是onDown函數(shù)。

  1. function onDown(e){   
  2.     if(mouse_down_obj.isMouseDown)return;   
  3.     continuous = 0;   
  4.     mouse_down_obj.x = e.offsetX;   
  5.     mouse_down_obj.y = e.offsetY;   
  6.     mouse_down_obj.time = new Date().getTime();   
  7.     mouse_down_obj.cx = e.offsetX/60 >>> 0;   
  8.     mouse_down_obj.cy = (e.offsetY - 120)/60 >>> 0;   
  9.     mouse_down_obj.isMouseDown = true;   
  10.     list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.drawRect(1,"black",[0, 0, 60, 60],true,"#000000");   
  11. }   

通過e.offsetX和e.offsetY來獲取點擊位置，通過getTime()來獲取點擊時刻的時間。

再來看看onUp函數(shù)。

  1. function onUp(e){   
  2.     list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.clear();   
  3.     if(new Date().getTime() - mouse_down_obj.time > 500){   
  4.         mouse_down_obj.isMouseDown = false;   
  5.         return;   
  6.     }   
  7.     var mx = e.offsetX - mouse_down_obj.x;   
  8.     var my = e.offsetY - mouse_down_obj.y;   
  9.     if(Math.abs(mx) > Math.abs(my)){   
  10.         if(mx > 50){   
  11.             move("right");   
  12.             return;   
  13.         }else if(mx < -50){   
  14.             move("left");   
  15.             return;   
  16.         }   
  17.     }else{   
  18.         if(my > 50){   
  19.             move("down");      
  20.             return;   
  21.         }else if(my < -50){   
  22.             move("up");   
  23.             return;   
  24.         }   
  25.     }   
  26.     mouse_down_obj.isMouseDown = false;   
  27. }   

函數(shù)中通過同樣的方法得到點擊結(jié)束時的位置和時間，然后與點擊時刻做比較，最后計算劃動的方向，然后根據(jù)劃動的方向來調(diào)用move函數(shù)，讓寶石移動。

move函數(shù)如下：

  1. function move(dir){   
  2.     direction = dir;   
  3.     var m = moveGem(dir,8);   
  4.     var mx = m[0],my = m[1];   
  5.     var obj,fun;   
  6.     for(var i=0;i<8;i++){   
  7.         if(mx == 0){   
  8.             obj = list[i][mouse_down_obj.cx];   
  9.         }else{   
  10.             obj = list[mouse_down_obj.cy][i];   
  11.         }   
  12.         if(i < 7){   
  13.             fun = null;   
  14.         }else{   
  15.             fun = function(){   
  16.                 hiddenObj.visible = true;   
  17.                 checkClear();   
  18.             };   
  19.         }   
  20.         LTweenLite.to(obj,0.3,   
  21.         {    
  22.             x:obj.x+mx,   
  23.             y:obj.y+my,   
  24.             onComplete:fun,   
  25.             ease:Strong.easeOut   
  26.         });   
  27.        
  28.     }   
  29. }   

下面以向右移動為例來說明一下move函數(shù)的處理過程，如下：

先將最左邊的一個寶石H移到最左邊，然后再利用LTweenLite緩動類將整個一行8個寶石，向右緩動一個單位。向左的話正好相反，向上向下也是同樣的原理。

每次緩動結(jié)束，要調(diào)用一次checkClear函數(shù)，來判斷一下是否有可消除的寶石，如果有則開始消除寶石，如何來消除寶石呢？

我依然以向右劃動來舉例說明，看下面圖片，假設(shè)D1,D2,D3可消除，E4,F4,G4可消除：

那么首先將D1,D2,D3移到左邊邊界外，E4,F4,G4也移到邊界外，表示被消除， 之后對每一行的寶石進行位置判定，如每行的第一個寶石的x坐標(biāo)應(yīng)該是60，第二個為120，以此類推。如果他們不在自己的相應(yīng)位置上，那么將其向左移動到 規(guī)定位置就可以了，寫成代碼的話，如下：

  1. function moveList(){   
  2.     var gem,time,maxTime,mx,my,fun;   
  3.     maxTime = 0;   
  4.     switch(direction){   
  5.         case "left":   
  6.             for(i=0;i<8;i++){   
  7.                 for(j=0;j<8;j++){   
  8.                     gem = list[i][j];   
  9.                     mx = 60*j;   
  10.                     if(gem.x > mx){   
  11.                         time = 0.3*((gem.x-mx) / 60 >>> 0);   
  12.                         if(maxTime < time)maxTime = time;   
  13.                         fun = null;   
  14.                         if(gem.x > 420){   
  15.                             fun = function(gem){   
  16.                                 if(gem.x <= 420)gem.visible = true;   
  17.                             }   
  18.                         }   
  19.                         LTweenLite.to(gem,time,   
  20.                         {    
  21.                             x:mx,   
  22.                             onUpdate:fun,   
  23.                             onComplete:fun,   
  24.                             ease:Strong.easeOut   
  25.                         });   
  26.                     }   
  27.                 }   
  28.             }   
  29.             break;   
  30.         case "right":   
  31.             for(i=0;i<8;i++){   
  32.                 for(j=0;j<8;j++){   
  33.                     gem = list[i][j];   
  34.                     mx = 60*j;   
  35.                     if(gem.x < mx){   
  36.                         time = 0.3*((mx-gem.x) / 60 >>> 0);   
  37.                         if(maxTime < time)maxTime = time;   
  38.                         fun = null;   
  39.                         if(gem.x < 0){   
  40.                             fun = function(gem){   
  41.                                 if(gem.x >= 0)gem.visible = true;   
  42.                             }   
  43.                         }   
  44.                         LTweenLite.to(gem,time,   
  45.                         {    
  46.                             x:mx,   
  47.                             onUpdate:fun,   
  48.                             onComplete:fun,   
  49.                             ease:Strong.easeOut   
  50.                         });   
  51.                     }   
  52.                 }   
  53.             }   
  54.             break;   
  55.         case "up":   
  56.             for(i=0;i<8;i++){   
  57.                 for(j=0;j<8;j++){   
  58.                     gem = list[j][i];   
  59.                     my = 120+60*j;   
  60.                     if(gem.y > my){   
  61.                         time = 0.3*((gem.y-my) / 60 >>> 0);   
  62.                         if(maxTime < time)maxTime = time;   
  63.                         fun = null;   
  64.                         if(gem.y > 560){   
  65.                             fun = function(gem){   
  66.                                 if(gem.y <= 560)gem.visible = true;   
  67.                             }   
  68.                         }   
  69.                         LTweenLite.to(gem,time,   
  70.                         {    
  71.                             y:my,   
  72.                             onUpdate:fun,   
  73.                             onComplete:fun,   
  74.                             ease:Strong.easeOut   
  75.                         });   
  76.                     }   
  77.                 }   
  78.             }   
  79.             break;   
  80.         case "down":   
  81.             for(i=0;i<8;i++){   
  82.                 for(j=0;j<8;j++){   
  83.                     gem = list[j][i];   
  84.                     my = 120+60*j;   
  85.                     if(gem.y < my){   
  86.                         time = 0.3*((my-gem.y) / 60 >>> 0);   
  87.                         if(maxTime < time)maxTime = time;   
  88.                         fun = null;   
  89.                         if(gem.y < 120){   
  90.                             fun = function(gem){   
  91.                                 if(gem.y >= 120)gem.visible = true;   
  92.                             }   
  93.                         }   
  94.                         LTweenLite.to(gem,time,   
  95.                         {    
  96.                             y:my,   
  97.                             onUpdate:fun,   
  98.                             onComplete:fun,   
  99.                             ease:Strong.easeOut   
  100.                         });   
  101.                     }   
  102.                 }   
  103.             }   
  104.             break;   
  105.     }   
  106.     LTweenLite.to({},maxTime*1.5,   
  107.     {    
  108.         onComplete:checkStageClear,   
  109.         ease:Strong.easeOut   
  110.     });   
  111. }   

當(dāng)然，游戲是有時間限制的，看下面的Clock類：

  1. function Clock(){   
  2.     var self = this;   
  3.     base(self,LSprite,[]);   
  4.     self.timer = 0;   
  5.     self.addTimer = 0.05;   
  6.     self.graphics.drawArc(5,"#333333",[0,0,70,0,2*Math.PI]);   
  7.        
  8. }   
  9. Clock.prototype.onframe = function (){   
  10.     var self = this;   
  11.     self.timer += self.addTimer;   
  12.     self.graphics.clear();   
  13.     self.graphics.drawArc(10,"#333333",[0,0,70,0,2*Math.PI]);   
  14.     self.graphics.drawArc(5,"#ffffff",[0,0,70,-Math.PI*0.5,Math.PI*self.timer/180-Math.PI*0.5]);   
  15. }   

首先將Clock加載到游戲中，然后再利用ENTER_FRAME時間軸事件，來不斷調(diào)用Clock的onframe不斷的繪制圓弧，當(dāng)timer的數(shù)值大于等于360的時候代表畫完了整個圓弧，那么游戲結(jié)束。

以上，游戲的主要原理都介紹完了，下面看看如何來把游戲轉(zhuǎn)化為本地App

三，發(fā)布本地化App

首先，用Eclipse新建一個Android Project；

注：如何搭建Android環(huán)境，我就不說了，網(wǎng)上教程多得是，隨便百度一下吧。

然后，填寫項目名稱，并選擇相應(yīng)的sdk版本，這里我選了2.2；

接著是填寫相應(yīng)數(shù)據(jù)，這個隨自己心情就可以了。

接著，重點來了，在工程下的assets文件夾下，簡歷一個www文件夾(名字自己隨意)，然后把剛才開發(fā)好的游戲復(fù)制到這個文件夾下，當(dāng)然，lufylegend引擎也必須復(fù)制過來。

接著修改res/layout/main.xml文件，添加webView，如下：

  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:layout_width="fill_parent"   
  4.     android:layout_height="fill_parent"   
  5.     android:orientation="vertical" >   
  6.     <WebView   
  7.         android:id="@+id/webView1"   
  8.         android:layout_width="match_parent"   
  9.         android:layout_height="match_parent" />   
  10. </LinearLayout>   

最后，修改Main.java文件，利用webView來顯示html網(wǎng)頁，如下：

  1. public class Main extends Activity {   
  2.     /** Called when the activity is first created. */   
  3.     @Override   
  4.     public void onCreate(Bundle savedInstanceState) {   
  5.         super.onCreate(savedInstanceState);   
  6.         setContentView(R.layout.main);   
  7.         WebView webview = (WebView )findViewById(R.id.webView1);   
  8.         webview.getSettings().setJavaScriptEnabled(true);   
  9.         webview.setVerticalScrollbarOverlay(true);   
  10.         webview.loadUrl("file:///android_asset/www/index.html");   
  11.     }   
  12. }   

好了，運行程序吧。畫面如下：

最后，想要發(fā)布游戲為.apk文件的話，build一下就好了。

結(jié)束了，簡單吧？

四，源碼

最后給出本次游戲的源代碼：

http://lufylegend.com/lufylegend_download/GemGem.rar

注：只含游戲源碼，lufylegend.js引擎請自己到官網(wǎng)下載

責(zé)任編輯：徐川 來源： csdn
HTML5游戲Android開發(fā)
相關(guān)推薦

2011-04-25 10:36:39

HTML5

2015-09-14 11:55:32

海外游戲本地化案例

2013-10-21 15:24:49

html5游戲

2013-03-22 16:49:12

2015-07-08 16:38:10

Cocos游戲引擎

2012-01-06 09:45:23

HTML5游戲開發(fā)貨幣化

2013-03-25 17:16:11

2014-12-30 17:13:51

HTML5

2017-01-03 18:09:33

HTML5本地存儲Web

2013-03-21 09:32:41

2014-11-12 16:00:12

火舞游戲

2015-10-23 13:44:14

巴巴獵

2013-01-08 11:00:20

IBMdW

2012-05-03 14:29:53

HTML5

2015-09-06 13:26:41

HTML5游戲開發(fā)工具手游開發(fā)

2015-09-07 14:17:44

HTML5游戲開發(fā)工具

2016-01-05 09:39:32

HTML5游戲開發(fā)工具

2016-10-19 10:49:43

Linux

2015-09-06 09:51:02

html5開發(fā)經(jīng)驗開發(fā)工具

2012-05-15 13:57:41

HTML5
點贊
收藏

51CTO技術(shù)棧公眾號