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

效果：







移动到右端后，会反向移动

注：案例来自官网，我仅仅是加些凝视

lufylegend练习（1）帧速率的更多相关文章

  1. lufylegend:图形变形3

    面来看看drawtriangles函数的扩展.利用drawtriangles函数来实现一个旋转的3D地球,效果如下 因为lufylegend1.5.0版的drawtriangles函数有个bug,所以 ...

  2. lufylegend游戏引擎

    lufylegend游戏引擎介绍:click 这个链接我觉得已经很详细的介绍了这个引擎. 所以以下我只说说一些简单的游戏代码过程. 首先从canvas做游戏叙述起: 这是一个让人很熟悉的简单小游戏,网 ...

  3. H5canvas赛车游戏-基于lufylegend引擎

    lufylegend引擎是canvas游戏中,比较简单的引擎之一,它不需要配置环境,类似引入jquery包的方式,引用对应js文件即可 lufylegend官方网站:http://www.lufyle ...

  4. 在Lufylegend中如何设置bitmap或者sprite的缩放和旋转中心

    最近两天有个lufylegend游戏引擎群的群友需要做一个项目,其中要解决的需求是:获取照相机拍摄的图片,根据图片的EXIF信息让图片显示为“正常”情况,并且需要给图片添加一些事件侦听.何为正常呢?就 ...

  5. 利用开源HTML5引擎lufylegend.js结合javascript实现的五子棋人机对弈

    前言     本文主要介绍利用开源引擎 lufylegend.js开发基于Html5的游戏--五子棋,主要叙述其详细开发过程. 游戏规则 玩过五子棋的都应该知道五子棋的规则,这里就简单介绍其规则. 1 ...

  6. html5游戏开发框架之lufylegend开源库件学习记录

    下载地址http://lufylegend.com/lufylegend 引用 <script type="text/javascript" src="../luf ...

  7. lufylegend库 LButton

    lufylegend库 LButton <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  8. lufylegend库 鼠标事件 循环事件 键盘事件

    lufylegend库 鼠标事件 循环事件 键盘事件 <!DOCTYPE html> <html lang="en"> <head> <m ...

  9. lufylegend库 LTextField

    lufylegend库 LTextField <!DOCTYPE html> <html lang="en"> <head> <meta ...

随机推荐

  1. spring boot hello and docker

    主要是想试下spring boot运行在docker里的感觉, 小试牛刀   :) 这是原文,参考一下:  https://spring.io/guides/gs/spring-boot-docker ...

  2. sublime 集成git插件，及git常用命令

    以前用了很久的totoiseSVN,显然不够高大上,开发界的版本装x利器还得是git.然而git的命令行对没怎么用过linux的人可能觉得还不如用gitGUI,可是当你知道sublime可以集成git ...

  3. How to set up Dynamics CRM 2011 development environment

    Recently I have been starting to learn Microsoft Dynamics CRM 2011 about implement plugin and workfl ...

  4. Python——网络爬虫

    此篇文章继续跟着小甲鱼的视频来初学网络爬虫,除了小甲鱼的网站上可下载视频,发现b站上也有全套的视频哦,会比下载来的更方便些. 网络爬虫,又称为网页蜘蛛(WebSpider),非常形象的一个名字.如果你 ...

  5. [转载] Storm：最火的流式处理框架

    转载自http://www.cnblogs.com/langtianya/p/5199529.html 伴随着信息科技日新月异的发展,信息呈现出爆发式的膨胀,人们获取信息的途径也更加多样.更加便捷,同 ...

  6. 掌握numpy(三)

    统计功能 前面都是介绍numpy的一些特性,被称为数学运算神器怎么能少了统计功能呢 ndarray的方法 a = np.array([[-2.5, 3.1, 7], [10, 11, 12]]) &g ...

  7. python logging模块+ 个人总结

    原文地址:http://www.cnblogs.com/sislcb/archive/2008/11/25/1340627.html 从Python2.3版本中开始引入的logging模块为应用提供了 ...

  8. LKD: Chapter 7 Interrupts and Interrupt Handlers

    Recently I realized my English is still far from good. So in order to improve my English, I must not ...

  9. python实战===如何优雅的打飞机

    这是一个打飞机的游戏,结构如下: 其中images中包含的素材为 命名为alien.png    命名为ship.png 游戏效果运行是这样的: 敌军,也就是体型稍微大点的,在上方左右移动,并且有规律 ...

  10. C/S架构自动化测试入门

    所谓C/S架构即Client/Server(客户端/服务器架构).虽然近年来C/S架构产品越来越少,大有被B/S(Browser/Server 浏览器/服务器)架构超越的趋势,但C/S还是有B/S不可 ...