用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件

用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件

本页面的文字允许在CC-BY-SA 3.0协议和GNU自由文档许可证下修改和再使用。

终篇，LegendForHtml5Programming1.0开源库件

库件下载地址

http://code.google.com/p/legendforhtml5programming/downloads/list

一,LegendForHtml5Programming1.0库件是什么?

它是一个Javascript库，它模仿了ActionScript的语法，用于html5的开发，目前实现的功能相对较少，还不能称之为引擎，希望将来可以作为html5的开源引擎，为html5开发者提供服务。

二，LegendForHtml5Programming1.0库件的构建过程

请参照下面的九篇文章，最终代码和构建过程会有些出入，以源码为准。

用仿ActionScript的语法来编写html5系列文章

用仿ActionScript的语法来编写html5——第一篇，

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

三，LegendForHtml5Programming1.0库件的使用举例

下面是使用LegendForHtml5Programming1.0开发的两个简陋的小游戏，只是为了试验，非常简陋，以后会开发几个像样的游戏来做参照。

1，俄罗斯方块

http://fsanguo.comoj.com/html5/jstoas10/index.html

2，抽奖小游戏

http://fsanguo.comoj.com/html5/lottery_html5/index.html

个人感觉，该库件使用起来还是很方便的，尤其上面的俄罗斯方块，我是直接把以前的AS代码复制过来，在语法上稍加修改，竟然直接可以运行了

关于游戏的源码,大家点击鼠标右键就可以自己看了，我就不多说了

四，LegendForHtml5Programming1.0库件的语法举例

使用前，需要在html中引进LegendForHtml5Programming1.0库件的legend.js文件，然后在legend.js中配置你的库件所在的位置

1，显示图片

www.2cto.com

var loader;   

function main(){   

    loader = new LLoader();   

    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);   

    loader.load("10594855.png","bitmapData");   

}   

function loadBitmapdata(event){   

    var bitmapdata = new LBitmapData(loader.content);   

    var bitmap = new LBitmap(bitmapdata);   

    addChild(bitmap);   

}   

//图片的缩放 

bitmapdata = new LBitmapData(imglist["chara"]); 

showImg2 = new LBitmap(bitmapdata); 

showImg2.scaleX = 0.2; 

showImg2.scaleY = 0.2; 

//图片的透明度 

bitmapdata = new LBitmapData(imglist["chara"]); 

showImg3 = new LBitmap(bitmapdata); 

showImg3.alpha = 0.2; 

//图片的旋转 

bitmapdata = new LBitmapData(imglist["chara"]); 

showImg4 = new LBitmap(bitmapdata); 

showImg4.rotate = 50; 

2，Sprite的使用

www.2cto.com

var backLayer = new LSprite();   

addChild(backLayer);  

//在sprite上加child 

backLayer.addChild(mapimg);   

3，事件

www.2cto.com

//frame事件 

//backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)   

//鼠标事件 

//backLayer.addEventListener(LMouseEvent.MOUSE_DOWN, onframe)   

鼠标事件可以添加MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE

如果你开发的是iphone,ipad或者android，那么该库件会自动将MOUSE_DOWN，MOUSE_UP，MOUSE_MOVE转换为TOUCH_START，TOUCH_END，TOUCH_MOVE，无需自己添加touch事件

4，继承

在构造器中调用base(this,LSprite,[]);方法既可实现继承

三个参数分别是自己,要继承的父类,父类构造器的参数

5，Graphics绘图

www.2cto.com

backLayer = new LSprite();   

addChild(backLayer);   

//画一圆   

backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");   

//画一个矩形   

backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");   

//画一条线   

backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);   

6，文字与输入框

www.2cto.com

//文字显示   

var txt = new LTextField();   

txt.x = 100;   

txt.text = "TextField 测试";   

addChild(txt);   

//输入框   

var txt1 = new LTextField();   

txt1.x = 100;   

txt1.y = 50;   

txt1.setType(LTextFieldType.INPUT);   

addChild(txt1);   

7，按钮

www.2cto.com

function gameInit(event){   

    backLayer = new LSprite();   

    addChild(backLayer);   

    btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));   

    btn01.x = 76;   

    btn01.y = 50;   

    backLayer.addChild(btn01);   

    btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));   

    btn02.x = 76;   

    btn02.y = 100;   

    backLayer.addChild(btn02);   

    btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);   

    btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);   

}   

function onmousedown01(event){   

    alert("btn01 on click");   

}   

function onmousedown02(event){   

    alert("btn02 on click");   

}   

欢迎大家使用以及提出意见等