码迷,mamicode.com
首页 > 其他好文 > 详细

lufy-legend学习笔记之帧速率

时间:2014-11-20 01:36:44      阅读:295      评论:0      收藏:0      [点我收藏+]

标签:lufylegend

 最近发现一个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>


 
效果:

bubuko.com,布布扣

移动到右端后,会反向移动
注:案例来自官网,我只是加些注释

lufy-legend学习笔记之帧速率

标签:lufylegend

原文地址:http://blog.csdn.net/zhengwei223/article/details/41296089

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!