lufylegend开发HTML5学习

    使用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(){
	//在这里开始游戏
}

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