近期发现一个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. C#中结构体定义并转换字节数组

    最近的项目在做socket通信报文解析的时候,用到了结构体与字节数组的转换:由于客户端采用C++开发,服务端采用C#开发,所以双方必须保证各自定义结构体成员类型和长度一致才能保证报文解析的正确性,这一 ...

  2. 清理win10过期补丁的命令

    作用是删除已经被新版本取代的旧系统文件 DISM.exe /Online /Cleanup-Image /StartComponentCleanup /ResetBase 注1: 执行后, 补丁就无法 ...

  3. 我的第一个python web开发框架（16）——产品分类管理

    产品分类管理的html页面之前忘记做了,这次附件里补上. 好了先上图 从页面效果图来看,我们需要开发列表获取接口.添加接口.单条记录获取接口.编辑接口和删除接口 对于产品分类列表,我们将使用jqgri ...

  4. 基础教程：ASP.NET Core 2.0 MVC筛选器

    问题 如何在ASP.NET Core的MVC请求管道之前和之后运行代码. 解 在一个空的项目中,更新 Startup 类以添加MVC的服务和中间件. publicvoid ConfigureServi ...

  5. 重构手法之Introduce Explaining Variable（引用解释性变量）

    返回总目录 6.5Introduce Explaining Variable(引用解释性变量) 概要 你有一个复杂的表达式. 将该复杂表达式(或其中一部分)的结果放进一个临时变量,以此变量名称来解释表 ...

  6. 发布npm时遇到的两个小问题，解决方法

    1.出现这个错误 no_perms Private mode enable, only admin can publish this module 错误输出内容 npm ERR! publish Fa ...

  7. oracle一些基本命令

    Oracle安装配置 设置四个账户及对应的密码 No. 用户名 口令 1 sys change_on_install 2 system manager 3 scott tiget 4 sh sh 上面 ...

  8. 天龙八步&quot;细说浏览器输入URL后发生了什么

    本文摘要: 1.DNS域名解析: 2.建立TCP连接: 3.发送HTTP请求: 4.服务器处理请求: 5.返回响应结果: 6.关闭TCP连接: 7.浏览器解析HTML: 8.浏览器布局渲染: 总结 输 ...

  9. 后台工作者HangFire与ABP框架Abp.Hangfire及扩展

    HangFire与Quartz.NET相比主要是HangFire的内置提供集成化的控制台,方便后台查看及监控,对于大家来说,比较方便. HangFire是什么 Hangfire是一个开源框架(.NET ...

  10. A:分段函数-poj

    A:分段函数 总时间限制:  1000ms 内存限制:  65536kB 描述 编写程序,计算下列分段函数y=f(x)的值. y=-x+2.5; 0 <= x < 5 y=2-1.5(x- ...