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

转载 2012年11月26日 11:45:41

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


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

准备工作一

首先,你需要下载lufylegend库件1.4.1版

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

box2dweb你可以到这里下载

http://code.google.com/p/box2dweb/downloads/list

关于lufylegend库件的使用方法,大家可以看一下我以前的一些文章和教程,或者看下面的api说明。

http://lufy.netne.net/lufylegend-js.php?v=api

准备工作二

由于笔者的失误,没有将Box2dWeb的功能封转完,要制作物理游戏的话,不得不对lufylegend-1.4.1做一些扩展,大家可以下载这个扩展文件,等下次库件的1.5版发布的时候会将这些扩展加进去的。

http://fsanguo.comoj.com/download.php?i=lufylegend-1.4.1.extension.js


做好了了上面的准备工作,现在就来跟着笔者来一步步的试一下吧。

一,旋转飞起的小鸟

首先来建一个小鸟

[javascript] view plaincopy
  1. function Bird(){  
  2.     base(this,LSprite,[]);  
  3.     var self = this;  
  4.     var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  5.     self.addChild(bitmap);  
  6. }  
有了这个类,我们把它显示到画面上就很简单了

[javascript] view plaincopy
  1. backLayer = new LSprite();    
  2. addChild(backLayer);  
  3. bird = new Bird();  
  4. bird.rotate = 0;  
  5. bird.x = 200;  
  6. bird.y = 430;  
  7. bird.yspeed = -5;  
  8. backLayer.addChild(bird);  
玩过愤怒的小鸟的朋友们都知道,游戏开始时,小鸟跳上弹弓的时候有一个旋转动作,我现在通过lufylegend库件的LTweenLite缓动类来实现这一功能。

[javascript] view plaincopy
  1. LTweenLite.to(bird,1,  
  2.     {   
  3.         x:100,  
  4.         yspeed:5,  
  5.         delay:1,  
  6.         rotate:-360,  
  7.         onUpdate:function(){  
  8.             bird.y += bird.yspeed;  
  9.         },  
  10.         onComplete:function(){  
  11.             start();  
  12.         },  
  13.         ease:Sine.easeIn  
  14.     }  
  15. );  
通过上面的代码可以看到,LTweenLite类不但可以改变一些LSprite对象的常用属性,其实可以改变任意自定义的属性,上面就是通过LTweenLite将yspeed由-5变到了,然后通过onUpdate来改变小鸟的y坐标。

下面是测试连接

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


二,弹出的小鸟

接下来在小鸟弹起后的位置加上一个弹弓

[javascript] view plaincopy
  1. bitmap = new LBitmap(new LBitmapData(imglist["slingshot1"]));  
  2. bitmap.x = 215;  
  3. bitmap.y = 290;  
  4. backLayer.addChild(bitmap);  
  5.   
  6. bird = new LSprite();  
  7. bird.name = "bird01";  
  8. backLayer.addChild(bird);  
  9. bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));  
  10. bird.addChild(bitmap);  
  11.   
  12. bitmap = new LBitmap(new LBitmapData(imglist["slingshot2"]));  
  13. bitmap.x = 190;  
  14. bitmap.y = 290;  
  15. backLayer.addChild(bitmap);  

效果如图


上面代码将弹弓的前后两个分叉加到了画面上。
接着通过鼠标来拖拽小鸟,首先加入鼠标按下事件

[javascript] view plaincopy
  1. backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart);  
  2. startX = bird.x + bird.getWidth()*0.5;  
  3. startY = bird.y + bird.getHeight()*0.5;  
上面代码加上了鼠标事件,并记录下了小鸟中心的位置作为弹弓的中心位置。
然后当鼠标按下的时候,判断下鼠标是否点击到了小鸟,然后移除鼠标按下事件,并加入鼠标移动事件和鼠标弹起事件。

[javascript] view plaincopy
  1. function downStart(event){  
  2.     if(event.offsetX > bird.x && event.offsetX < bird.x + bird.getWidth() &&   
  3.         event.offsetY > bird.y && event.offsetY < bird.y + bird.getHeight()){  
  4.         backLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,downStart);  
  5.         backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,downMove);  
  6.         backLayer.addEventListener(LMouseEvent.MOUSE_UP,downOver);  
  7.     }  
  8. }  
