首页 > web前端 > H5教程 > 正文

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

黄舟
发布: 2017-01-17 17:03:48
原创
1736 人浏览过

一,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——终篇的内容,更多相关内容请关注PHP中文网(www.php.cn)!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板