html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力

转载 2012年11月27日 15:39:13

《html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟》
《html5游戏开发-愤怒的小鸟-开源讲座(二)-跳入弹出的小鸟》



在前面已经实现了利用外力将小鸟弹飞出去,并且实现了镜头的跟随。本次来研究一下小鸟与其他物体之间发生碰撞时的冲力,以及由碰撞而使物体发生变形,进而消失,下面是前两讲的链接,看本篇教程之前请朋友们最好先了解一下。

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

http://blog.csdn.net/lufy_legend/article/details/7765599

html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头

http://blog.csdn.net/lufy_legend/article/details/7782968


其实在box2d中,只要我们设定了物体的密度,摩擦,以及弹力等属性之后,他们之间会模拟真实的世界进行碰撞,如果想要根据这些碰撞来做一些特殊的处理的话,就需要取得它们之间碰撞的冲力,从而根据冲力的大小来做自己想要做的事情,在lufylegend库件中使用下面一行代码来检测碰撞。

[javascript] view plaincopy
  1. LGlobal.box2d.setEvent(LEvent.POST_SOLVE,postSolve);  
碰撞函数如下,接受两个参数
[javascript] view plaincopy
  1. function postSolve(contact, impulse){  
  2. }  
然后用impulse.normalImpulses[0]来取得碰撞产生的冲力大小。

下面,我们来根据碰撞的冲力来控制猪头的状态,首先准备下面两张图


然后,建立Pig类如下

[javascript] view plaincopy
  1. function Pig(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     self.hp = 200;  
  5.     self.name = "pig";  
  6.     self.list = ["pig01","pig02"];  
  7.     self.bitmap = new LBitmap(new LBitmapData(imglist[self.list[0]]));  
  8.     self.addChild(self.bitmap);  
  9.     self.addBodyCircle(24,self.bitmap.getHeight()*0.5,self.bitmap.getWidth()*0.5,1,5,.4,.13);  
  10. }  
  11. Pig.prototype.hit = function(value){  
  12.     var self = this;  
  13.     if(value < 10)return;  
  14.     if(self.hp == 200)self.bitmap.bitmapData = new LBitmapData(imglist[self.list[1]]);  
  15.     self.hp -= value;  
  16. }  
上面代码,在构造器里首先给猪头设置了一张健康的状态图片,然后在hit函数里,将猪头的图片变成了一张受伤的图片。
有了上面的Pig类,只要在猪头和其他物体之间发生碰撞的时候,将碰撞的冲力传入hit函数,就能控制猪头的状态和hp的值,当然你也可以为猪头准备多种状态的图片,比如轻伤,重伤等,然后在hit函数中根据它的hp值的大小,来给他设定不同的显示图片。

另外,在愤怒的小鸟这个游戏中,每个物体也都是有它的不同的状态的,比如下面的两张图,表示木条的两个状态


为了便于操作这些物体,我们和上面的猪头一样,建立一个Stage类,如下

[javascript] view plaincopy
  1. function Stage(list,rotate,m,ctrl){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     self.name = "stage";  
  5.     self.ctrl = ctrl;  
  6.     self.list = list;  
  7.     self.bitmap = new LBitmap(new LBitmapData(imglist[self.list[0]]));  
  8.     self.hp = 200;  
  9.     self.addChild(self.bitmap);  
  10.     self.addBodyPolygon(self.bitmap.getWidth(),self.bitmap.getHeight(),1,m,.4,.2);  
  11.     if(rotate != 0)self.setRotate(rotate*Math.PI/180);  
  12. }  
  13. Stage.prototype.hit = function(value){  
  14.     var self = this;  
  15.     if(!self.ctrl)return;  
  16.     if(value < 1)return;  
  17.     if(self.hp == 200)self.bitmap.bitmapData = new LBitmapData(imglist[self.list[1]]);  
  18.     self.hp -= value;  
  19. }  
原理和Pig类相同,就不多做解释了。
然后,在主函数中加入一些物体,如下

