嘿～你们知不知道？最近几年，HTML5技术发展得超级快大家都喜欢用它来做游戏，就像我们现在就要把这Lufylegend.js用起来，然后做个有趣的对对碰HTML5游戏！做好后，再用这技巧转为手机App，这样就能在安卓手机上玩这个小游戏！读完这篇文章，应该能让你们明白更多关于游戏制作和转换为App的过程喔，没什么难的，试试看吧～
下载lufylegend.js引擎
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"}
];
首先想玩HTML5游戏就要先下一个LufyLegend.js引擎。这新版本里有个主要功能就是LLoadManage类，可以用来加载图片、运行js代码和看文档，超级方便。安装好后，你就知道它到底有多厉害~
开发对对碰类游戏
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();
}
);
}
function addGem(){
stage.setStage(stage.num + 1);
gemLayer.removeAllChild();
list = [];
//添加宝石
for(i=0;i<8;i++){
list.push([]);
for(var j=0;j>> 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>> 0)+1;
g.change(num);
}
}
}while(clearList.length > 0);
}
接下来，我带你们玩个特殊的HTML5版对对碰游戏规则超简单，只要把同一种类石头串成手链，就能疯狂轰炸！当某个石头被打中后，它会暂时变淡哟。等所有石头都试过之后，恭喜你闯入下一关！哥们儿们，赶紧上榜开战！
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]);
}
添加宝石元素
接下来，我们要给游戏里面放上整整 64 颗宝石，每颗宝石都有自己独特的颜色！首先，就要用 Gem 类来搭建宝石这个概念，这是用 LSprite 编制而成的，再加上可以展示宝石样子的 LBitmap。这么一挂，屏幕上肯定就布满五颜六色、形状各异的宝石了
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);
}
检测可消除宝石
function addClearList(clearList,checkList){
if(checkList.length >= 3){
clearList = clearList.concat(checkList)
}
return clearList;
}
搞个小程序检查下Clear！这样好玩儿多了，我们要看看那些宝石能不能消失掉！首先在横着找起，再朝着四面八方仔细瞧瞧，有合适的就加入clearList等清除
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,onDown); backLayer.addEventListener(LMouseEvent.MOUSE_UP,onUp);
模拟划动事件
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");
}
咱们的lufylegend.js这么酷炫的小游戏引擎，鼠标不能直接拖屏可真够遗憾的…不用担心！我知道你们一定听过 MOUSE_DOWN和MOUSE_UP这两个家伙，它们可是定位鼠标点位的好帮手哟~所以，咱们得动动脑筋想想办法，想个法子用 onDown函数和 move函数假装出”滑动”的感觉来，这样大家就能玩儿的更尽兴了~
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("down");
return;
}else if(my < -50){
move("up");
return;
}
}
mouse_down_obj.isMouseDown = false;
}
消除可消除宝石
找出能消掉的宝石，然后点击它消磁屏幕上滑动换位，把能消的石头丢到角落。别忘记微调下剩下的宝石，让游戏更好玩儿！
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
});
}
}
添加时间限制
想让游戏更刺激吗？超简单，加上一个时间限制就成！用我们熟知的 Clock 类计算下还剩多少秒，然后在 ENTER_FRAME 时间轴事件的 onframe 函数中画出一个倒计时钟就可以了。时间到的话游戏就会 Over，完全不用担心~
转换为Android本地化App
搞定HTML5游戏后，想把它变成安卓App？没问题！第一步就得给你的新项目起个好听点儿的名字，选个好用的SDK哦；接下来，在项目里建立个叫做”assets”的文件夹，放上你已经上传好的游戏和Lufylegend引擎；再按照下面的图来编辑一下main.xml文件，添加一个WebView；搞定了这些，别忘了手工修改一下Main.java文件，透过WebView来展示你辛苦做出来的html网页。
哟吼，这里是我们制作HTML5游戏转变成安卓版App的攻略！希望这份简单易懂的教程能帮你搞定，让你尽情享受自制游戏的乐趣和满足感！
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 mx){
time = 0.3*((gem.x-mx) / 60 >>> 0);
if(maxTime 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 >> 0);
if(maxTime < time)maxTime = time;
fun = null;
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 my){
time = 0.3*((gem.y-my) / 60 >>> 0);
if(maxTime 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 >> 0);
if(maxTime < time)maxTime = time;
fun = null;
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
});
}
。
评论0