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

一,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)!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3203527.html

(0)
上一篇 2025年4月1日 08:31:58
下一篇 2025年4月1日 08:32:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 使用html5的FormData对象,通过 Ajax表单异步提交文件数据

    每次在向服务器提交文件对象数据是,总是需要借助各种三方插件来实现表单异步提交功能,还要为不同的界面去定制不同的插件css,相当繁琐。xmlhttprequest level 2 添加了一个新的接口——formdata。利用 formdata…

    编程技术 2025年4月4日
    100
  • html5的八大技术特征简介

    html5的八大技术特征简介:   HTML5 这个词获得了它自己的生命。无论是在开发者还是公众社区中,这个词的指代对象早已超过了简简单单一个标准的范畴,以至于来带了诸多的不解和争论。这套标准 需要一个标准。那就是,HTML5需要一组一致的…

    编程技术 2025年4月4日
    200
  • HTML5 Canvas 起步(1) – 基本概念

    什么是canvas  是一个新的 HTML 元素,这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作,也可以用来做一些动画。当然,目前 HTML5 规范还在…

    编程技术 2025年4月4日
    200
  • html5 worker 实例(一) 为什么测试不到效果

    很多人在测试worker api的时候,总是会出现异常,根本测试不到效果。 在使用worker的时候有个必须注意的地方,就是单纯的文本文件是实现不了worker的,你写的实际代码 必须部署到服务器(tomcat.jboss等)才能运行wor…

    编程技术 2025年4月4日
    200
  • html5 worker 实例(二) 图片变换效果

    worker的js代码img.js  onmessage = function(e) { postMessage(filter(e.data)) }; function filter(imgd) { var pix = imgd.pixel…

    编程技术 2025年4月4日
    200
  • 关于HTML5和CSS替换使用

    听到html5的都知道它的强大,如更多的描述性标记、较少依赖于插件的多媒体支持、跨文档消息通信、web sockets、客户端存储、更强大的表单、提升可访问性、先进的选择器、强大的视觉效果。费话不多说,细细说来 被废弃的标签和属性 废弃的标…

    编程技术 2025年4月4日
    100
  • 利用HTML5的devicemotion事件实现手机摇一摇抽奖,年会抽奖

    摇一摇js脚本逻辑:接下来是移动端js脚本逻辑的实现,摇一摇的实现需借助html5新增的devicemotion事件,获取设备在位置和方向上的改变速度的相关信息,该事件的基本使用如下: if (window.DeviceMotionEven…

    编程技术 2025年4月4日
    100
  • H5的video标签操作摄像头

    这次给大家带来H5的video标签操作摄像头,H5的video标签操作摄像头注意事项有哪些,下面就是实战案例,一起来看一下。 详解HTML5 使用video标签实现选择摄像头功能 1. html // jquery reference //…

    编程技术 2025年4月4日
    100
  • H5的文本格式化使用方法

    这次给大家带来H5的文本格式化使用方法,H5文本格式化使用的注意事项有哪些,下面就是实战案例,一起来看一下。 注意事项对于我们编写注意事项也是非常重要的,各种各样的样式都需要使用到文本格式化,具体什么效果呢? 加粗文本斜体文本电脑自动输出这…

    编程技术 2025年4月4日
    100
  • HTML5离线应用与客户端存储的实现

    这篇文章主要介绍了html5离线应用与客户端存储的实现的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 支持离线 Web 应用开发是 HTML5 的另一个重点。所谓离线 Web 应用,就是在设备不能上网…

    编程技术 2025年4月4日
    200

发表回复

登录后才能评论