[javascript] view plaincopy
  1. setStage(["desk"],800,430,0,10,false);  
  2. setStage(["desk"],970,430,0,10,false);  
  3. setStage(["st11","st12"],935,410,0,1,true);  
  4. setStage(["st01","st02"],905,370,90,1,true);  
  5. setStage(["st01","st02"],965,370,90,1,true);  
  6. setStage(["st11","st12"],935,310,0,1,true);  
  7. setStage(["st31","st32"],817,370,90,1,true);  
  8. setStage(["st31","st32"],970,370,90,1,true);  
  9. setStage(["st31","st32"],895,250,0,1,true);  
  10. setStage(["st21","st22"],955,230,0,1,true);  
  11. setStage(["st31","st32"],858,150,90,1,true);  
  12. setStage(["st31","st32"],925,150,90,1,true);  
  13. setStage(["st11","st12"],935,50,0,1,true);  
  14. setStage(["st21","st22"],950,30,90,1,true);  
  15. setStage(["st21","st22"],800,430,90,1,true);  
  16. setStage(["st21","st22"],1100,430,90,1,true);  
  17. var pig = new Pig();  
  18. pig.x = 950;  
  19. pig.y = 173;  
  20. backLayer.addChild(pig);  
setStage函数如下,是为了实例化一个物体

[javascript] view plaincopy
  1. function setStage(list,x,y,rotate,m,ctrl){  
  2.     var stageLayer = new Stage(list,rotate,m,ctrl);  
  3.     stageLayer.x = x;  
  4.     stageLayer.y = y;  
  5.     backLayer.addChild(stageLayer);  
  6.     return stageLayer;  
  7. }  
上面的代码生成的画面如下


如果你玩过愤怒的小鸟这个游戏的话,对上面的画面应该不陌生吧,它就是愤怒的小鸟第一关的画面。

接下来,修改碰撞检测函数,因为我在lufylegend库件中将body的UserData设置成了LSprite对象本身,所以这里通过GetUserData来得到LSprite对象

[javascript] view plaincopy
  1. function postSolve(contact, impulse){  
  2.     if(contact.GetFixtureA().GetBody().GetUserData().hit)contact.GetFixtureA().GetBody().GetUserData().hit(impulse.normalImpulses[0]);  
  3.     if(contact.GetFixtureB().GetBody().GetUserData().hit)contact.GetFixtureB().GetBody().GetUserData().hit(impulse.normalImpulses[0]);  
  4. }  
有了上面的碰撞,现在运行游戏的话,可以得到下面的效果

可以看到,画面中的猪头和一些木条的状态都已经发生了变化了,这样我们就完成了根据碰撞来改变物体的状态了,下面当猪头的hp变为0的时候,将它移除游戏画面。

一般猪头在消失的时候,会有一个类似爆炸的效果,如下图


下面建立一个RemoveObject类来实现这一效果

[javascript] view plaincopy
  1. function RemoveObject(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     self.name = "remove";  
  5.     self.index = 0;  
  6.     self.bitmap = new LBitmap(new LBitmapData(imglist["remove"]));  
  7.     self.addChild(self.bitmap);  
  8. }  
  9. RemoveObject.prototype.run = function(){  
  10.     var self = this;  
  11.     if(self.index++ > 20){  
  12.         self.parent.removeChild(self);  
  13.     }     
  14. }  
上面的run函数中,之所以要在运行20次循环之后才将其移除,是为了让上面的爆炸状态稍微持续一小段时间,然后才消失。

剩下最后一个处理,就是在循环函数中,监视这些物体的状态,来控制它们什么时候消失

