转载博客 htm5l实现滚动播放

• 
  
• 
  
• 
  
• 
  
• 
• 
  

Yorhom's Game Box

用自己的双手绘画自己的游戏天地，用自己的智慧换取成功的喜悦

• 目录视图
• 摘要视图
• 订阅

【免费公开课】Gulp前端自动化教程    【专家问答】陈绍英：大型IT系统性能测试实战    【博客活动】有奖征文--走进VR开发世界   

『HTML5梦幻之旅』-滚动播放的幻灯片效果

标签： Html5JavaScriptlufylegend幻灯片效果

2013-10-20 14:46 12347人阅读 评论(21) 收藏 举报

本文章已收录于：

JavaScript知识库

分类：

【Lufylegend.js】（32） 【Html5&JavaScript】（51）

目录(?)[+]

很久又没写博客了，一者是因为要上课，平时没有什么零碎的时间研究新东西；二者最近在开发一款塔防游戏，有整块的时间都拿去开发这个项目了。因此最近没有什么好的东西和大家分享。这周末看在游戏快完工的份上，抽出了半天的时间研究了一下html5幻灯片制作，效果还不错，展示如下：

首先是一张《真三国无双7》关云长的头像

其次是《真三国无双7》貂蝉的头像

切换时的效果

怎么样？效果还是很不错，对吧~

测试链接：http://www.cnblogs.com/yorhom/articles/html5_dream_trip_slideshowsample1.html

接下来就来讲一讲制作过程。

一，准备工作

首先，需要下载html5开源引擎lufylegend.js，它是完全免费+开源的，可以下载下来学习一下。

下载地址：http://lufylegend.com/lufylegend

API文档：http://lufylegend.com/lufylegend/api

二，设计原理

要搞清楚本次开发的原理，我们不妨先画一张示意图：

假设绿色方框内的区域为显示区域，那么，我们可以用到lufylegend中的mask的方法来将整个红色方框裁减为绿色方框的大小，这时，我们只能看到A区域，而B，C被遮盖住了。然后如果我们要显示B区域，我们可以直接将红框区域往左移动一格的距离，绿色区域不动，就能将B显示出来了，就像放映机一样。

但是如果一直播放下去，那么我们播放到C区域时，红色区域再往左移动，那就会显示为空白。解决措施是又移回A区域，但是出现的问题又在于红色区域如果要移到A处，那应该右移动才能到达，但是我们要的是红色区域往左移动，因此就不能直接移回。那该怎么办呢？我想的解决措施就是把最前面的那个区域移动到最后的那个区域的右边。如果是刚才那种情况，那就让A接到C后方，这时候，A变成了最后一个。这时红色区域又往左移动时，取到的就是B，然后将B移动到A后面。

当然，上面我们只提到了向左移动时的处理方式，其实向右也是一样的，只是取的是最后一个区域，然后把这个区域移动到第一个区域的前面罢了。

光说原理只能算是纸上谈兵，接下来就来看看代码。

三，代码讲解

首先我们为了方便起见，建立一个LSlideshowSample1类，因为以后万一要拓展别的幻灯片效果，所以就在这个类的名字后面写上了"Sample1”，名字只是一种代号，我们主要看代码，构造器如下：

[javascript] view plain copy

1. function LSlideshowSample1(width,height,isLoop,loopData){  
2.     var self = this;  
3.     base(self,LSprite,[]);  
4.       
5.     self._slideshowList = new Array();  
6.     self._slideshowIndex = 0;  
7.     self._currentIndex = self._slideshowIndex;  
8.       
9.     self.rangeWidth = width;  
10.     self.rangeHeight = height;  
11.     self.isLoop = isLoop;  
12.       
13.     self._toX = 0;  
14.       
15.     self.nextChildList = new Array();  
16.     self.previousChildList = new Array();  
17.       
18.     self.borderLayer = new LSprite();  
19.     self.borderLayer.graphics.drawRect(0,"",[0,0,width,height],true,"transparent");  
20.       
21.     self.contentLayer = new LSprite();  
22.     self.contentLayer.mask = self.borderLayer;  
23.     self.addChild(self.contentLayer);  
24.       
25.     if(self.isLoop == true){  
26.         self.loopData = loopData;  
27.         self.frameIndex = 0;  
28.         self.maxFrame = Math.floor(self.loopData.delay*1000/LGlobal.speed);  
29.         self.addEventListener(LEvent.ENTER_FRAME,self.loopPlay);  
30.     }  
31. }  

