• lufylegend练习(1)帧速率


     近期发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/
    可是没有基础的同学。看起来费劲。所以打算边学边记笔记,说明都在凝视中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>帧速率</title>
    		<script src="js/lufylegend-1.9.7.js"></script>
    		<script>
    			//LInit初始化画布,第一个參数为帧速率,除数越大动画速率越快。能够自己改动试试
    			//随后的參数:divid,宽。高。回调函数
    			LInit(1000/20, "legend", 800, 480, main);
    			var direction = 1;
    			function main () {
    				//新建层
    			    var layer = new LSprite();
    			    //加入层
    			    addChild(layer);
    			    //在层上绘制一个矩形
    			    //LGraphics 类包括一组可用来创建矢量形状的方法。
    			    //drawRect 五个參数:线粗,线颜色。坐标及宽度,是否填充。填充颜色
    			    layer.graphics.drawRect(1, "#ff0000", [0, 0, 100, 100], true, "#880088");
    			    //layer上绑定ENTER_FRAME事件,以帧速率调用onframe函数
    			    layer.addEventListener(LEvent.ENTER_FRAME,onframe);
    			}
    			function onframe(event){
    			    var layer = event.currentTarget;
    			    //每一帧,横坐标增长/降低==向右/向左移动一像素,方向取决于direction的正负
    			    layer.x += direction;
    			    //不停右移
    			    if(layer.x < 0){
    			        direction = 1;
    			    }
    			    //坐标大于700后,向左移
    			    if(layer.x > 700){
    			        direction = -1;
    			    }
    			}
    		</script>
    	</head>
    	<body>
    		<div id="legend"></div>
    	</body>
    </html>
    


     
    效果:



    移动到右端后,会反向移动
    注:案例来自官网,我仅仅是加些凝视
  • 相关阅读:
    C++实现反射
    ubuntu下安装secureCRT(含破解方法)
    2018 年力扣高频算法面试题汇总-难题记录-鸡蛋掉落
    对于opencv全面貌的认识和理解
    关于c++类的一些知识的总结
    vs2017+opencv4.0.1安装配置详解(win10)
    leetcode-120-三角形最小路径和
    leetcode-64-最小路径和
    leetcode-917-仅仅反转字母
    leetcode-914-卡牌分组
  • 原文地址:https://www.cnblogs.com/zsychanpin/p/6828842.html
Copyright © 2020-2023  润新知