[javascript] view plaincopy
  1. function onframe(){  
  2.     if(bird){  
  3.         backLayer.x = LGlobal.width*0.5 - (bird.x + bird.getWidth()*0.5);     
  4.         if(backLayer.x > 0){  
  5.             backLayer.x=0;  
  6.         }else if(backLayer.x < LGlobal.width - 1600){  
  7.             backLayer.x = LGlobal.width - 1600;  
  8.         }  
  9.         LGlobal.box2d.synchronous();  
  10.     }  
  11.     var child;  
  12.     for(var key in backLayer.childList){  
  13.         child = backLayer.childList[key];  
  14.         if(child.name == null)continue;  
  15.         if(child.x < -child.getWidth() || child.x > backLayer.getWidth()){  
  16.             backLayer.removeChild(child);  
  17.             if(child.name == "bird01"){  
  18.                 bird = null;  
  19.                 backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,moveStart);  
  20.                 backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,moveRun);  
  21.                 backLayer.addEventListener(LMouseEvent.MOUSE_UP,moveEnd);  
  22.             }  
  23.         }else if((child.name == "stage" || child.name == "pig") && child.hp <= 0){  
  24.             if(child.name == "pig"){  
  25.                 var removeObj = new RemoveObject();  
  26.                 removeObj.x = child.x;  
  27.                 removeObj.y = child.y;  
  28.                 backLayer.addChild(removeObj);  
  29.             }  
  30.             backLayer.removeChild(child);  
  31.         }else if(child.name == "remove"){  
  32.             child.run();  
  33.         }  
  34.     }  
  35. }  
上面代码都很简单,就不解释了,其中小鸟消失之后,我加入了三个事件,用来移动屏幕,最后会给出完整代码,大家可以看一下
[javascript] view plaincopy
  1. backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,moveStart);  
  2. backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,moveRun);  
  3. backLayer.addEventListener(LMouseEvent.MOUSE_UP,moveEnd);  

好了,下面是效果图和测试连接,试试看吧

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample04/index.html



大家可以看到,上面的小鸟已经把猪头给撞爆了!


下面给出本次教程的源码,lufylegend库件和box2dweb需要自己下载配置一下,库件1.4.1的扩展部分请到第一讲中下载。

http://fsanguo.comoj.com/download.php?i=AngryBirds3.rar


本系列讲座到此为止了,愤怒的小鸟的基本功能已经都实现了,剩下的就是将元素多样化了,大家可以尽情发挥自己的想象力,制作自己喜欢的物理游戏了。

相关文章推荐

html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力

在前面已经实现了利用外力将小鸟弹飞出去,并且实现了镜头的跟随。本次来研究一下小鸟与其他物体之间发生碰撞时的冲力,以及由碰撞而使物体发生变形,进而消失,下面是前两讲的链接,看本篇教程之前请朋友们最好先了...

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

http://blog.csdn.net/lufy_legend/article/details/7804165 愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2d...

html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头

转载自: http://blog.csdn.net/lufy_legend/article/details/7782968 上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如...

html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头

上一讲中介绍了如何让小鸟旋转跳上弹弓,以及利用外部力使小鸟弹飞出去,但是如果不做任何处理的话,小鸟就这么直冲冲的飞出屏幕了,本次我们就要让镜头时刻跟随小鸟来移动。下面是上一讲的连接,没有看过上一讲的朋...

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

转载自: http://blog.csdn.net/lufy_legend/article/details/7765599   目前IE浏览器还不支持HTML5,但可以用火狐浏览器测试。   ...

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

http://blog.csdn.net/lufy_legend/article/details/7765599 愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2d...

html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟

愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用lufylegend库件和Box2dWeb物理引擎来看看在html5中如何制作此类经典的物理游戏。 准备工作一 首先,你需要下载lufylegend...

html5愤怒的小鸟

  • 2012-05-30 09:50
  • 1.91MB
  • 下载

Html5愤怒的小鸟源码

  • 2016-06-12 09:17
  • 4.08MB
  • 下载

[Unity3D]Unity3D游戏开发之《愤怒的小鸟》弹弓实现

各位朋友,大家晚上好, 我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。今天我们来做一个高端大气上档次的东西。我相信大家都玩过一款叫做《愤怒的小鸟》的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)