这个类有4个参数，意思分别是：[显示宽度，显示高度，是否自动播放，自动播放方式]，如果第三个参数填false，就可以不用添第4个参数。

接下来解释一下构造器中的代码：
self._slideshowList原先是用来装每一帧的数据的，后来直接在LSprite的childList中取了，所以它没有什么用，直接忽略掉。

接下来看_slideshowIndex属性，这个属性很怪异，主要用于取出要显示的帧，以后慢慢解释。_currentIndex是用来表示显示位置的，如果往左移动，表示显示位置增加1格，往右移动，表示显示位置减少1格。

self.rangeWidth，self.rangeHeight，self.isLoop是将参数存放起来的属性，后面会用到的。

然后是self._toX，这个表示要移动到的位置，和_currentIndex联用，以后也会提到，到时候慢慢讲。接下来是self.nextChildList和self.previousChildList属性，这两个属性和_slideshowIndex联用，_slideshowIndex主要负责作为这两个数组的取值下标。接下来，我们初始化显示层：

[javascript] view plain copy

1. self.borderLayer = new LSprite();  
2. self.borderLayer.graphics.drawRect(0,"",[0,0,width,height],true,"transparent");  
3.       
4. self.contentLayer = new LSprite();  
5. self.contentLayer.mask = self.borderLayer;  
6. self.addChild(self.contentLayer);  

borderLayer等于上面我们讲解原理时的绿色区域，contentLayer代表红色区域。borderLayer要作为contentLayer的遮罩，因此在contentLayer中写道：

[javascript] view plain copy

1. self.contentLayer.mask = self.borderLayer;  

然后进入判断是否自动播放：

[javascript] view plain copy

1. if(self.isLoop == true){  
2.     self.loopData = loopData;  
3.     self.frameIndex = 0;  
4.     self.maxFrame = Math.floor(self.loopData.delay*1000/LGlobal.speed);  
5.     self.addEventListener(LEvent.ENTER_FRAME,self.loopPlay);  
6. }  

代码很简单，值得注意的是，我们实例化构造器时，第4个参数是一个json对象，如下格式：

[javascript] view plain copy

1. {delay:每帧停留时间（单位s）,order:出现时滚动的样式（向右或者向左）}  

ok，构造器就讲完了，接下来看看设置帧的setFrame：

[javascript] view plain copy

1. LSlideshowSample1.prototype.setFrame = function(o){  
2.     var self = this;  
3.     var cl = self.contentLayer.childList;  
4.     o.x = self.contentLayer.childList.length * self.rangeWidth;  
5.     o.y = 0;  
6.     self.contentLayer.addChild(o);  
7.       
8.     self._sortChild();  
9. };  

这个函数也有一个参数，是一个LDisplayObject对象。其中代码很简单，就是将加入的这一帧放到最后面。其中调用到一个_sortChild函数，这个函数十分重要，如下：

[javascript] view plain copy

1. LSlideshowSample1.prototype._sortChild = function(){  
2.     var self = this;  
3.       
4.     self.nextChildList = new Array();  
5.     self.previousChildList = new Array();  
6.     var duplicate = new Array();  
7.     for(var i=0; i<self.contentLayer.childList.length; i++){  
8.         self.nextChildList.push(i);  
9.         duplicate.push(i);  
10.     }  
11.     self.nextChildList = self.nextChildList.sort();  
12.     duplicate.splice(0,1);  
13.     var sortedList = duplicate.sort(function(a,b){  
14.         return b - a;  
15.     });  
16.     self.previousChildList.push(0);  
17.     for(var key in sortedList){  
18.         self.previousChildList.push(sortedList[key]);  
19.     }  
20. };  

