• 用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件


    一,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");  
    }  

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

  • 相关阅读:
    PyCharm安装及其使用
    web端自动化——Selenium3+python自动化(3.7版本)-chrome67环境搭建
    Unittest单元测试框架
    selenium IDE下载安装(For Chrome and firefox)
    视频上传测试点
    web端自动化——自动化测试准备工作
    selenium3+Python3+sublime text3自动化登录
    Sublime Text3安装及常用插件安装
    web端自动化——selenium3用法详解
    Selenium2+python自动化2.7-火狐44版本环境搭建(转)
  • 原文地址:https://www.cnblogs.com/jiangxiaobo/p/6005978.html
Copyright © 2020-2023  润新知