用仿ActionScript的语法来编写html5——终篇

百变鹏仔 2个月前 (10-19) #H5教程

文章标签语法

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

二，legendforhtml5programming1.0库件的构建过程
请参照下面的九篇文章，最终代码和构建过程会有些出入，以源码为准。
用仿actionscript的语法来编写html5系列文章
第一篇，显示一张图片
http://blog.csdn.net/lufy_legend/article/details/6753032
第二篇，利用sprite来实现动画
http://blog.csdn.net/lufy_legend/article/details/6753032
第三篇，鼠标事件与游戏人物移动
http://blog.csdn.net/lufy_legend/article/details/6760812
第四篇，继承与简单的rpg
http://blog.csdn.net/lufy_legend/article/details/6770713
第五篇，graphics绘图
http://blog.csdn.net/lufy_legend/article/details/6777784
第六篇，textfield与输入框
http://blog.csdn.net/lufy_legend/article/details/6782218
第七篇，自定义按钮
http://blog.csdn.net/lufy_legend/article/details/6798187
第八篇，图片处理+粒子效果
http://blog.csdn.net/lufy_legend/article/details/6798192
第九篇，仿urlloader读取文件
http://blog.csdn.net/lufy_legend/article/details/6824136

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

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的使用

var backLayer = new LSprite();    addChild(backLayer);   //在sprite上加child  backLayer.addChild(mapimg);

3，事件

//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绘图

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，文字与输入框

立即学习“前端免费学习笔记（深入）”；

//文字显示    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，按钮

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");

文章推荐

用仿ActionScript的语法来编写html5——终篇

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集