[html5游戏开发]经典的推箱子

本文转自:http://blog.csdn.net/lufy_legend/article/details/8607933

开言:

lufylegend.js引擎已经更新到1.6以上了,虽然我陆陆续续发布了一些教程,也提供了一些简单的游戏示例,但是一直以来也没有制作几款完整的作品来,实在也是自己一个人时间太有限了,接下来的时间,我会尽可能的使用lufylegend.js引擎开发几款完整的作品,来增加一下这个引擎的说服力,希望喜欢html5,喜欢游戏开发的朋友多提些意见。

这一次先来看一个经典的推箱子游戏,相信大家也都知道这款游戏,推箱子游戏最早源于日本,是一款极其锻炼逻辑思考能力的游戏,箱子只能推不能拉,玩家必须在一个有限的空间里,将所有的箱子归位,如下图所示。

[转][html5游戏开发]经典的推箱子_第1张图片

图1



这是我用最新版lufylegend.js引擎开发的,想挑战一下的朋友,可以点击下面的游戏链接试一下自己能通过几关。

http://lufylegend.com/demo/box

游戏一共6关,我在游戏里加入了排名系统,每过一关可以上传自己的成绩,跟大家比拼一下,或者您也可以将自己的过关方法心得等回复到文章下面。

 

制作开始

好了,废话说完了,现在来看看如何来制作这款游戏。

一,首先,你需要下载lufylegend.js引擎

下面是我在博客的lufylegend-1.6.0发布帖

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

 

下面一步步来进入开发正题。

二,绘制背景和箱子

我们先来准备一张图,


图2

如果我们将上面的图平均分割成5份,那么他们的序号分别为0,1,2,3,4。

我们利用上面5个小图片就可以拼接任意的房间以及房间内箱子的摆放。

比如,我博客一开始的示例图1,它是游戏第一关的截图,要绘制这个房间,首先要知道这些图片应该摆放的位置,我们预先准备一个数组。

 

[javascript] view plain copy print ?
  1. var stage01 = [  
  2. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],  
  3. [-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],  
  4. [-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],  
  5. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  
  6. [-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],  
  7. [-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],  
  8. [-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],  
  9. [-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],  
  10. [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]  
  11. ];  
var stage01 = [
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1],
[-1,-1, 1, 1, 1, 1, 1, 1,-1,-1,-1],
[-1,-1, 1, 0, 0, 0, 0, 1, 1,-1,-1],
[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
[-1,-1, 1, 4, 4, 0, 4, 4, 1,-1,-1],
[-1,-1, 1, 0, 0, 4, 0, 0, 1,-1,-1],
[-1,-1, 1, 1, 0, 0, 0, 0, 1,-1,-1],
[-1,-1,-1, 1, 1, 1, 1, 1, 1,-1,-1],
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1]
];
上面的-1表示不摆放,然后0,1,4等分别对应着 图2中的序号。

 

按照这个数组来绘制房间就简单了,看下面的函数

 

[javascript] view plain copy print ?
  1. function drawFloor(x,y){  
  2.     if(list[y][x] < 0)return;  
  3.     var bitmap = new LBitmap(bitmapDataList[list[y][x]]);  
  4.     bitmap.x = x*STEP;  
  5.     bitmap.y = y*STEP;  
  6.     boxLayer.addChild(bitmap);  
  7. }  
function drawFloor(x,y){
	if(list[y][x] < 0)return;
	var bitmap = new LBitmap(bitmapDataList[list[y][x]]);
	bitmap.x = x*STEP;
	bitmap.y = y*STEP;
	boxLayer.addChild(bitmap);
}
这个list数组就是上面的stage01数组,参数x,y分别是数组的列和行的序号,STEP是每个小图片的长度,绘制一个小图块,其实我就是建立了一个LBitmap对象。

 

关于LSprite,LBitmap等对象是lufylegend.js引擎中很常用的对象,关于它们的用法,请大家参照官方的API文档,或者看我以前的一些文章来了解一下,这里不加赘述了。

当然,一开始,房间里要有箱子,箱子一开始的位置也是需要预先设置好的,我们同样建立一个数组。

 