我们能看到，主要是对self.nextChildList和self.previousChildList两个属性进行操作。也许有朋友不理解为什么要将他们排续，这个就设计到显示时的原理，还是用刚才那张图来讲解：


我们加入ABC后，A在contentLayer中的成员序号是0，B是1，C是2。在self.nextChildList我们将其加入先后顺序排列为[0,1,2]，如果我们要显示B区域，那我们就要在contentLayer中取B对象，B对象的序号是1，因此我们要将显示位置往后调一格，于是self._slideshowIndex+=1; self._currentIndex += 1; 然后通过self._slideshowIndex的值来取出contentLayer的成员列表中对应的对象，正好self._slideshowIndex初始值是0，+1后变为1，取出的刚好是B对象。

但是，我们的红色区域如果往右移动时，按理说要显示最后的那一个对象C，C的序号是2，但是self._slideshowIndex - 1 != 2，因此我们要在新建self.previousChildList这个属性来确保往右移动时，能正常地取出对象的序号，因此我们对self.previousChildList里的成员排列做了特殊处理，将其变成了[0,2,1]。但是还是不对啊，self._slideshowIndex - 1 = -1时，应该显示C对象，但是C对象序号在self.previousChildList中对应的下标是1不是-1，怎么办呢？其实很简单，取的时候用self._slideshowIndex的绝对值就ok啦。

比如说我们F5一下界面，回到第一格的位置，然后，我们将红色部分向有移动一格，self._slideshowIndex -= 1; self._currentIndex -= 1; 现在按理说要显示C，这时我们在self.previousChildList中用self._slideshowIndex的绝对值取出要找的对象，self._slideshowIndex这时的值是-1，绝对值就是1，在[0,2,1]中对应的值正好是2，也就是C在contentLayer的成员列表中对应的序号，然后用这个序号取出contentLayer的成员列表中对应的成员，位置移动到响应的地方，然后将其通过LTweenLite缓动类缓缓地显示出来，达到想要的效果。

有了上面的介绍，我们就来看看显示部分的代码next()和previous()：

[javascript] view plain copy

1. LSlideshowSample1.prototype.next = function(){  
2.     var self = this;  
3.       
4.     self._currentIndex += 1;  
5.     self._slideshowIndex += 1;  
6.       
7.     if(self._slideshowIndex >= self.contentLayer.childList.length){  
8.         self._slideshowIndex = 0;  
9.     }  
10.       
11.     if(self._slideshowIndex < 0){  
12.         var obj = self.contentLayer.getChildAt(self.previousChildList[Math.abs(self._slideshowIndex)]);  
13.     }else{  
14.         var obj = self.contentLayer.getChildAt(self.nextChildList[Math.abs(self._slideshowIndex)]);  
15.     }  
16.     obj.x = self.rangeWidth*self._currentIndex;  
17.               
18.     self._toX = -(self._currentIndex*self.rangeWidth);  
19.       
20.     var tweenObj = LTweenLite.to(self.contentLayer,1,{  
21.         x:self._toX  
22.     });  
23. };  
24. LSlideshowSample1.prototype.previous = function(){  
25.     var self = this;  
26.       
27.     self._currentIndex -= 1;  
28.     self._slideshowIndex -= 1;  
29.       
30.     if(self._slideshowIndex < -(self.contentLayer.childList.length-1)){  
31.         self._slideshowIndex = 0;  
32.     }  
33.       
34.     if(self._slideshowIndex < 0){  
35.         var obj = self.contentLayer.getChildAt(self.previousChildList[Math.abs(self._slideshowIndex)]);  
36.     }else{  
37.         var obj = self.contentLayer.getChildAt(self.nextChildList[Math.abs(self._slideshowIndex)]);  
38.     }  
39.     obj.x = self.rangeWidth*self._currentIndex;  
40.           
41.     self._toX = -(self._currentIndex*self.rangeWidth);  
42.       
43.     var tweenObj = LTweenLite.to(self.contentLayer,1,{  
44.         x:self._toX  
45.     });  
46. };  

