日期:2014-05-16  浏览次数:20586 次

『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类,这个类主要负责实现拖尾效果。代码如下:

?

[javascript]?view plaincopy
?