制作一款HTML5 RPG游戏引擎教程(二)

《制作一款HTML5 RPG游戏引擎教程(二)》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、※获得本次开发的灵感来自lufy在lufylegend.js下载包中编写的一个实例。一，LEffect类首先来搞一个LEffect类，构造器如下：[javascript] viewplaincopy1.function LEffect(){  2.    var s = this;  3.    base(s,LSprite,[]);  4.    s.rainList = [];  5.    s.snowList = [];  6.    s.rainLayer = new LSprite();  7.    s.addChild(s.rainLayer)

2、;  8.    s.snowLayer = new LSprite();  9.    s.addChild(s.snowLayer);  10.}  这个LEffect类也是继承自LSprite，rainList是用来装雨点的一个数组，snowList则是用来装雪的一个数组。rainLayer，snowLayer分别是一个LSprite，如果是雪就绘画在snowLayer上，雨就在rainLayer。这个构造器很简单，接下来就来看看下雨的效果是怎么样实现的。二，烟雨纷纷这里我用烟雨来形容这个效果，难免有一些过分，因为它的美感远远还没达到那种地步。不过能在屏

3、幕上飘雨点子还是实现了的，那好，就来让我们来看看关于它的代码吧：[javascript] viewplaincopy1.LEffect.prototype.raining = function(speed,size){  2.    var s = this;  3.    if(!speed)speed = 30;  4.    if(!size)size = 5;  5.    s.rainLayer.addEventListener(LEvent.ENTER_FRAME,function(){  6.        s.onshow("rain",spe

4、ed,size);  7.    });  8.}  首先，它是LEffect一个成员类，叫raining，有两个参数，分别是下雨时雨点落下速度，另一个是雨点尺寸。当然，使用时可以不给它们赋值，如果不给它们赋值那就用默认的值。接着加入ENTER_FRAME事件，也就是说，当rainLayer刷新一次，就调用以下功能，相当于一个时间轴。ENTER_FRAME具体的使用方法可以去lufylegendAPI文档看看。也许有朋友心急了，想迫切地看看onshow是个什么东西。本文最后一节会讲它，因为它和下雪的效果也有些关系。接下来就轮到飞雪效果了。三，飞雪效果这次直接上

5、代码吧，很raining差不多，只是改了最后调用onshow时传的参数和参数赋值而已：[javascript] viewplaincopy1.LEffect.prototype.snowing = function(speed,size){  2.    var s = this;  3.    if(!speed)speed = 10;  4.    if(!size)size = 1;  5.    s.snowLayer.addEventListener(LEvent.ENTER_FRAME,function(){  6.        s.onshow

6、("snow",speed,size);  7.    });  8.}  四，onshow方法在实现raining和snowing时，我们都用到了onshow方法，并且还给它几个参数，我们不妨先看看代码：[javascript] viewplaincopy1.LEffect.prototype.onshow = function(thing,speed,size){  2.    var s = this;  3.    if(thing == "rain"){  4.        s.rainLayer.graphics.clear();  5.    

7、    var rainX = Math.random()*(LStage.width-10-10)+10;  6.        var n = s.rainList.length;  7.        while(n--){  8.            var o = s.rainList[n];  9.            o.y += o.s;  10.            s.rainLayer.graphics.drawRect(1,"white",[o.x,o.y,1,size],true,"#f3f3f3");  11.        

8、}  12.        s.rai