其中用到了LTweenLite，这个是Lufylegend中给的一个用于实现缓动的类，具体方法请移步API文档。

还有一个getChildAt，这是lufylegend中LSprite类的一个成员函数，用于取出参数值在LSprite成员列表中相应的对象。

这个类在设计时为了方便大家使用，还提供了showFrameAt函数，可以直接跳到播放某一帧：

[javascript] view plain copy

1. LSlideshowSample1.prototype.showFrameAt = function(index,order){  
2.     var self = this;  
3.     if(self._slideshowIndex < 0){  
4.         if(self.previousChildList[Math.abs(self._slideshowIndex)] == index)return;  
5.     }else{  
6.         if(self.nextChildList[Math.abs(self._slideshowIndex)] == index)return;  
7.     }  
8.     if(order == LSlideshow.LEFTWARD){  
9.         self._currentIndex -= 1;  
10.     }else if(order == LSlideshow.RIGHTWARD){  
11.         self._currentIndex += 1;  
12.     }else{  
13.         self._currentIndex += 1;  
14.     }  
15.     self._slideshowIndex = index;  
16.       
17.     var obj = self.contentLayer.getChildAt(index);  
18.     obj.x = self.rangeWidth*self._currentIndex;  
19.       
20.     self._toX = -(self._currentIndex*self.rangeWidth);  
21.       
22.     var tweenObj = LTweenLite.to(self.contentLayer,1,{  
23.         x:self._toX  
24.     });  
25. };  

在上面也提到过自动播放这个功能，我们不妨温习一下调用自动播放的地方：

[javascript] view plain copy

1. if(self.isLoop == true){  
2.     self.loopData = loopData;  
3.     self.frameIndex = 0;  
4.     self.maxFrame = Math.floor(self.loopData.delay*1000/LGlobal.speed);  
5.     self.addEventListener(LEvent.ENTER_FRAME,self.loopPlay);  
6. }  

在时间轴事件ENTER_FRAME中，我们调用了loopPlay函数，这个函数的代码如下：

[javascript] view plain copy

1. LSlideshowSample1.prototype.loopPlay = function(self){  
2.     if(self.contentLayer.childList.length == 0)return;  
3.     if(self.frameIndex++ < self.maxFrame)return;  
4.     self.frameIndex = 0;  
5.     if(self.loopData.order == LSlideshow.RIGHTWARD){  
6.         self.next();  
7.     }else if(self.loopData.order == LSlideshow.LEFTWARD){  
8.         self.previous();  
9.     }else if(self.loopData.order == LSlideshow.RANDOM){  
10.         var index = Math.floor(Math.random()*(self.contentLayer.childList.length-1));  
11.         var order = Math.random() > 0.5 ? LSlideshow.LEFTWARD : LSlideshow.RIGHTWARD;  
12.         self.showFrameAt(index,order);  
13.     }  
14. };  

其中我们能看到了LSlideshow.RIGHTWAR，LSlideshow.LEFTWARD，LSlideshow.RANDOM这几种播放方式，它们分别是在LSlideshow静态类中得到定义的。如下：

[javascript] view plain copy

1. var LSlideshow = function(){throw "LSlideshow cannot be instantiated";};  
2. LSlideshow.type = "LSlideshow";  
3. LSlideshow.RIGHTWARD = "rightward";  
4. LSlideshow.LEFTWARD = "leftward";  
5. LSlideshow.RANDOM = "random";  

LSlideshow.RIGHTWAR代表向右滚动，LSlideshow.LEFTWARD代表向左滚动，LSlideshow.RANDOM代表随机滚动。

最后还加了一个getFrameIndex的函数，是用于取当前帧的序号的：

[javascript] view plain copy

1. LSlideshowSample1.prototype.getFrameIndex = function(){  
2.     var self = this;  
3.     if(self._slideshowIndex < 0){  
4.         var v = self.previousChildList[Math.abs(self._slideshowIndex)];  
5.     }else{  
6.         var v = self.nextChildList[Math.abs(self._slideshowIndex)];  
7.     }  
8.     return v;  
9. };  