[javascript] view plain copy print ?
  1. var box01 = [  
  2. {x:3,y:3},  
  3. {x:4,y:3},  
  4. {x:5,y:3},  
  5. {x:5,y:5},  
  6. {x:6,y:5},  
  7. {x:7,y:5}  
  8. ];  
var box01 = [
{x:3,y:3},
{x:4,y:3},
{x:5,y:3},
{x:5,y:5},
{x:6,y:5},
{x:7,y:5}
];
绘制箱子的函数如下

 

 

[javascript] view plain copy print ?
  1. function drawBox(){  
  2.     var bitmap;  
  3.     for(var i=0;i<boxList[stageIndex].length;i++){  
  4.         bitmap = new LBitmap(bitmapDataList[2]);  
  5.         bitmap.x = boxList[stageIndex][i].x*STEP;  
  6.         bitmap.y = boxList[stageIndex][i].y*STEP;  
  7.         boxLayer.addChild(bitmap);  
  8.         nowBoxList.push(bitmap);  
  9.     }  
  10. }  
function drawBox(){
	var bitmap;
	for(var i=0;i<boxList[stageIndex].length;i++){
		bitmap = new LBitmap(bitmapDataList[2]);
		bitmap.x = boxList[stageIndex][i].x*STEP;
		bitmap.y = boxList[stageIndex][i].y*STEP;
		boxLayer.addChild(bitmap);
		nowBoxList.push(bitmap);
	}
}

 

上面,我同样利用LBitmap对象来显示这些箱子,nowBoxList数组用来储存这些已经加载到游戏界面上的箱子对象,之后用来判断游戏过关。

因为stage01数组中的4就表示箱子需要还原的位置,所以在判断游戏是否过关的时候,只需要判断下这些位置是否与所有箱子的位置重合,判断方法如下。

 

[javascript] view plain copy print ?
  1. function checkBox(){  
  2.     var bitmap,x,y,win=true;  
  3.     list = [];  
  4.     for(var i=0;i<stageList[stageIndex].length;i++){  
  5.         list.push(stageList[stageIndex][i].join(",").split(","));  
  6.     }  
  7.       
  8.     for(var i=0;i<nowBoxList.length;i++){  
  9.         bitmap = nowBoxList[i];  
  10.         x = bitmap.x / STEP;  
  11.         y = bitmap.y / STEP;  
  12.         if(list[y][x] == 4){  
  13.             bitmap.bitmapData = bitmapDataList[3];  
  14.         }else{  
  15.             bitmap.bitmapData = bitmapDataList[2];  
  16.             win = false;  
  17.         }  
  18.         list[y][x] += 10;  
  19.     }  
  20.     if(win)gameClearShow();  
  21. }  
function checkBox(){
	var bitmap,x,y,win=true;
	list = [];
	for(var i=0;i<stageList[stageIndex].length;i++){
		list.push(stageList[stageIndex][i].join(",").split(","));
	}
	
	for(var i=0;i<nowBoxList.length;i++){
		bitmap = nowBoxList[i];
		x = bitmap.x / STEP;
		y = bitmap.y / STEP;
		if(list[y][x] == 4){
			bitmap.bitmapData = bitmapDataList[3];
		}else{
			bitmap.bitmapData = bitmapDataList[2];
			win = false;
		}
		list[y][x] += 10;
	}
	if(win)gameClearShow();
}
代码我是直接从程序中截取的,所以出现了些新的数组和对象。

 

stageList储存了所有的关卡信息,stageIndex是当前关卡的序号,stageList[stageIndex]就可以获取当前关卡的信息,bitmapDataList数组储存了图1中小图片的LBitmapData对象,这些暂且不说,关键是下面。

 

[javascript] view plain copy print ?
  1. if(list[y][x] == 4){  
  2.     bitmap.bitmapData = bitmapDataList[3];  
  3. }else{  
  4.     bitmap.bitmapData = bitmapDataList[2];  
  5.     win = false;  
  6. }  
		if(list[y][x] == 4){
			bitmap.bitmapData = bitmapDataList[3];
		}else{
			bitmap.bitmapData = bitmapDataList[2];
			win = false;
		}
