lufylegend开发HTML5学习

knijiokm

2013-11-25

使用lufylegend制作HTML5 Canvas游戏，不但语法简单，开发迅速，还提供了很好的文档和示例，并且可以配合Box2dWeb制作物理游戏，所以很适合学习。

github地址：https://github.com/lufylegend/lufylegend.js

CSDN博客：http://blog.csdn.net/lufy_legend

HTML代码基本结构：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="lib/lufylegend-1.8.3.min.js"></script> 
	<script type="text/javascript" src="lib/Box2dWeb-2.1.a.3.min.js"></script> 
</head>
<body>
<div id="mylegend">loading...</div>
<script type="text/javascript">
var loader;  
init(50,"mylegend",500,350,main);	//初始化游戏，游戏加载后调用main
function main(){		

}   
</script>
</body>
</html>

加载图片并对图片操作：

var loader;  
init(50,"mylegend",500,350,main);	//初始化游戏，游戏加载后调用main
function main(){		
	loader = new LLoader();  
	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  //注册监听，
	loader.load("png.png","bitmapData");  //读取文件
}  
function loadBitmapdata(event){  
	//var bitmapdata = new LBitmapData(loader.content);  
	var bitmapdata = new LBitmapData(loader.content,0,0,100,100);

	var bitmap = new LBitmap(bitmapdata);  //用来将LBitmapData对象里的Image显示到页面上
	bitmap.x = 50;	//图片摆放位置
	bitmap.y = 50; 
	bitmap.rotate = 60;//图片旋转60度
	bitmap.alpha = 0.4;//图片透明度设置为0.4
	addChild(bitmap);  //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上

	var fps = new FPS();
	addChild(fps);
}

使用精灵操作图片:

var loader;  
init(50,"mylegend",500,350,main);	//初始化游戏，游戏加载后调用main
function main(){		
	loader = new LLoader();  
	loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  //注册监听，
	loader.load("hello.jpg","bitmapData");  //读取文件
}  
function loadBitmapdata(event){  
	var bitmapdata = new LBitmapData(loader.content,0,0,100,100);

	var bitmap = new LBitmap(bitmapdata);  //用来将LBitmapData对象里的Image显示到页面上
	/*bitmap.x = 50;	//图片摆放位置
	bitmap.y = 50; 
	bitmap.rotate = 90;//图片自身旋转60度
	bitmap.alpha = 0.4;//图片透明度设置为0.4
	addChild(bitmap);  //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上*/

	var sprite = new LSprite();
	sprite.x = 50;	//图片摆放位置
	sprite.y = 50; 
	sprite.rotate = 60;//图片以左上角为原点旋转60度
	sprite.alpha = 0.5;//图片透明度设置为0.4
	sprite.addChild(bitmap);
	addChild(sprite);  //将可显示的对象(LSprite,LBitmap等)加入到游戏最底层画板上

	var fps = new FPS();
	addChild(fps);
}

基本图形绘制：

var loader;  
init(50,"mylegend",640,480,main);	//初始化游戏，游戏加载后调用main
function main(){		
	graphics = new LGraphics();
	addChild(graphics);
	graphics.drawLine(2,'#ff0000',[10,10,100,100]); //画线:线宽，颜色，坐标
	//画圆弧:线宽/颜色/[圆心坐标/半径/起始角/跨过角度/是否顺时针]/是否填充/填充颜色
	graphics.drawArc(2,'#ff0000',[200,60,50,90*Math.PI/180,180*Math.PI/180,true],true,'#00ff00');
	//画矩形:线宽/颜色/[起始坐标/矩形宽高]/是否填充/填充颜色
	graphics.drawRect(2,'#ff0000',[300,10,50,50],true,'#ffff00');
	//画圆角矩形，多一个圆角半径参数
	graphics.drawRoundRect(2,'#ff0000',[400,10,50,50,10],true,'#ffff00');
	//画多边形：线宽/颜色/[[],[],[]...(坐标集，至少三个)]/是否填充/填充颜色
	graphics.drawVertices(2,'#ff0000',[[10,110],[10,210],[50,170],[50,150]],true,'#00ff00');
}

使用原生canvas绘图

var loader;  
init(50,"mylegend",640,480,main);	//初始化游戏，游戏加载后调用main
function main(){		
	graphics = new LGraphics();
	addChild(graphics);
	//使用原生canvas绘图
	graphics.add(function(coodx,coody){
		LGlobal.canvas.strokeStyle = "#000000";
		LGlobal.canvas.moveTo(20,20);
		LGlobal.canvas.lineTo(200,200);
		LGlobal.canvas.stroke();
	});
}

使用Sprite的graphic绘图:

var loader;  
init(50,"mylegend",640,480,main);	//初始化游戏，游戏加载后调用main
function main(){  
   var layer = new LSprite();
   addChild(layer);
   layer.graphics.drawRect(1,'#000000',[50,50,100,100]);
   layer.graphics.drawRect(1,'#000000',[170,50,100,100],true,'#cccccc');
}

beginBitmapFill使用位图填充绘图区：

var loader;  
init(50,"mylegend",640,480,main);	//初始化游戏，游戏加载后调用main
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("hello.jpg","bitmapData");  
}  
function loadBitmapdata(event){  
	var bitmapdata = new LBitmapData(loader.content);  
	var backLayer = new LSprite();
	addChild(backLayer);
	backLayer.graphics.beginBitmapFill(bitmapdata);
	//backLayer.graphics.drawArc(1,"#000",[110,80,50,0,Math.PI*2]);
	backLayer.graphics.drawRect(1,"#000",[80,50,70,100]);
}

鼠标事件响应：