ok，幻灯片类就搞定了~只要搞清楚原理，其实还是挺简单的，不是吗？接下来是使用举例：

[html] view plain copy

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4. <meta charset="UTF-8">  
5. <title>幻灯片效果</title>  
6. </head>  
7. <body>  
8. <div id="mylegend">loading......</div>  
9. <script type="text/javascript" src="./lufylegend-1.8.0.min.js"></script>  
10. <script type="text/javascript" src="./lufylegend.ui-0.2.0.min.js"></script>  
11. <script type="text/javascript" src="./LSlideshow.js"></script>  
12. <script type="text/javascript" src="./LSlideshowSample1.js"></script>  
13. <script>  
14. init(50,"mylegend",980,609,main);  
15. var backLayer,slideshowObj;  
16. var loadData = [  
17.     {name:"caocao",path:"./images/cao_cao.jpg"},  
18.     {name:"diaochan",path:"./images/diao_chan.jpg"},  
19.     {name:"guanyu",path:"./images/guan_yu.jpg"},  
20.     {name:"zhaoyun",path:"./images/zhao_yun.jpg"},  
21.     {name:"sunshangxiang",path:"./images/sun_shang_xiang.jpg"}  
22. ];  
23. var datalist = {};  
24. function main(){  
25.     LStage.setDebug(true);  
26.     if(LGlobal.canTouch){  
27.         LGlobal.stageScale = LStageScaleMode.EXACT_FIT;  
28.         LSystem.screen(LStage.FULL_SCREEN);  
29.     }  
30.       
31.     var loadingLayer = new LoadingSample5();  
32.     addChild(loadingLayer);  
33.       
34.     LLoadManage.load(  
35.         loadData,  
36.         function(p){  
37.             loadingLayer.setProgress(p);  
38.         },  
39.         function(r){  
40.             datalist = r;  
41.             removeChild(loadingLayer);  
42.             initPage();  
43.         }  
44.     );  
45. }     
46. function initPage(){  
47.     backLayer = new LSprite();  
48.     addChild(backLayer);  
49.       
50.     slideshowObj = new LSlideshowSample1(971,609,true,{delay:3,order:LSlideshow.RANDOM});  
51.     backLayer.addChild(slideshowObj);  
52.       
53.     slideshowObj.setFrame(new LBitmap(new LBitmapData(datalist["caocao"])));  
54.     slideshowObj.setFrame(new LBitmap(new LBitmapData(datalist["diaochan"])));  
55.     slideshowObj.setFrame(new LBitmap(new LBitmapData(datalist["guanyu"])));  
56.     slideshowObj.setFrame(new LBitmap(new LBitmapData(datalist["zhaoyun"])));  
57.     slideshowObj.setFrame(new LBitmap(new LBitmapData(datalist["sunshangxiang"])));  
58.       
59.     addButton();  
60. }  
61. function addButton(){  
62.     var next_btn = new LButtonSample2(">",20,"黑体","white");  
63.     next_btn.backgroundCorl = "#008800";  
64.     next_btn.x = LStage.width-next_btn.getWidth()-40;  
65.     next_btn.y = (LStage.height-next_btn.getHeight())*0.5;  
66.     backLayer.addChild(next_btn);  
67.     next_btn.addEventListener(LMouseEvent.MOUSE_DOWN,function(){  
68.         slideshowObj.next();  
69.     });  
70.       
71.     var last_btn = new LButtonSample2("<",20,"黑体","white");  
72.     last_btn.backgroundCorl = "#008800";  
73.     last_btn.x = 20;  
74.     last_btn.y = (LStage.height-last_btn.getHeight())*0.5;  
75.     backLayer.addChild(last_btn);  
76.     last_btn.addEventListener(LMouseEvent.MOUSE_DOWN,function(){  
77.         slideshowObj.previous();  
78.     });  
79.       
80.     for(var i=0; i<5; i++){  
81.         var page_btn = new LButtonSample2(i+1,20,"黑体","white");  
82.         page_btn.backgroundCorl = "#008800";  
83.         page_btn.x = 50*i+600;  
84.         page_btn.y = LStage.height-page_btn.getHeight()-40;  
85.         backLayer.addChild(page_btn);  
86.         page_btn.addEventListener(LMouseEvent.MOUSE_DOWN,function(event,o){  
87.             var textObj = o.getChildAt(1).getChildAt(0);  
88.             var toIndex = parseInt(textObj.text)-1;  
89.             slideshowObj.showFrameAt(toIndex,LSlideshow.LEFTWARD);  
90.         });  
91.     }  
92. }  
93. function ondown(event){  
94.     if(event.offsetX <= 100){  
95.         slideshowObj.previous();  
96.     }else if(event.offsetX >= LStage.width-100){  
97.         slideshowObj.next();  
98.     }  
99. }  
100. </script>   
101. </body>  
102. </html>  

