美文网首页
H5游戏开发入坑第一弹(lufylegend基本框架)

H5游戏开发入坑第一弹(lufylegend基本框架)

作者: 豆沙包o小白 | 来源:发表于2016-10-18 10:14 被阅读0次

    效果图

    基本内容

    • html基本结构

    • lufylegend.js包含与使用

    • lufylegend.js屏幕适配


    以下内容详看注释部分

    html部分

    <!DOCTYPE HTML>
    <html>
    <head>
        <!-- 字符编码为utf-8 -->
        <meta charset="utf-8"/>
        <!-- 屏幕适配所需内容 -->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <!-- 页面标签标题 -->
        <title>我是标题</title>
    html,body{
            margin: 0;
            padding: 0;
        }
        <!-- lufylegend.js 文件包含位置 -->
        <script type="text/javascript" src="js/lufylegend-1.10.1.min.js"></script>
    </head>
    <body>
        <!-- 内容加载位置 -->
        <div id="mylegend">loading</div>
    </body>
    </html>
    

    js部分

    <script type="text/javascript">
    //初始化位置到mylegend,大小为800*400,即将运行函数main,帧率为50;
    init(50,"mylegend",800,400,main);
    
    //定义层backLayer,文本textDic(用于测试)
    var backLayer;
    var textDic;
    
    function main(){
    //占据全屏
    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
        LSystem.screen(LStage.FULL_SCREEN); 
    
        backLayer = new LSprite();
        //在背景层上绘制黑色背景
        backLayer.graphics.drawRect(1,"#000",[0,0,800,400],true,"#000");
        //背景显示
        addChild(backLayer);
    
        //textDic文本测试
        textDic = new LTextField();
        textDic.text = "我是测试文本";
        textDic.weight = "bolder";
        textDic.color = "#fff";
        textDic.size = 24;
        textDic.x = (LGlobal.width - textDic.getWidth()) / 2;
        textDic.y = 200;
        backLayer.addChild(textDic);
    
        //函数调用
        gameInit();
    }
    function gameInit(){
            /*其他内容*/
    }
    </script>
    

    完整无注释代码

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <title>我是标题</title>
    html,body{
            margin: 0;
            padding: 0;
        }
        <script type="text/javascript" src="js/lufylegend-1.10.1.min.js"></script>
    </head>
    <body>
        <div id="mylegend">loading</div>
    </body>
    <script type="text/javascript">
    init(50,"mylegend",800,400,main);
    
    var backLayer;
    var textDic;
    
    function main(){
    
    LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
        LSystem.screen(LStage.FULL_SCREEN); 
    
    
        backLayer = new LSprite();
    
        backLayer.graphics.drawRect(1,"#000",[0,0,800,400],true,"#000");
    
        addChild(backLayer);
    
        textDic = new LTextField();
        textDic.text = "我是测试文本";
        textDic.weight = "bolder";
        textDic.color = "#fff";
        textDic.size = 24;
        textDic.x = (LGlobal.width - textDic.getWidth()) / 2;
        textDic.y = 200;
        backLayer.addChild(textDic);
    
        gameInit();
    }
    function gameInit(){
            /*其他内容*/
    }
    </script>
    </html>
    

    效果图

    样图.png

    lufylegend.js


    相关文章

      网友评论

          本文标题:H5游戏开发入坑第一弹(lufylegend基本框架)

          本文链接:https://www.haomeiwen.com/subject/idnzyttx.html