函数中循环了所有箱子的位置,如果他们的位置的序号为4,则表示该箱子已经归位,全部归位表示过关,否则游戏继续,返回false。

 

三,主人公登场,推动箱子。

同样准备一张图片,如下


图3

人物走动动画,当然就需要lufylegend引擎中另一个重要的对象LAnimation,它专门用来顺序播放图片以形成动画,具体用法请参照官方API文档。

下面是主人公的构造器

 

[javascript] view plain copy print ?
  1. /** 
  2.  * 循环事件  
  3.  * @param data 图片数据 
  4.  * @param row 图片分割行数 
  5.  * @param col 图片分割列数 
  6.  **/  
  7. function Character(data,row,col){  
  8.     base(this,LSprite,[]);  
  9.     var self = this;  
  10.     //设定人物动作速度   
  11.     self.speed = 2;  
  12.     self.speedIndex = 0;  
  13.     //设定人物大小   
  14.     data.setProperties(0,0,data.image.width/col,data.image.height/row);  
  15.     //得到人物图片拆分数组   
  16.     var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);  
  17.     //设定人物动画   
  18.     self.anime = new LAnimation(this,data,list);  
  19.     //设定不移动   
  20.     self.move = false;  
  21.     //在一个移动步长中的移动次数设定   
  22.     self.moveIndex = 0;  
  23. };  
/**
 * 循环事件 
 * @param data 图片数据
 * @param row 图片分割行数
 * @param col 图片分割列数
 **/
function Character(data,row,col){
	base(this,LSprite,[]);
	var self = this;
	//设定人物动作速度
	self.speed = 2;
	self.speedIndex = 0;
	//设定人物大小
	data.setProperties(0,0,data.image.width/col,data.image.height/row);
	//得到人物图片拆分数组
	var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
	//设定人物动画
	self.anime = new LAnimation(this,data,list);
	//设定不移动
	self.move = false;
	//在一个移动步长中的移动次数设定
	self.moveIndex = 0;
};
主人公如何推动箱子,看下面的onmove函数

 

 

[javascript] view plain copy print ?
  1. /** 
  2.  * 开始移动  
  3.  **/  
  4. Character.prototype.onmove = function (){  
  5.     var self = this;  
  6.     //设定一个移动步长中的移动次数   
  7.     var ml_cnt = 4;  
  8.     //计算一次移动的长度   
  9.     var ml = STEP/ml_cnt;  
  10.     //根据移动方向,开始移动   
  11.     switch (self.direction){  
  12.         case UP:  
  13.             self.y -= ml;  
  14.             if(box)box.y -= ml;  
  15.             break;  
  16.         case LEFT:  
  17.             self.x -= ml;  
  18.             if(box)box.x -= ml;  
  19.             break;  
  20.         case RIGHT:  
  21.             self.x += ml;  
  22.             if(box)box.x += ml;  
  23.             break;  
  24.         case DOWN:  
  25.             self.y += ml;  
  26.             if(box)box.y += ml;  
  27.             break;  
  28.     }  
  29.     self.moveIndex++;  
  30.     //当移动次数等于设定的次数,开始判断是否继续移动   
  31.     if(self.moveIndex >= ml_cnt){  
  32.         self.moveIndex = 0;  
  33.         box = null;  
  34.         self.move = false;  
  35.         checkBox();  
  36.     }  
  37. };  
/**
 * 开始移动 
 **/
Character.prototype.onmove = function (){
	var self = this;
	//设定一个移动步长中的移动次数
	var ml_cnt = 4;
	//计算一次移动的长度
	var ml = STEP/ml_cnt;
	//根据移动方向,开始移动
	switch (self.direction){
		case UP:
			self.y -= ml;
			if(box)box.y -= ml;
			break;
		case LEFT:
			self.x -= ml;
			if(box)box.x -= ml;
			break;
		case RIGHT:
			self.x += ml;
			if(box)box.x += ml;
			break;
		case DOWN:
			self.y += ml;
			if(box)box.y += ml;
			break;
	}
	self.moveIndex++;
	//当移动次数等于设定的次数,开始判断是否继续移动
	if(self.moveIndex >= ml_cnt){
		self.moveIndex = 0;
		box = null;
		self.move = false;
		checkBox();
	}
};
可以看到,箱子是不是跟着主人公一起走,关键是要看box这个变量,这个变量的值是在下面的checkRoad函数中设置的。

 

 

