美文网首页
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基本框架)

    效果图 基本内容 html基本结构 lufylegend.js包含与使用 lufylegend.js屏幕适配 以下...

  • 关于H5框架的一些知识

    关于H5框架的一些知识 入职新公司以后,从事了部分H5框架的工作,包括性能优化,新功能开发等。在这之前从没有接触过...

  • mpvue坑点记录

    在入坑小程序的日志中,原生开发,wepay开发,mpvue开发,tato开发还是uni-app,其实框架还是因人而...

  • 一不小心入坑了Flutter

    一、为什么决定入坑Flutter Flutter是Fuchsia的开发框架,是一套移动UI框架,可以快速在iOS、...

  • H5小游戏开发参考资料

    H5小游戏开发参考资料 Egret白鹭H5小游戏开发入门(一) - 小辉_Ray - 博客园 白鹭开发者中心 - ...

  • 游戏框架列举

    由于目前做h5课件小游戏开发快一年之久,所以想要自己总结写目前流行的框架,我们的框架是早起程序开发的一个不开源的框...

  • H5入门01-React+dva+webpack搭建项目框架

    H5入门01-dva+webpack搭建框架 对于移动端开发者而言,开发H5一般使用 React +Dvajs +...

  • WKWebView本地替换资源和网页支付(针对H5游戏上线App

    关于上苹果的H5游戏上线概况: 目前H5加壳游戏上线基本是靠运气上线,纯粹的只为了加载H5网页的壳基本是过不...

  • H5入坑之路

    写H5已有一年的时间了,跌入了很多个坑,有时也会重复入一个坑。so,为了少入点坑,总结了一下入坑的原因及解决方案。...

  • Taro填坑记

    最近项目要求使用Taro框架来开发,目的是同时支持H5,RN及微信小程序,于是开始了我的填坑之旅,以下是使用中的遇...

网友评论

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

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