HTML5梦幻之旅——炫丽的流星雨效果实现过程

徐家破镜昏如雾。半面人间露。等闲相约是看灯。谁料人间天上、似流星。朱门帘影深深雨。憔悴新人舞。天涯海角赏新晴。惟有桥边卖镜、是闲行。
——宋·刘辰翁·《虞美人》

流星出现的时候，人们都喜欢对着它们许愿，因为传说对着流星许下愿望后，愿望就能实现。不过流星很少见，至少我没有见到过，因此从来没有对着它许愿。最近出于兴趣，制作一个拖尾效果，后来想到可以通过拖尾效果来实现一下流星雨的效果。因此今天就来实现一下，也好让我等没有看到过流星的童鞋长长见识。

先发几个截图吧：
 

测试连接：http://www.cnblogs.com/yorhom/articles/3237944.html
一，准备工作
本次开发需要用到开源引擎lufylegend.js，引擎的下载地址&详细信息如下
引擎官方网站：
http://lufylegend.com/lufylegend
引擎API网站：
http://lufylegend.com/lufylegend/api
二，拖尾效果
实现流星雨，要用到拖尾效果，但lufylegend中没有添加拖尾的功能，所以只有自己写了，其实实现起来也不难，就是lufy太懒了，没有封装而已（愿lufy不要看到这句话啊……）。今天我就帮他老人家来实现一下这个效果。
拖尾这个效果在游戏中很常见，比如人物移动时的幻影，子弹等。因此我们把它封装为一个Smearing类，这个类主要负责实现拖尾效果。代码如下：

复制代码
/**
* Smearing
* @param $object 添加拖尾的对象
*/
function Smearing($object){
var self = this;
base(self,LSprite,[]);
self.x = 0;
self.y = 0;
self.mode = "";
self.smearingSprite = new LSprite();
self.addChild(self.smearingSprite);
self.object = $object;
self.originalSprite = new LSprite();
self.addChild(self.originalSprite);
self.originalSprite.addChild(self.object);
self.addEventListener(LEvent.ENTER_FRAME,self.smeared);
}

代码清单1
接下来由我逐字逐句地解释一番。
第一行代码就不讲解了，地球上的IT人都知道。因此从第二行开始说起。
首先我们将这个类用base继承自LSprite，如代码清单2（至于base和LSprite是什么，可以到API文档里去看看，或者看看我以前的文章）。

复制代码
base(self,LSprite,[]);

代码清单2
接下来，我们加入一个用来添加拖尾的层。如代码清单3

复制代码
self.smearingSprite = new LSprite();
self.addChild(self.smearingSprite);