[javascript] view plain copy print ?
  1. Character.prototype.checkRoad = function (dir){  
  2.     var self = this;  
  3.     var tox,toy;  
  4.     //开始计算移动目的地的坐标   
  5.     switch (dir){  
  6.         case UP:  
  7.             tox = 0;  
  8.             toy = -1;  
  9.             break;  
  10.         case LEFT:  
  11.             tox = -1;  
  12.             toy = 0;  
  13.             break;  
  14.         case RIGHT:  
  15.             tox = 1;  
  16.             toy = 0;  
  17.             break;  
  18.         case DOWN:  
  19.             tox = 0;  
  20.             toy = 1;  
  21.             break;  
  22.     }  
  23.     if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;  
  24.     if(list[self.y/STEP + toy][self.x/STEP + tox]>4){  
  25.         if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 || list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;  
  26.         box = getBox(self.x + tox*STEP,self.y + toy*STEP);  
  27.     }  
  28.     return true;  
  29. };  
Character.prototype.checkRoad = function (dir){
	var self = this;
	var tox,toy;
	//开始计算移动目的地的坐标
	switch (dir){
		case UP:
			tox = 0;
			toy = -1;
			break;
		case LEFT:
			tox = -1;
			toy = 0;
			break;
		case RIGHT:
			tox = 1;
			toy = 0;
			break;
		case DOWN:
			tox = 0;
			toy = 1;
			break;
	}
	if(list[self.y/STEP + toy][self.x/STEP + tox]==1)return false;
	if(list[self.y/STEP + toy][self.x/STEP + tox]>4){
		if(list[self.y/STEP + toy*2][self.x/STEP + tox*2]==1 || list[self.y/STEP + toy*2][self.x/STEP + tox*2]>4)return false;
		box = getBox(self.x + tox*STEP,self.y + toy*STEP);
	}
	return true;
};
其实,就是判断一下主人公要走的方向的前方是不是有障碍物,如果障碍物是墙则不可移动,如果是箱子的话,就要看看箱子的后面是不是有障碍物,如果有则不可移动,否则箱子就需要跟着主人公一起移动,将box设置为主人公前方的箱子即可。
上面这个函数,是在人物即将发生移动的时候被调用的,如下。

 

 

[javascript] view plain copy print ?
  1. /** 
  2.  * 改变人物方向,并判断是否可移动 
  3.  **/  
  4. Character.prototype.changeDir = function (dir){  
  5.     var self = this;  
  6.     if(self.move)return;  
  7.     self.direction = dir;  
  8.     self.anime.setAction(dir);  
  9.     if(!self.checkRoad(dir))return;  
  10.     self.move = true;  
  11.     steps.text = parseInt(steps.text) + 1;  
  12. };  
/**
 * 改变人物方向,并判断是否可移动
 **/
Character.prototype.changeDir = function (dir){
	var self = this;
	if(self.move)return;
	self.direction = dir;
	self.anime.setAction(dir);
	if(!self.checkRoad(dir))return;
	self.move = true;
	steps.text = parseInt(steps.text) + 1;
};
当图1中的方向图标被按下的时候,根据点击的方向,来实现人物的移动。

 

点击方向图标的方法当然是鼠标事件

[javascript] view plain copy print ?
  1. ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);  
ctrlLayer.addEventListener(LMouseEvent.MOUSE_UP,onCtrl);
然后在onCtrl函数中根据点击的位置,来进行相应的移动。

 

 

[javascript] view plain copy print ?
  1. function onCtrl(event){  
  2.     var ctrlSize = 60;  
  3.     if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){  
  4.         if(event.selfY >= 0 && event.selfY <= ctrlSize){  
  5.             player.changeDir(UP);  
  6.         }else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){  
  7.             player.changeDir(DOWN);  
  8.         }  
  9.     }else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){  
  10.         if(event.selfX >= 0 && event.selfX <= ctrlSize){  
  11.             player.changeDir(LEFT);  
  12.         }else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){  
  13.             player.changeDir(RIGHT);  
  14.         }  
  15.     }  
  16. }  