先来实现下鼠标移动时候的,让小鸟跟随鼠标

[javascript] view plaincopy
  1. unction downMove(event){  
  2.     var r = Math.sqrt(Math.pow((startX - event.selfX),2)+Math.pow((startY - event.selfY),2));  
  3.     if(r > 100)r = 100;  
  4.     var angle = Math.atan2(event.selfY - startY,event.selfX - startX);  
  5.     bird.x = Math.cos(angle) * r + startX - bird.getWidth()*0.5;  
  6.     bird.y = Math.sin(angle) * r + startY - bird.getHeight()*0.5;  
  7. }  
解释下上面的代码,首先,计算鼠标位置和弹弓的中心位置之间的距离,当距离大于100的时候,使其等于100。接着计算鼠标拖拽的角度,然后通过这个角度来计算并设置小鸟的坐标。

接着,看一下鼠标弹起后的功能,上面的代码里并没有用到box2dweb,我通过将小鸟变为box2d刚体,然后给小鸟加上一个力,来让小鸟弹飞出去。

[javascript] view plaincopy
  1. function downOver(event){  
  2.     backLayer.removeEventListener(LMouseEvent.MOUSE_UP,downOver);  
  3.     backLayer.removeEventListener(LMouseEvent.MOUSE_MOVE,downMove);  
  4.       
  5.     var startX2 = bird.x + bird.getWidth()*0.5;  
  6.     var startY2 = bird.y + bird.getHeight()*0.5;  
  7.     var r = Math.sqrt(Math.pow((startX - startX2),2)+Math.pow((startY - startY2),2));  
  8.     var angle = Math.atan2(startY2 - startY,startX2 - startX);  
  9.       
  10.     bird.addBodyCircle(bird.getWidth()*0.5,bird.getHeight()*0.5,bird.getWidth()*0.5,1,.5,.4,.5);  
  11.     var force = 7;  
  12.     var vec = new LGlobal.box2d.b2Vec2(-force*r*Math.cos(angle),-force*r*Math.sin(angle));  
  13.     bird.box2dBody.ApplyForce(vec, bird.box2dBody.GetWorldCenter());  
  14. }  
上面代码首先计算了一下小鸟的被拖拽的距离,以及被拖拽的角度。

addBodyCircle给小鸟加入body,让其变为一个刚体。

ApplyForce给刚体加上一个力。

好了,点开下面链接进行测试,通过拖拽小鸟,将小鸟弹飞出去吧。

http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index02.html


下面给出本次教程的源码,当然,lufylegend库件和box2dweb需要自己下载配置一下

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

举报

相关文章推荐

HTML5各引擎显示效率比较

现在越来越多的人开始尝试使用HTML5开发,HTML5的引擎也逐渐增多,开发者到底应该选择一款什么样的引擎呢?这一次我来对比一下几个我个人认为还不错的引擎的效率。 本次参加对比的引擎: 1. crea...

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

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理

又很久没有更新博客了,在这段时间里发生的事还蛮多的,回想起来才发现时间过得好快啊。至于博客嘛,天天都会关注,一来想看看大家是否写了一些评论,二来想看看大神们(如lufy,浅墨,雾央,Himi等)有没有...

lufylegend引擎 rpg开发之2D地图的碰撞检测

对于一款rpg来说,地图是不可缺少的内容

html5简单游戏编程从零开始

本文基于lufylegend游戏引擎,所以以下内容全部和此有关,       lufylegend引擎的下载地址: http://www.lufylegend.com/lufylegend      ...

用仿ActionScript的语法来编写html5——第七篇,自定义按钮

第七篇,自定义按钮 这次弄个简单点的,自定义按钮。 其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了。 下面是添加按钮的代码, function gameI...

lufylegend练习(2)Animation

学习如何做动画,其实动画就是图片不停切换,这是个基本概念,每幅图是一帧的话,一帧帧地走,看起来就是动画 先准备原图:
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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