库件下载地址8F7HTML5中文学习网 - HTML5先行者学习网
http://legendforhtml5programming.googlecode.com/files/LegendForHtml5Programming1.0.rar8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
一,LegendForHtml5Programming1.0库件是什么?8F7HTML5中文学习网 - HTML5先行者学习网
它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之为引擎,希望将来可以作为html5的开源引擎,为html5开发者提供服务。8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
二,LegendForHtml5Programming1.0库件的构建过程8F7HTML5中文学习网 - HTML5先行者学习网
请参照下面的九篇文章,最终代码和构建过程会有些出入,以源码为准。8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
三,LegendForHtml5Programming1.0库件的使用举例8F7HTML5中文学习网 - HTML5先行者学习网
下面是使用LegendForHtml5Programming1.0开发的两个简陋的小游戏,只是为了试验,非常简陋,以后会开发几个像样的游戏来做参照。8F7HTML5中文学习网 - HTML5先行者学习网
1,俄罗斯方块8F7HTML5中文学习网 - HTML5先行者学习网
http://fsanguo.comoj.com/html5/jstoas10/index.html8F7HTML5中文学习网 - HTML5先行者学习网
2,抽奖小游戏8F7HTML5中文学习网 - HTML5先行者学习网
http://fsanguo.comoj.com/html5/lottery_html5/index.html8F7HTML5中文学习网 - HTML5先行者学习网
个人感觉,该库件使用起来还是很方便的,尤其上面的俄罗斯方块,我是直接把以前的AS代码复制过来,在语法上稍加修改,竟然直接可以运行了8F7HTML5中文学习网 - HTML5先行者学习网
关于游戏的源码,大家点击鼠标右键就可以自己看了,我就不多说了8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
四,LegendForHtml5Programming1.0库件的语法举例8F7HTML5中文学习网 - HTML5先行者学习网
使用前,需要在html中引进LegendForHtml5Programming1.0库件的legend.js文件,然后在legend.js中配置你的库件所在的位置8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
1,显示图片8F7HTML5中文学习网 - HTML5先行者学习网
JavaScript Code复制内容到剪贴板
    - 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的使用8F7HTML5中文学习网 - HTML5先行者学习网
 
JavaScript Code复制内容到剪贴板
    - var backLayer = new LSprite();    
 
    - addChild(backLayer);   
 
    -   
 
    - backLayer.addChild(mapimg);    
 
 
 
3,事件
 
鼠标事件可以添加MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE
如果你开发的是iphone,ipad或者android,那么该库件会自动将MOUSE_DOWN,MOUSE_UP,MOUSE_MOVE转换为TOUCH_START,TOUCH_END,TOUCH_MOVE,无需自己添加touch事件8F7HTML5中文学习网 - HTML5先行者学习网
4,继承8F7HTML5中文学习网 - HTML5先行者学习网
在构造器中调用base(this,LSprite,[]);方法既可实现继承8F7HTML5中文学习网 - HTML5先行者学习网
三个参数分别是自己,要继承的父类,父类构造器的参数8F7HTML5中文学习网 - HTML5先行者学习网
8F7HTML5中文学习网 - HTML5先行者学习网
5,Graphics绘图8F7HTML5中文学习网 - HTML5先行者学习网
JavaScript Code复制内容到剪贴板
    - 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,文字与输入框
 
JavaScript Code复制内容到剪贴板
    -   
 
    - 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,按钮
 
JavaScript Code复制内容到剪贴板
    - 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");    
 
    - }    
 
 
 
欢迎大家使用以及提出意见等8F7HTML5中文学习网 - HTML5先行者学习网