function onCtrl(event){
	var ctrlSize = 60;
	if(event.selfX >= ctrlSize && event.selfX <= ctrlSize*2){
		if(event.selfY >= 0 && event.selfY <= ctrlSize){
			player.changeDir(UP);
		}else if(event.selfY >= ctrlSize*2 && event.selfY <= ctrlSize*3){
			player.changeDir(DOWN);
		}
	}else if(event.selfY >= ctrlSize && event.selfY <= ctrlSize*2){
		if(event.selfX >= 0 && event.selfX <= ctrlSize){
			player.changeDir(LEFT);
		}else if(event.selfX >= ctrlSize*2 && event.selfX <= ctrlSize*3){
			player.changeDir(RIGHT);
		}
	}
}
这样,游戏的主要功能部分,就介绍完了。

 

四,建一个开始画面

如下。

 

图4
使用lufylegend.js引擎做个界面,可以说毫无难度,代码如下。

 

 

[javascript] view plain copy print ?
  1. function GameLogo(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.       
  5.     var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];  
  6.     var bitmap,logoLayer;  
  7.       
  8.     logoLayer = new LSprite();  
  9.     logoLayer.graphics.drawRect(6,"#FF7F50",[0,0,LGlobal.width,LGlobal.height],true,"#FFDAB9");  
  10.     self.addChild(logoLayer);  
  11.       
  12.     logoLayer = new LSprite();  
  13.     logoLayer.x = 50;  
  14.     logoLayer.y = 50;  
  15.     for(var i=0;i<logolist.length;i++){  
  16.         for(var j=0;j<logolist.length;j++){  
  17.             bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);  
  18.             bitmap.x = j*STEP;  
  19.             bitmap.y = i*STEP;  
  20.             logoLayer.addChild(bitmap);  
  21.         }  
  22.     }  
  23.     bitmap = new LBitmap(new LBitmapData(imglist["player"],0,0,STEP,STEP));  
  24.     bitmap.x = STEP;  
  25.     bitmap.y = 2*STEP;  
  26.     logoLayer.addChild(bitmap);  
  27.     self.addChild(logoLayer);  
  28.       
  29.     labelText = new LTextField();  
  30.     labelText.rotate = -20;  
  31.     labelText.color = "#4B0082";  
  32.     labelText.font = "HG行書体";  
  33.     labelText.size = 100;  
  34.     labelText.x = 300;  
  35.     labelText.y = 50;  
  36.     labelText.stroke = true;  
  37.     labelText.lineWidth = 4;  
  38.     labelText.text = "推";  
  39.     self.addChild(labelText);  
  40.       
  41.     labelText = new LTextField();  
  42.     labelText.color = "#4B0082";  
  43.     labelText.font = "HG行書体";  
  44.     labelText.size = 100;  
  45.     labelText.x = 450;  
  46.     labelText.y = 60;  
  47.     labelText.stroke = true;  
  48.     labelText.lineWidth = 4;  
  49.     labelText.text = "箱";  
  50.     self.addChild(labelText);  
  51.       
  52.     labelText = new LTextField();  
  53.     labelText.rotate = 20;  
  54.     labelText.color = "#4B0082";  
  55.     labelText.font = "HG行書体";  
  56.     labelText.size = 100;  
  57.     labelText.x = 600;  
  58.     labelText.y = 60;  
  59.     labelText.stroke = true;  
  60.     labelText.lineWidth = 4;  
  61.     labelText.text = "子";  
  62.     self.addChild(labelText);  
  63.       
  64.     labelText = new LTextField();  
  65.     labelText.color = "#B22222";  
  66.     labelText.font = "HG行書体";  
  67.     labelText.size = 40;  
  68.     labelText.x = 100;  
  69.     labelText.y = 250;  
  70.     labelText.stroke = true;  
  71.     labelText.lineWidth = 4;  
  72.     labelText.text = "Click to Start Game !!";  
  73.     self.addChild(labelText);  
  74.       
  75.     var social = new Social();  
  76.     social.x = 220;  
  77.     social.y = 330;  
  78.     self.addChild(social);  
  79.       
  80.     labelText = new LTextField();  
  81.     labelText.font = "HG行書体";  
  82.     labelText.size = 14;  
  83.     labelText.x = 400;  
  84.     labelText.y = 390;  
  85.     labelText.text = "- Html5 Game Engine lufylegend.js";  
  86.     self.addChild(labelText);  
  87.     labelText = new LTextField();  
  88.     labelText.color = "#006400";  
  89.     labelText.font = "HG行書体";  
  90.     labelText.size = 14;  
  91.     labelText.x = 400;  
  92.     labelText.y = 410;  
  93.     labelText.text = "http://www.lufylegend.com/lufylegend";  
  94.     self.addChild(labelText);  
  95.       
  96.     self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);  
  97. };  