运行代码后，就得到了本文最上面展示的效果。

四，源代码

上面讲解得有些乱，大家可以把源代码下载下来看看。

最后，奉上源代码：http://files.cnblogs.com/yorhom/Slideshow_source.zip

本章就到此为止，以上就是本篇所有内容，欢迎大家交流。

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

欢迎继续关注我的博客

顶

22

踩

0

 

 

• 上一篇用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)
• 下一篇HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理

我的同类文章

【Lufylegend.js】（32） 【Html5&JavaScript】（51）

• •【HTML5】利用lufylegend实现游戏中的卷轴2016-02-18阅读3433
• •『HTML5梦幻之旅』 - 仿Qt示例Drag and Drop Robot（换装机器人）2015-07-06阅读8421
• •HTML5游戏开发-扫雷及其算法研究2015-05-29阅读2324
• •『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词2015-01-03阅读4882
• •HTML5物理游戏开发 - 越野山地自行车（二）创建一辆可操控的自行车2014-04-13阅读4421
• •【HTML5物理小Demo】用Box2dWeb实现锁链+弹簧效果2014-02-05阅读9061

• •『HTML5梦幻之旅』 - 动感圆圈2015-12-11阅读2018
• •HTML5另类塔防游戏 -《三国战线》发布2015-06-07阅读2882
• •『HTML5梦幻之旅』 - 舞动色彩，Canvas下实现颜色动画2015-01-28阅读2542
• •HTML5物理游戏开发 - 越野山地自行车（三）粉碎自行车2014-08-19阅读6075
• •HTML5物理游戏开发 - 越野山地自行车（一）建立各式各样的地形2014-03-02阅读6116

更多文章

猜你在找

ArcGIS for JavaScript

HTML 5移动开发从入门到精通

iOS8-Swift开发教程

零基础学HTML 5实战开发(第一季)

数据结构和算法

滚动效果marquee已被html5弃用

11个视觉差滚动效果的HTML5网站

HTML5梦幻星空可用作网页背景

JavaScript html js图片滑动切换效果幻灯片式切换新闻展示滚动新闻

JavaScript html 图片滑动切换效果幻灯片式切换新闻展示滚动新闻

查看评论

11楼 shanyishan12 2014-10-03 01:55发表 [回复]

请问你是用什么工具来编写代码的呢

Re: Yorhom 2014-10-03 19:19发表 [回复]

回复shanyishan12：html5和js开发用不着什么好的编辑器吧，记事本也行的。不过针对web开发这一类型的编辑器还挺多的，比如说Aptana studio，WebStorm，H5Builder。这些大型IDE虽然使用起来方便，但是如果是作为初学者，用这些工具反而会使自己纠结于IDE的功能，而不是去学习如何写程序。
目前我使用的是Sublime Text2，感觉还行吧，界面很美观，而且属于轻量级软件，不过貌似要收费。免费的文本编辑器有Notepad++。
总之写代码的话就不必要过分追究用什么工具，何况还是html5/js的开发。自己用起来顺手的工具就是好工具吧

10楼 风吹夏天 2013-11-13 22:37发表 [回复]

非常不错呀，而且你的详解写的也非常好。虽然我用的都是C++.这种新技术不常见到源码

Re: Yorhom 2013-11-14 20:37发表 [回复]

