本文主要包含HTML5，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.