function GameLogo(){
	base(this,LSprite,[]);
	var self = this;
	
	var logolist = [[1,1,1,1],[1,2,4,1],[1,4,2,1],[1,1,1,1]];
	var bitmap,logoLayer;
	
	logoLayer = new LSprite();
	logoLayer.graphics.drawRect(6,"#FF7F50",[0,0,LGlobal.width,LGlobal.height],true,"#FFDAB9");
	self.addChild(logoLayer);
	
	logoLayer = new LSprite();
	logoLayer.x = 50;
	logoLayer.y = 50;
	for(var i=0;i<logolist.length;i++){
		for(var j=0;j<logolist.length;j++){
			bitmap = new LBitmap(bitmapDataList[logolist[i][j]]);
			bitmap.x = j*STEP;
			bitmap.y = i*STEP;
			logoLayer.addChild(bitmap);
		}
	}
	bitmap = new LBitmap(new LBitmapData(imglist["player"],0,0,STEP,STEP));
	bitmap.x = STEP;
	bitmap.y = 2*STEP;
	logoLayer.addChild(bitmap);
	self.addChild(logoLayer);
	
	labelText = new LTextField();
	labelText.rotate = -20;
	labelText.color = "#4B0082";
	labelText.font = "HG行書体";
	labelText.size = 100;
	labelText.x = 300;
	labelText.y = 50;
	labelText.stroke = true;
	labelText.lineWidth = 4;
	labelText.text = "推";
	self.addChild(labelText);
	
	labelText = new LTextField();
	labelText.color = "#4B0082";
	labelText.font = "HG行書体";
	labelText.size = 100;
	labelText.x = 450;
	labelText.y = 60;
	labelText.stroke = true;
	labelText.lineWidth = 4;
	labelText.text = "箱";
	self.addChild(labelText);
	
	labelText = new LTextField();
	labelText.rotate = 20;
	labelText.color = "#4B0082";
	labelText.font = "HG行書体";
	labelText.size = 100;
	labelText.x = 600;
	labelText.y = 60;
	labelText.stroke = true;
	labelText.lineWidth = 4;
	labelText.text = "子";
	self.addChild(labelText);
	
	labelText = new LTextField();
	labelText.color = "#B22222";
	labelText.font = "HG行書体";
	labelText.size = 40;
	labelText.x = 100;
	labelText.y = 250;
	labelText.stroke = true;
	labelText.lineWidth = 4;
	labelText.text = "Click to Start Game !!";
	self.addChild(labelText);
	
	var social = new Social();
	social.x = 220;
	social.y = 330;
	self.addChild(social);
	
	labelText = new LTextField();
	labelText.font = "HG行書体";
	labelText.size = 14;
	labelText.x = 400;
	labelText.y = 390;
	labelText.text = "- Html5 Game Engine lufylegend.js";
	self.addChild(labelText);
	labelText = new LTextField();
	labelText.color = "#006400";
	labelText.font = "HG行書体";
	labelText.size = 14;
	labelText.x = 400;
	labelText.y = 410;
	labelText.text = "http://www.lufylegend.com/lufylegend";
	self.addChild(labelText);
	
	self.addEventListener(LMouseEvent.MOUSE_UP,menuShow);
};
就是显示几张图片,以及添加一些文字,LTextField对象的使用方法请参考官方API文档。

 

