《制作一款HTML5 RPG游戏引擎教程(二).docx》由会员分享，可在线阅读，更多相关《制作一款HTML5 RPG游戏引擎教程(二).docx（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、获得本次开发的灵感来自lufy在lufylegend.js下载包中编写的一个实例。一，LEffect类首先来搞一个LEffect类，构造器如下：javascriptview plaincopy1. functionLEffect()2. vars=this;3. base(s,LSprite,);4. s.rainList=;5. s.snowList=;6. s.rainLayer=newLSprite();7. s.addChild(s.rainLayer);8. s.snowLayer=newLSprite();9. s.addChild(s.snowLayer);10. 这个LEffe
2、ct类也是继承自LSprite，rainList是用来装雨点的一个数组，snowList则是用来装雪的一个数组。rainLayer，snowLayer分别是一个LSprite，如果是雪就绘画在snowLayer上，雨就在rainLayer。这个构造器很简单，接下来就来看看下雨的效果是怎么样实现的。二，烟雨纷纷这里我用烟雨来形容这个效果，难免有一些过分，因为它的美感远远还没达到那种地步。不过能在屏幕上飘雨点子还是实现了的，那好，就来让我们来看看关于它的代码吧：javascriptview plaincopy1. LEffect.prototype.raining=function(speed,s
3、ize)2. vars=this;3. if(!speed)speed=30;4. if(!size)size=5;5. s.rainLayer.addEventListener(LEvent.ENTER_FRAME,function()6. s.onshow(rain,speed,size);7. );8. 首先，它是LEffect一个成员类，叫raining，有两个参数，分别是下雨时雨点落下速度，另一个是雨点尺寸。当然，使用时可以不给它们赋值，如果不给它们赋值那就用默认的值。接着加入ENTER_FRAME事件，也就是说，当rainLayer刷新一次，就调用以下功能，相当于一个时间轴。ENT
4、ER_FRAME具体的使用方法可以去lufylegend API文档看看。也许有朋友心急了，想迫切地看看onshow是个什么东西。本文最后一节会讲它，因为它和下雪的效果也有些关系。接下来就轮到飞雪效果了。三，飞雪效果这次直接上代码吧，很raining差不多，只是改了最后调用onshow时传的参数和参数赋值而已：javascriptview plaincopy1. LEffect.prototype.snowing=function(speed,size)2. vars=this;3. if(!speed)speed=10;4. if(!size)size=1;5. s.snowLayer.ad
5、dEventListener(LEvent.ENTER_FRAME,function()6. s.onshow(snow,speed,size);7. );8. 四，onshow方法在实现raining和snowing时，我们都用到了onshow方法，并且还给它几个参数，我们不妨先看看代码：javascriptview plaincopy1. LEffect.prototype.onshow=function(thing,speed,size)2. vars=this;3. if(thing=rain)4. s.rainLayer.graphics.clear();5. varrainX=Ma
6、th.random()*(LStage.width-10-10)+10;6. varn=s.rainList.length;7. while(n-)8. varo=s.rainListn;9. o.y+=o.s;10. s.rainLayer.graphics.drawRect(1,white,o.x,o.y,1,size,true,#f3f3f3);11. 12. s.rainList.push(x:rainX,y:0,s:speed);13. elseif(thing=snow)14. s.snowLayer.graphics.clear();15. varsnowX=Math.rando
7、m()*(LStage.width-10-10)+10;16. varn=s.snowList.length;17. while(n-)18. varo=s.snowListn;19. o.y+=o.s;20. s.snowLayer.graphics.drawArc(2,white,o.x,o.y,size,0,2*Math.PI,true,white);21. 22. s.snowList.push(x:snowX,y:0,s:speed);23. 24. 很显然，这个onshow方法是整个效果类的核心部分，光看代码长度就应该知道。首先我们来看看它的参数：thing：效果类型，如果为sno
8、w就下雪，如果是rain就下雨speed：下雨下雪的速度size：下雨下雪的尺寸speed，size和snowing、raining中的speed，size值是一样的，因此，如果你在用snowing、raining时，直接给它们的参数赋值就行了。我们现在来解释一下代码：javascriptview plaincopy1. if(thing=rain)2. s.rainLayer.graphics.clear();3. varrainX=Math.random()*(LStage.width-10-10)+10;4. varn=s.rainList.length;5. while(n-)6. v
9、aro=s.rainListn;7. o.y+=o.s;8. s.rainLayer.graphics.drawRect(1,white,o.x,o.y,1,size,true,#f3f3f3);9. 10. s.rainList.push(x:rainX,y:0,s:speed);11. 以上是下雨效果的实现，首先我们先清屏一次，接着随机取一个x坐标作为绘制的位置。接着我们遍历了一下我们的雨点数组，并且每遍历到一个，就把这个的y坐标加上速度的大小。然后用lufylegend中专门用来画矩形的函数画一个小矩形作为一个雨点。然后在雨点数组中记录下这些雨点的数据。由于我们用了时间轴事件，所以就能使
10、雨点不断地画出来。下雪的原理是一样的，就只有绘画方式不同，把画矩形改成了画圆而已。大家可以根据我刚才说的对应看看。五，封装完成后应该怎么写？刚刚我们把效果类封装好了，那么别人怎么用呢？我不妨给大家呈现一下代码，原本我们要写百十行才能实现的，封装完成后就只有这些了：javascriptview plaincopy1. varbackLayer=newLSprite();2. vareffect=newLEffect();3. backLayer.addChild(effect);4. /下雪5. effect.snowing();6. /下雨7. effect.raining();很简单是不是？
11、这就是封装的力量！六，效果演示为了方便测试，我给它加了一个按钮和选择框用来显示不同的效果。截图如下：演示地址：代码很少，归纳后如下，感兴趣的朋友可以复制下来看看：javascriptview plaincopy1. /*2. *LEffect效果类3. */4. functionLEffect()5. vars=this;6. base(s,LSprite,);7. s.rainList=;8. s.snowList=;9. s.rainLayer=newLSprite();10. s.addChild(s.rainLayer);11. s.snowLayer=newLSprite();12.
12、 s.addChild(s.snowLayer);13. 14. LEffect.prototype.raining=function(speed,size)15. vars=this;16. if(!speed)speed=30;17. if(!size)size=5;18. s.rainLayer.addEventListener(LEvent.ENTER_FRAME,function()19. s.onshow(rain,speed,size);20. );21. 22. LEffect.prototype.snowing=function(speed,size)23. vars=thi
13、s;24. if(!speed)speed=10;25. if(!size)size=1;26. s.snowLayer.addEventListener(LEvent.ENTER_FRAME,function()27. s.onshow(snow,speed,size);28. );29. 30. LEffect.prototype.onshow=function(thing,speed,size)31. vars=this;32. if(thing=rain)33. s.rainLayer.graphics.clear();34. varrainX=Math.random()*(LStag
14、e.width-10-10)+10;35. varn=s.rainList.length;36. while(n-)37. varo=s.rainListn;38. o.y+=o.s;39. s.rainLayer.graphics.drawRect(1,white,o.x,o.y,1,size,true,#f3f3f3);40. 41. s.rainList.push(x:rainX,y:0,s:speed);42. elseif(thing=snow)43. s.snowLayer.graphics.clear();44. varsnowX=Math.random()*(LStage.width-10-10)+10;45. varn=s.snowList.length;46. while(n-)47. varo=s.snowListn;48. o.y+=o.s;49. s.snowLayer.graphics.drawArc(2,white,o.x,o.y,size,0,2*Math.PI,true,white);50. 51. s.snowList.push(x:snowX,y:0,s:speed);52. 53. 前几天做了一个留言板，欢迎大家发表自己的意见本文由: 整理编辑 资源来源：