回复bluecol：多谢朋友支持啦～

9楼 lori0801 2013-10-30 08:59发表 [回复]

看明白了，精神值得学习

Re: Yorhom 2013-10-30 20:13发表 [回复]

回复lori_xj：O(∩_∩)O~~

8楼 会飞De琥珀 2013-10-25 09:40发表 [回复]

真起不明白,为啥那么多人对XP,对IE6那么不舍,

Re: Yorhom 2013-10-25 19:04发表 [回复]

回复u010953901：存在及合理~

7楼 奋斗的松树苗 2013-10-24 13:50发表 [回复]

初学者一枚，愿跟着大神学习HTML5，加油！

Re: Yorhom 2013-10-24 20:06发表 [回复]

回复u010020611：在下也算不了什么大神啊！一起加油吧！

6楼 siank 2013-10-22 23:18发表 [回复]

挺好的作品

5楼 程序员的家园 2013-10-22 11:04发表 [回复]

不错

4楼 coedears 2013-10-21 22:38发表 [回复]

半天就把html5搞懂了？ 太厉害了

Re: Yorhom 2013-10-22 13:34发表 [回复]

回复u011803182：木有啊...我只是说把幻灯片效果搞懂了啊……

3楼 i_like_cpp 2013-10-21 22:26发表 [回复]

写得好。

Re: Yorhom 2013-10-22 13:34发表 [回复]

回复i_like_cpp：多谢支持O(∩_∩)O~~

2楼 鹳狸媛 2013-10-21 13:49发表 [回复]

您的文章已被推荐到CSDN首页，感谢您的分享。

Re: Yorhom 2013-10-21 20:45发表 [回复]

回复suannai0314：多谢～

1楼 月影晃荡 2013-10-20 22:56发表 [回复]

一直在关注HTML5可是我们的项目基本上都是政府类的，内网的浏览器还都是IE6，IE8.暂时可能还用不到。

Re: Yorhom 2013-10-21 20:47发表 [回复]

回复yueyinghuangdang：学习一些新技术对未来的发展是有好处滴～

发表评论

• 用 户 名：
• szcsun5

• 评论内容：
• 

•   

* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场

核心技术类目

全部主题 Hadoop AWS 移动游戏 Java Android iOS Swift 智能硬件 Docker OpenStack VPN Spark ERP IE10 Eclipse CRM JavaScript 数据库 Ubuntu NFC WAP jQuery BI HTML5 Spring Apache .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 云计算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大数据 aptech Perl Tornado Ruby Hibernate ThinkPHP HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap

• 个人资料

• 
  Yorhom
  
  • 访问：590651次
  • 积分：7249
  • 等级：
  • 排名：第1827名
  • 原创：63篇
  • 转载：0篇
  • 译文：0篇
  • 评论：787条

• 联系我

• • 我的Github

  http://github.com/yuehaowang
  • 我的邮箱

  wangyuehao1999@gmail.com

• 我的微博

• lufylegend.js游戏引擎

• 
  
  • lufylegend引擎官方网站

  lufylegend.com/lufylegend
  • lufylegend引擎API文档

  lufylegend.com/lufylegend/api

• 我开发的游戏

• Greedy Bug
  	基于HTML5和lufylegend.js开源引擎的一款类似于贪吃蛇的游戏。相信这款游戏能给你带来欲速则不达、近在咫尺却无法接触地虐心体验!
  翻三国
  	本游戏基于开源HTML5引擎lufylegend.js开发，是一款跨平台休闲类翻牌游戏。本游戏一共有五个关卡，随着关卡难度的增加会有更多卡牌出现。快来考验一下自己的记忆力吧～

  
  More >>

• 文章搜索

• 博客专栏

• HTML5梦幻之旅 文章：8篇 阅读：53642

  lufylegend.js游戏开发实战 文章：19篇 阅读：245087

• 文章分类

• 【游戏开发】(21)
• 【C/C++】(3)
• 【Lufylegend.js】(33)
• 【Box2D】(5)
• 【游戏算法】(5)
• 【MacOS】(1)
• 【游戏引擎】(15)
• 【Linux】(1)
• 【Python】(8)
• 【Html5&JavaScript】(52)

