近期发现一个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. shapes 不规则边界

    CSS基本形状都是矩形,CSS shapes允许开发者用定制的路径来包裹内容,例如圆形,椭圆,多边形等.   形状可以自定义也可以从图片中推断   从图片推断,例如可以让文字按照图片形状来浮动到一边: ...

  2. 可点击的icon按钮 无障碍 ARIA 可访问性

    最简单: <input type="image" src="email.png" width="14" height="14 ...

  3. linux环境手动编译安装Nginx实践过程 附异常解决

    1.下载nginx源码包并解压 可在http://nginx.org/en/download.html下载.tar.gz的源码包,如(nginx-1.4.7.tar.gz) 或者使用云盘下载   ht ...

  4. vue初级学习--组件的使用(自定义组件)

    一.导语 突然冒出四个字,分即是合,嗯,优点道理....................... 二.正文 在搞的仿淘宝demo,之前加入购物车是与商品详情一块的,今天把它单独拆出来,复用性高点,那这样 ...

  5. 数据库Oracle

    一. 表空间和数据文件的关系: 文件组成:数据文件,控制文件,数据库日志文件 数据文件:.dbf 包含全部数据库数据(表,索引等),一个数据文件仅与一个数据库关联.一旦建立,只增不减. 表空间(Tab ...

  6. [转]移动前端开发之viewport的深入理解

    今天去面试,被问到一个用了一万次的东西,然而我并不了解具体是个毛毛,看这一篇豁然开朗. DevicePixelRatio 以及这句话:移动设备上的viewport分为layout viewport  ...

  7. 阿里云centos 搭建SVN

    1. 安装 先进入想安装的目录,执行 yum install subversion 2. 创建SVN目录 mkdir -p /var/svn/svnrepos  ,然后创建版本库 svnadmin c ...

  8. IE （6-11）版本，在使用iframe的框架时，通过a标签javascript:; 和js跳转parent.location的时候 出现在新页面打开的情况

    问题描述: 使用iframe的情况下,在子框架中,使用如下形式的跳转: <a href="javascript:;" onclick="parent.locatio ...

  9. 一个简单的MVC框架的实现

    1.Action接口 package com.togogo.webtoservice; import javax.servlet.http.HttpServletRequest; import jav ...

  10. 接受第三方app分享的数据

    前段时间公司项目需要一个需求: 把第三方的app分享的数据接受到自己的apk中, 涉及到的第三方app是: Youtube/Amazon/NetFlix, 这些app通过分享功能把当前的信息分享出去. ...