用HTML5來開發一款android本地化App遊戲-寶石碰碰

本次來說一說如何利用lufylegend.js引擎製作一款HTML5遊戲後，將其轉換為android本地化的App應用，轉換過程其實很簡單，下面一步步來做說明。

首先來開發一個類似於對對碰的遊戲，不過此遊戲玩法為在下原創，如有雷同，純屬巧合，遊戲介面如下。

遊戲操作：上下左右划動螢幕，來操作寶石向不同的方向移動。

遊戲規則：當有三個一樣的寶石相鄰則消除，被消除過一次的寶石會變成半透明，當所有寶石都被消除一次後，則進入下一關。

遊戲測試連接：

http://lufylegend.com/demo/GemGem

製作開始

一，準備

首先，需要下載lufylegend.js引擎，下面是我在部落格的lufylegend-1.7.0發布帖

http://blog.csdn.net/lufy_legend/article/details/8719768

二，遊戲開發

引擎lufylegend1.7.0中擴充了LLoadManage靜態類，可以讀取圖片，js檔案以及文字檔，本次遊戲開發就來體驗一下這個新功能，首先看下面數組

代碼清單1

var loadData = [{path:"../jquery.js",type:"js"},{path:"./js/share.js",type:"js"},{path:"./js/Social.js",type:"js"},{path:"./js/GameRanking.js",type:"js"},{path:"./js/GameLogo.js",type:"js"},{path:"./js/GameClear.js",type:"js"},{path:"./js/Gem.js",type:"js"},{path:"./js/Stage.js",type:"js"},{path:"./js/Clock.js",type:"js"},{path:"./js/Point.js",type:"js"},{path:"./js/GetPoint.js",type:"js"},{path:"./js/Bullet.js",type:"js"},{path:"./js/Event.js",type:"js"},{path:"./js/function.js",type:"js"},{path:"./js/GameBody.js",type:"js"},{name:"num.+",path:"./images/plus.png"},{name:"num.0",path:"./images/0.png"},{name:"num.1",path:"./images/1.png"},{name:"num.2",path:"./images/2.png"},{name:"num.3",path:"./images/3.png"},{name:"num.4",path:"./images/4.png"},{name:"num.5",path:"./images/5.png"},{name:"num.6",path:"./images/6.png"},{name:"num.7",path:"./images/7.png"},{name:"num.8",path:"./images/8.png"},{name:"num.9",path:"./images/9.png"},{name:"back",path:"./images/back.png"},{name:"line",path:"./images/line.png"},{name:"clear",path:"./images/clear.png"},{name:"gem01",path:"./images/gem01.png"},{name:"gem02",path:"./images/gem02.png"},{name:"gem03",path:"./images/gem03.png"},{name:"gem04",path:"./images/gem04.png"},{name:"gem05",path:"./images/gem05.png"},{name:"gem06",path:"./images/gem06.png"},{name:"gem07",path:"./images/gem07.png"},{name:"gem08",path:"./images/gem08.png"},{name:"gem09",path:"./images/gem09.png"},{name:"ico_sina",path:"./images/ico_sina.gif"},{name:"ico_qq",path:"./images/ico_qq.gif"},{name:"ico_facebook",path:"./images/ico_facebook.png"},{name:"ico_twitter",path:"./images/ico_twitter.png"}];

將需要的js檔案和圖片檔案都加到數組內，如果需要負載檔案為js檔案時，需要指定type為js，如果載入的檔案為圖片，則type可以不設定。

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

代碼清單2

function main(){loadingLayer = new LoadingSample3();addChild(loadingLayer);LLoadManage.load(loadData,function(progress){loadingLayer.setProgress(progress);},function(result){LGlobal.setDebug(true);datalist = result;removeChild(loadingLayer);loadingLayer = null;gameInit();});}

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

代碼清單3