init(50,"mylegend",300,300,main);
var field;
function main(){  
   var layer = new LSprite();
   layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
   addChild(layer);
   field = new LTextField();
   field.text = "Wait Click!";
   layer.addChild(field);
   layer.addEventListener(LMouseEvent.MOUSE_DOWN,downshow);
   layer.addEventListener(LMouseEvent.MOUSE_UP,upshow);
}  
function downshow(event){
	field.text = "Mouse Down!";
}
function upshow(event){
	field.text = "Mouse Up!";
}

键盘按键事件响应：

init(50,"mylegend",300,300,main);
var field;
function main(){  
	var layer = new LSprite();
	layer.graphics.drawRect(1,'#cccccc',[0,0,300,300],true,'#cccccc');
	addChild(layer);
	field = new LTextField();
	field.text = "Wait Click!";
	layer.addChild(field);
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,downshow);
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,upshow);
}  
function downshow(event){
	field.text = event.keyCode + " Down!";
}
function upshow(event){
	field.text = event.keyCode + " Up!";
}

copy实例代码。

Box2d碰撞检测部分：

var loader;  
init(15,"mylegend",640,480,main);	//初始化游戏，游戏加载后调用main
var backLayer,cLayer;
function main(){	
	LGlobal.setDebug(true);	//打开调试模式，才能看到图形
	backLayer = new LSprite();	
	addChild(backLayer);	//加入背景层

	LGlobal.box2d = new LBox2d();//创建Box2d对象
	cLayer = new LSprite();	
	cLayer.x = 300;		//指定坐标
	cLayer.y = 390;
	backLayer.addChild(cLayer);
	//addBodyPolygon参数：宽/高/是否动态(0不动)/密度/摩擦/弹性
	cLayer.addBodyPolygon(600,10,0,5,0.4,0.7); //创建矩形当作地板
	
	cLayer = new LSprite();	
	cLayer.x = 300;		//指定坐标
	cLayer.y = 100;
	backLayer.addChild(cLayer);
	cLayer.addBodyPolygon(30,20,1,5,0.4,0.5);	//创建矩形
	cLayer.addBodyCircle(10,20,5,1,5,0.4,0.9);	//创建圆
}

效果如图：
lufylegend开发HTML5学习

为图形添加纹理图片：

init(10,"mylegend",800,400,main);

var backLayer,cLayer,bitmap;
var imglist = {};
var imgData = new Array(
		{name:"face",path:"./hello.jpg"},
		{name:"face1",path:"./hello1.jpg"}
		);
function main(){	
	LGlobal.setDebug(true);	
	backLayer = new LSprite();	
	backLayer.graphics.drawRect(0,"#000000",[0, 0, 600, 400],false);
	addChild(backLayer);	
	LLoadManage.load(imgData,null,gameInit);
}

function gameInit(result){
	imglist = result;	//加载完的图片资源
	
	LGlobal.box2d = new LBox2d();
	cLayer = new LSprite();
	cLayer.x = 300;
	cLayer.y = 390;
	backLayer.addChild(cLayer);
	cLayer.addBodyPolygon(400,10,0,5,0.4,0.2);//画出地板
	
	cLayer = new LSprite();
	cLayer.x = 300;
	cLayer.y = 100;
	backLayer.addChild(cLayer);
	bitmap = new LBitmap(new LBitmapData(imglist["face"],50,50,100,120));
	cLayer.addChild(bitmap);
	cLayer.addBodyPolygon(100,120,1,5,0.4,0.6);//画一个矩形

	cLayer = new LSprite();
	cLayer.x = 310;
	cLayer.y = 20;
	backLayer.addChild(cLayer);
	bitmap = new LBitmapData(imglist["face1"],100,50,190,190);
	cLayer.graphics.beginBitmapFill(bitmap);
	cLayer.graphics.drawArc(1,"#000000",[50,50,50,0,2*Math.PI],true);
	cLayer.addChild(bitmap);
	cLayer.addBodyCircle(50,0,0,1,5,0.4,0.9);//画一个圆
}

效果：

lufylegend开发HTML5学习

使用自带资源加载进度条：

init(50,"mylegend",800,400,main);
function main(){
	backLayer = new LSprite();	
	addChild(backLayer);
	loadingLayer = new LoadingSample1();//使用第一种加载动画，1.8.3中有5种
	backLayer.addChild(loadingLayer);	//将Loading动画加入精灵
	loadingLayer.setProgress(35);	//设置进度为35%
}

lufylegend开发HTML5学习
一般使用方法：

init(50,"mylegend",800,400,main);

var loadingLayer,
backLayer；

var imglist = {};
var imgData = new Array(//图片数组
		{name:"title",path:"../images/title.png"},//所有图片名字和文件名
		{name:"shitou",path:"../images/shitou.png"},
		{name:"jiandao",path:"../images/jiandao.png"},
		{name:"bu",path:"../images/bu.png"});

function main(){
	backLayer = new LSprite();	
	addChild(backLayer);
	loadingLayer = new LoadingSample1();//使用第一种加载动画，1.8.3中有5种
	backLayer.addChild(loadingLayer);	//将Loading动画加入精灵

	LLoadManage.load(
		imgData,		//加载图片资源
		function(progress){		//显示加载进度
			loadingLayer.setProgress(progress);
		},
		function(result){	//加载完成后
			imglist = result;
			backLayer.removeChild(loadingLayer);//将加载动画层移除
			loadingLayer = null;
			gameInit();		//初始化游戏
		}
	);
}

function gameInit(){
	//在这里开始游戏
}

这样确保所有图片加载完毕。

lufylegend html5 html代码