HTML5技术

仿AS语法来写HTML5-终篇LegendForHtml5Programming

字号+ 作者:lufy 来源: 2014-11-16 21:26 我要评论( )

库件下载地址 http://legendforhtml5programming.googlecode.com/files/LegendForHtml5Programming1.0.rar 一,LegendForHtml5Programming1.0库件是什么? 它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,

 库件下载地址
http://legendforhtml5programming.googlecode.com/files/LegendForHtml5Programming1.0.rar

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

二,LegendForHtml5Programming1.0库件的构建过程
请参照下面的九篇文章,最终代码和构建过程会有些出入,以源码为准。

三,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,显示图片

JavaScript Code复制内容到剪贴板
  1. var loader;    
  2. function main(){    
  3.     loader = new LLoader();    
  4.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);    
  5.     loader.load("10594855.png","bitmapData");    
  6. }    
  7. function loadBitmapdata(event){    
  8.     var bitmapdata = new LBitmapData(loader.content);    
  9.     var bitmap = new LBitmap(bitmapdata);    
  10.     addChild(bitmap);    
  11. }    
  12. //图片的缩放  
  13. bitmapdata = new LBitmapData(imglist["chara"]);  
  14. showImg2 = new LBitmap(bitmapdata);  
  15. showImg2.scaleX = 0.2;  
  16. showImg2.scaleY = 0.2;  
  17. //图片的透明度  
  18. bitmapdata = new LBitmapData(imglist["chara"]);  
  19. showImg3 = new LBitmap(bitmapdata);  
  20. showImg3.alpha = 0.2;  
  21. //图片的旋转  
  22. bitmapdata = new LBitmapData(imglist["chara"]);  
  23. showImg4 = new LBitmap(bitmapdata);  
  24. showImg4.rotate = 50;  
2,Sprite的使用
 
JavaScript Code复制内容到剪贴板
  1. var backLayer = new LSprite();    
  2. addChild(backLayer);   
  3. //在sprite上加child  
  4. backLayer.addChild(mapimg);    
3,事件
 
JavaScript Code复制内容到剪贴板
  1. //frame事件  
  2. //backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)    
  3. //鼠标事件  
  4. //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绘图

JavaScript Code复制内容到剪贴板
  1. backLayer = new LSprite();    
  2. addChild(backLayer);    
  3. //画一圆    
  4. backLayer.graphics.drawRect(1,"black",[20, 20, 150, 20],true,"#cccccc");    
  5. //画一个矩形    
  6. backLayer.graphics.drawArc(2,"black",[100, 100, 50, 0,2*Math.PI,false],true,"#FF0000");    
  7. //画一条线    
  8. backLayer.graphics.drawLine(2,"#FF0000",[200, 20, 100, 50]);  
6,文字与输入框
 
JavaScript Code复制内容到剪贴板
  1. //文字显示    
  2. var txt = new LTextField();    
  3. txt.x = 100;    
  4. txt.text = "TextField 测试";    
  5. addChild(txt);    
  6. //输入框    
  7. var txt1 = new LTextField();    
  8. txt1.x = 100;    
  9. txt1.y = 50;    
  10. txt1.setType(LTextFieldType.INPUT);    
  11. addChild(txt1);    
7,按钮
 
JavaScript Code复制内容到剪贴板
  1. function gameInit(event){    
  2.     backLayer = new LSprite();    
  3.     addChild(backLayer);    
  4.         
  5.     btn01 = new LButton(new LBitmap(new LBitmapData(imglist["replay_button_up"])),new LBitmap(new LBitmapData(imglist["replay_button_over"])));    
  6.     btn01.x = 76;    
  7.     btn01.y = 50;    
  8.     backLayer.addChild(btn01);    
  9.         
  10.     btn02 = new LButton(new LBitmap(new LBitmapData(imglist["quit_button_up"])),new LBitmap(new LBitmapData(imglist["quit_button_over"])));    
  11.     btn02.x = 76;    
  12.     btn02.y = 100;    
  13.     backLayer.addChild(btn02);    
  14.         
  15.     btn01.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown01);    
  16.     btn02.addEventListener(LMouseEvent.MOUSE_DOWN, onmousedown02);    
  17. }    
  18. function onmousedown01(event){    
  19.     alert("btn01 on click");    
  20. }    
  21. function onmousedown02(event){    
  22.     alert("btn02 on click");    
  23. }    

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5开发的翻页效果

    HTML5开发的翻页效果

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第9章,URLLoader读取文件

    仿AS语法来写HTML5—第9章,URLLoader读取文件

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第8章,图片处理+粒子

    仿AS语法来写HTML5—第8章,图片处理+粒子

    2014-11-16 21:26

  • 仿AS语法来写HTML5—第7章,自定义按钮

    仿AS语法来写HTML5—第7章,自定义按钮

    2014-11-16 21:26

网友点评
;