• 文章存档

• • 2016年03月(3)
  • 2016年02月(3)
  • 2015年12月(1)
  • 2015年10月(2)
  • 2015年09月(1)
    展开

• 阅读排行

• Win7 + VirtualBox 安装 MacOS X 10.9 Mavericks 操作步骤(61587)
• HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理(26220)
• 『HTML5实现人工智能』小游戏《井字棋》发布，据说IQ上200才能赢【算法&代码讲解+资源打包下载】(26143)
• 【HTML5游戏开发】简单的《找不同汉字版》，来考考你的眼力吧(20829)
• 2D游戏中的碰撞检测：圆形与矩形碰撞检测（Javascript&C++版）(20422)
• 『HTML5挑战经典』是英雄就下100层-开源讲座(一)从天而降的英雄(18212)
• 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现(17550)
• 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)(16849)
• 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效(15004)
• HTML5小游戏《智力大拼图》发布，挑战你的思维风暴(14533)

• 评论排行

• 2D游戏中的碰撞检测：圆形与矩形碰撞检测（Javascript&C++版）(49)
• 『HTML5实现人工智能』小游戏《井字棋》发布，据说IQ上200才能赢【算法&代码讲解+资源打包下载】(33)
• 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)(32)
• 用Javascript开发《三国志曹操传》-开源讲座(四)-用地图块拼成大地图(31)
• 『HTML5梦幻之旅』-炫丽的流星雨效果(30)
• 『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词(29)
• HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理(27)
• Win7 + VirtualBox 安装 MacOS X 10.9 Mavericks 操作步骤(26)
• HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布(23)
• 用Javascript开发《三国志曹操传》-开源讲座(一)-让静态人物动起来(22)

• 最新评论

• html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

  Yorhom:@u012124438:见文档：http://lufylegend.com/api/zh_CN/ou...

• html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

  Yorhom:@u012124438:因为人物的宽度大约是149，当人物右边达到边缘时，x坐标为LStage.wi...

• JavaScript实现类的private、protected、public、static以及继承

  丁国华:博文介绍了JavaScript实现类的private、protected、public、static...

• HTML5游戏开发-扫雷及其算法研究

  丁国华:博文介绍了 HTML5游戏开发-扫雷及其算法研究，很详细的讲解，深入浅出，感谢博主的分享，期待后续博...

• html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

  hxx56324:还有就是this.anima.setAction(0,1,0,false);这一句的含义不太理解，请...

• html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

  hxx56324:楼主，我有一个问题，就是在判断人物是否到达画布最右边时，为什么是LSate.width-149呢？

• 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)

  xueyandy:plane or plain?

• 用Html5结合Qt制作一款本地化EXE游戏-太空大战(Space War)

  xueyandy:楼主的代码习惯很好，注释很详细！

• 2D游戏中的碰撞检测：圆形与矩形碰撞检测（Javascript&C++版）

  baiduwen3:@u014457633:无图无真相~

• 『HTML5梦幻之旅』 - 跟随歌曲显示当前歌词

  Yorhom:@Coding_Cc:嗯，我以前也发现了的，可能是获取文本高度的问题

• 推荐文章

• • *列式存储 HBase 系统架构学习
  • *通过Android源码分析再探观察者模式(二)
  • *浅析ZeroMQ工作原理及其特点
  • *Rebound-Android的弹簧动画库
  • *大型分布式网站术语分析
  • *Hadoop中Map端shuffle源码解析

公司简介 | 招贤纳士 | 广告服务 | 银行汇款帐号 | 联系方式 | 版权声明 | 法律顾问 | 问题报告 | 合作伙伴 | 论坛反馈

网站客服 杂志客服 微博客服 webmaster@csdn.net 400-600-2320 | 北京创新乐知信息技术有限公司 版权所有 | 江苏乐知网络技术有限公司 提供商务支持

京 ICP 证 09002463 号 | Copyright © 1999-2014, CSDN.NET, All Rights Reserved