五,建一个选择画面

如下。

 

图5
代码如下。

 

 

[javascript] view plain copy print ?
  1. function GameMenu(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.       
  5.     var menuLayer;  
  6.     menuLayer = new LSprite();  
  7.     menuLayer.graphics.drawRect(6,"#ADD8E6",[0,0,LGlobal.width,LGlobal.height],true,"#E6E6FA");  
  8.     self.addChild(menuLayer);  
  9.       
  10.     labelText = new LTextField();  
  11.     labelText.color = "#B22222";  
  12.     labelText.font = "HG行書体";  
  13.     labelText.size = 40;  
  14.     labelText.x = 200;  
  15.     labelText.y = 30;  
  16.     labelText.stroke = true;  
  17.     labelText.lineWidth = 4;  
  18.     labelText.text = "Please select !!";  
  19.     menuLayer.addChild(labelText);  
  20.     for(var i=0;i<stageMenu.length;i++){  
  21.         self.stageVsMenu(stageMenu[i]);  
  22.     }  
  23. };  
  24. GameMenu.prototype.stageVsMenu = function(obj){  
  25.     var self = this;  
  26.       
  27.     var menuButton,btn_up;  
  28.     if(obj.open){  
  29.         btn_up = new LSprite();  
  30.         btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#191970");  
  31.         labelText = new LTextField();  
  32.         labelText.color = "#ffffff";  
  33.         labelText.font = "HG行書体";  
  34.         labelText.size = 20;  
  35.         labelText.x = 40;  
  36.         labelText.y = 5;  
  37.         btn_up.addChild(labelText)  
  38.         labelText.text = "第"+(obj.index+1)+"关";  
  39.           
  40.         labelText = new LTextField();  
  41.         labelText.color = "#ffffff";  
  42.         labelText.font = "HG行書体";  
  43.         labelText.size = 12;  
  44.         labelText.x = 10;  
  45.         labelText.y = 40;  
  46.         btn_up.addChild(labelText)  
  47.         labelText.text = "step:"+obj.step;  
  48.         labelText = new LTextField();  
  49.         labelText.color = "#ffffff";  
  50.         labelText.font = "HG行書体";  
  51.         labelText.size = 12;  
  52.         labelText.x = 10;  
  53.         labelText.y = 60;  
  54.         btn_up.addChild(labelText)  
  55.         labelText.text = "times:"+obj.times;  
  56.           
  57.           
  58.         var btn_down = new LSprite();  
  59.         btn_down.graphics.drawRect(2,"#000",[0,0,150,90],true,"#2F4F4F");  
  60.         labelText = new LTextField();  
  61.         labelText.color = "#ffffff";  
  62.         labelText.font = "HG行書体";  
  63.         labelText.size = 20;  
  64.         labelText.x = 40;  
  65.         labelText.y = 5;  
  66.         labelText.text = "第"+(obj.index+1)+"关";  
  67.         btn_down.addChild(labelText);  
  68.           
  69.         labelText = new LTextField();  
  70.         labelText.color = "#ffffff";  
  71.         labelText.font = "HG行書体";  
  72.         labelText.size = 12;  
  73.         labelText.x = 10;  
  74.         labelText.y = 40;  
  75.         btn_down.addChild(labelText)  
  76.         labelText.text = "step:"+obj.step;  
  77.         labelText = new LTextField();  
  78.         labelText.color = "#ffffff";  
  79.         labelText.font = "HG行書体";  
  80.         labelText.size = 12;  
  81.         labelText.x = 10;  
  82.         labelText.y = 60;  
  83.         btn_down.addChild(labelText)  
  84.         labelText.text = "times:"+obj.times;  
  85.           
  86.         menuButton = new LButton(btn_up,btn_down);  
  87.         menuButton.obj = obj;  
  88.         menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){  
  89.             gameStart(self.obj.index);  
  90.         });  
  91.     }else{  
  92.         btn_up = new LSprite();  
  93.         btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#708090");  
  94.         labelText = new LTextField();  
  95.         labelText.color = "#ffffff";  
  96.         labelText.font = "HG行書体";  
  97.         labelText.size = 20;  
  98.         labelText.x = 40;  
  99.         labelText.y = 5;  
  100.         btn_up.addChild(labelText)  
  101.         labelText.text = "???";  
  102.         menuButton = btn_up;  
  103.     };  
  104.     self.addChild(menuButton);  
  105.     menuButton.x = obj.x * 220 + 100;   
  106.     menuButton.y = obj.y * 140 + 130;  
  107. }  