function addGem(){stage.setStage(stage.num + 1);gemLayer.removeAllChild();list = [];//添加寶石for(i=0;i<8;i++){list.push([]);for(var j=0;j<8;j++){num = (Math.random()*9 >>> 0)+1;g = new Gem(num);g.x = j*60;g.y = i*60+120;gemLayer.addChild(g);list[i].push(g);}}//檢驗可消除寶石do{clearList = checkClear();if(clearList.length > 0){for(i=0;i<clearList.length;i++){g = clearList[i];num = (Math.random()*9 >>> 0)+1;g.change(num);}}}while(clearList.length > 0);}

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

代碼清單4

function Gem(num){var self = this;base(self,LSprite,[]);self.num = num;self.bitmap = new LBitmap(new LBitmapData(datalist["gem0"+num]));self.bitmap.x=self.bitmap.y=10;self.addChild(self.bitmap);}Gem.prototype.change = function (num){var self = this;self.num = num;self.bitmap.bitmapData = new LBitmapData(datalist["gem0"+num]);}

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

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

代碼清單5

clearList = [];//橫向檢索for(i=0;i<8;i++){checkList = [list[i][0]];for(j=1;j<8;j++){if(checkList[checkList.length - 1].num == list[i][j].num){checkList.push(list[i][j]);}else{clearList = addClearList(clearList,checkList);checkList = [list[i][j]];}}clearList = addClearList(clearList,checkList);}//縱向檢索for(i=0;i<8;i++){checkList = [list[0][i]];for(j=1;j<8;j++){if(checkList[checkList.length - 1].num == list[j][i].num){checkList.push(list[j][i]);}else{clearList = addClearList(clearList,checkList);checkList = [list[j][i]];}}clearList = addClearList(clearList,checkList);}

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

代碼清單6

function addClearList(clearList,checkList){if(checkList.length >= 3){clearList = clearList.concat(checkList)}return clearList;}

遊戲操作需要划動螢幕，但是在lufylegend.js引擎中，是沒有划動螢幕的事件的，所以我通過下面MOUSE_DOWN,MOUSE_UP擷取點擊時和點擊後的位置，來類比一下划動事件。

代碼清單7

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

再來看看具體做法，先是onDown函數。

代碼清單8

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

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

在來看看onUp函數。

代碼清單9

function onUp(e){list[mouse_down_obj.cy][mouse_down_obj.cx].graphics.clear();if(new Date().getTime() - mouse_down_obj.time > 500){mouse_down_obj.isMouseDown = false;return;}var mx = e.offsetX - mouse_down_obj.x;var my = e.offsetY - mouse_down_obj.y;if(Math.abs(mx) > Math.abs(my)){if(mx > 50){move("right");return;}else if(mx < -50){move("left");return;}}else{if(my > 50){move("down");return;}else if(my < -50){move("up");return;}}mouse_down_obj.isMouseDown = false;}

函數中通過同樣的方法得到點擊結束時的位置和時間，然後與點擊時刻做比較，最後計算划動的方向，然後根據划動的方向來調用move函數，讓寶石移動。
move函數如下：

代碼清單10

function move(dir){direction = dir;var m = moveGem(dir,8);var mx = m[0],my = m[1];var obj,fun;for(var i=0;i<8;i++){if(mx == 0){obj = list[i][mouse_down_obj.cx];}else{obj = list[mouse_down_obj.cy][i];}if(i < 7){fun = null;}else{fun = function(){hiddenObj.visible = true;checkClear();};}LTweenLite.to(obj,0.3,{ x:obj.x+mx,y:obj.y+my,onComplete:fun,ease:Strong.easeOut});}}

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

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

每次緩動結束，要調用一次checkClear函數，來判斷一下是否有可消除的寶石，如果有則開始消除寶石，如何來消除寶石呢？

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

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

代碼清單11

function moveList(){var gem,time,maxTime,mx,my,fun;maxTime = 0;switch(direction){case "left":for(i=0;i<8;i++){for(j=0;j<8;j++){gem = list[i][j];mx = 60*j;if(gem.x > mx){time = 0.3*((gem.x-mx) / 60 >>> 0);if(maxTime < time)maxTime = time;fun = null;if(gem.x > 420){fun = function(gem){if(gem.x <= 420)gem.visible = true;}}LTweenLite.to(gem,time,{ x:mx,onUpdate:fun,onComplete:fun,ease:Strong.easeOut});}}}break;case "right":for(i=0;i<8;i++){for(j=0;j<8;j++){gem = list[i][j];mx = 60*j;if(gem.x < mx){time = 0.3*((mx-gem.x) / 60 >>> 0);if(maxTime < time)maxTime = time;fun = null;if(gem.x < 0){fun = function(gem){if(gem.x >= 0)gem.visible = true;}}LTweenLite.to(gem,time,{ x:mx,onUpdate:fun,onComplete:fun,ease:Strong.easeOut});}}}break;case "up":for(i=0;i<8;i++){for(j=0;j<8;j++){gem = list[j][i];my = 120+60*j;if(gem.y > my){time = 0.3*((gem.y-my) / 60 >>> 0);if(maxTime < time)maxTime = time;fun = null;if(gem.y > 560){fun = function(gem){if(gem.y <= 560)gem.visible = true;}}LTweenLite.to(gem,time,{ y:my,onUpdate:fun,onComplete:fun,ease:Strong.easeOut});}}}break;case "down":for(i=0;i<8;i++){for(j=0;j<8;j++){gem = list[j][i];my = 120+60*j;if(gem.y < my){time = 0.3*((my-gem.y) / 60 >>> 0);if(maxTime < time)maxTime = time;fun = null;if(gem.y < 120){fun = function(gem){if(gem.y >= 120)gem.visible = true;}}LTweenLite.to(gem,time,{ y:my,onUpdate:fun,onComplete:fun,ease:Strong.easeOut});}}}break;}LTweenLite.to({},maxTime*1.5,{ onComplete:checkStageClear,ease:Strong.easeOut});}

當然，遊戲是有時間限制的，看下面的Clock類。

代碼清單12

function Clock(){var self = this;base(self,LSprite,[]);self.timer = 0;self.addTimer = 0.05;self.graphics.drawArc(5,"#333333",[0,0,70,0,2*Math.PI]);}Clock.prototype.onframe = function (){var self = this;self.timer += self.addTimer;self.graphics.clear();self.graphics.drawArc(10,"#333333",[0,0,70,0,2*Math.PI]);self.graphics.drawArc(5,"#ffffff",[0,0,70,-Math.PI*0.5,Math.PI*self.timer/180-Math.PI*0.5]);}

首先將Clock載入到遊戲中，然後再利用ENTER_FRAME時間軸事件，來不斷調用Clock的onframe不斷的繪製圓弧，當timer的數值大於等於360的時候代表畫完了整個圓弧，那麼遊戲結束。

以上，遊戲的主要原理都介紹完了，下面看看如何來把遊戲轉化為本地App

三，發布本地化App

首先，用Eclipse建立一個Android Project

註：如何搭建Android環境，我就不說了，網上教程多得是，隨便百度一下吧。

然後，填寫項目名稱，並選擇相應的sdk版本，這裡我選了2.2

接著是填寫相應資料，這個隨自己心情就可以了。

接著，重點來了，在工程下的assets檔案夾下，簡曆一個www檔案夾(名字自己隨意)，然後把剛才開發好的遊戲複製到這個檔案夾下，當然，lufylegend引擎也必須複製過來。

接著修改res/layout/main.xml檔案，添加webView，如下

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <WebView        android:id="@+id/webView1"        android:layout_width="match_parent"        android:layout_height="match_parent" /></LinearLayout>

最後，修改Main.java檔案，利用webView來顯示html網頁,如下

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

好了，運行程式吧。

畫面如下：

最後，想要發布遊戲為.apk檔案的話，build一下就好了。

發布後的apk檔案。

結束了，簡單吧？

四，源碼

最後給出本次遊戲的原始碼

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

註：只含遊戲源碼，lufylegend.js引擎請自己到官網下載