function GameMenu(){
	base(this,LSprite,[]);
	var self = this;
	
	var menuLayer;
	menuLayer = new LSprite();
	menuLayer.graphics.drawRect(6,"#ADD8E6",[0,0,LGlobal.width,LGlobal.height],true,"#E6E6FA");
	self.addChild(menuLayer);
	
	labelText = new LTextField();
	labelText.color = "#B22222";
	labelText.font = "HG行書体";
	labelText.size = 40;
	labelText.x = 200;
	labelText.y = 30;
	labelText.stroke = true;
	labelText.lineWidth = 4;
	labelText.text = "Please select !!";
	menuLayer.addChild(labelText);
	for(var i=0;i<stageMenu.length;i++){
		self.stageVsMenu(stageMenu[i]);
	}
};
GameMenu.prototype.stageVsMenu = function(obj){
	var self = this;
	
	var menuButton,btn_up;
	if(obj.open){
		btn_up = new LSprite();
		btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#191970");
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 20;
		labelText.x = 40;
		labelText.y = 5;
		btn_up.addChild(labelText)
		labelText.text = "第"+(obj.index+1)+"关";
		
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 12;
		labelText.x = 10;
		labelText.y = 40;
		btn_up.addChild(labelText)
		labelText.text = "step:"+obj.step;
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 12;
		labelText.x = 10;
		labelText.y = 60;
		btn_up.addChild(labelText)
		labelText.text = "times:"+obj.times;
		
		
		var btn_down = new LSprite();
		btn_down.graphics.drawRect(2,"#000",[0,0,150,90],true,"#2F4F4F");
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 20;
		labelText.x = 40;
		labelText.y = 5;
		labelText.text = "第"+(obj.index+1)+"关";
		btn_down.addChild(labelText);
		
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 12;
		labelText.x = 10;
		labelText.y = 40;
		btn_down.addChild(labelText)
		labelText.text = "step:"+obj.step;
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 12;
		labelText.x = 10;
		labelText.y = 60;
		btn_down.addChild(labelText)
		labelText.text = "times:"+obj.times;
		
		menuButton = new LButton(btn_up,btn_down);
		menuButton.obj = obj;
		menuButton.addEventListener(LMouseEvent.MOUSE_UP,function(event,self){
			gameStart(self.obj.index);
		});
	}else{
		btn_up = new LSprite();
		btn_up.graphics.drawRect(2,"#000",[0,0,150,90],true,"#708090");
		labelText = new LTextField();
		labelText.color = "#ffffff";
		labelText.font = "HG行書体";
		labelText.size = 20;
		labelText.x = 40;
		labelText.y = 5;
		btn_up.addChild(labelText)
		labelText.text = "???";
		menuButton = btn_up;
	};
	self.addChild(menuButton);
	menuButton.x = obj.x * 220 + 100; 
	menuButton.y = obj.y * 140 + 130;
}

好了,游戏主要的代码已经都贴出来了。

 

源码

由于上面的代码比较零碎,而且我也只是挑中心部分说了一下,下面提供完整游戏源代码,想研究一下的朋友可以点击下面的连接下载。

 

http://lufy.netne.net/lufylegend_download/box.rar

 

注意:该附件只包含本次文章源码,lufylegend.js引擎请到http://lufylegend.com/lufylegend进行下载。

 

转载请注明:转自lufy_legend的博客

 

欢迎继续关注我的博客

http://blog.csdn.net/lufy_legend

你可能感兴趣的:(html5)