html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
来源:互联网 发布:mac book pro 编辑:程序博客网 时间:2024/05/16 01:34
愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用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
做好了了上面的准备工作,现在就来跟着笔者来一步步的试一下吧。
一,旋转飞起的小鸟
首先来建一个小鸟
function Bird(){base(this,LSprite,[]);var self = this;var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));self.addChild(bitmap);}有了这个类,我们把它显示到画面上就很简单了
backLayer = new LSprite();addChild(backLayer);bird = new Bird();bird.rotate = 0;bird.x = 200;bird.y = 430;bird.yspeed = -5;backLayer.addChild(bird);玩过愤怒的小鸟的朋友们都知道,游戏开始时,小鸟跳上弹弓的时候有一个旋转动作,我现在通过lufylegend库件的LTweenLite缓动类来实现这一功能。
LTweenLite.to(bird,1,{ x:100,yspeed:5,delay:1,rotate:-360,onUpdate:function(){bird.y += bird.yspeed;},onComplete:function(){start();},ease:Sine.easeIn});通过上面的代码可以看到,LTweenLite类不但可以改变一些LSprite对象的常用属性,其实可以改变任意自定义的属性,上面就是通过LTweenLite将yspeed由-5变到了,然后通过onUpdate来改变小鸟的y坐标。
下面是测试连接
http://lufy.netne.net/lufylegend-js/lufylegend-1.4/box2d/sample02/index.html
二,弹出的小鸟
接下来在小鸟弹起后的位置加上一个弹弓
bitmap = new LBitmap(new LBitmapData(imglist["slingshot1"]));bitmap.x = 215;bitmap.y = 290;backLayer.addChild(bitmap);bird = new LSprite();bird.name = "bird01";backLayer.addChild(bird);bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));bird.addChild(bitmap);bitmap = new LBitmap(new LBitmapData(imglist["slingshot2"]));bitmap.x = 190;bitmap.y = 290;backLayer.addChild(bitmap);
效果如图
接着通过鼠标来拖拽小鸟,首先加入鼠标按下事件
backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart);startX = bird.x + bird.getWidth()*0.5;startY = bird.y + bird.getHeight()*0.5;上面代码加上了鼠标事件,并记录下了小鸟中心的位置作为弹弓的中心位置。
然后当鼠标按下的时候,判断下鼠标是否点击到了小鸟,然后移除鼠标按下事件,并加入鼠标移动事件和鼠标弹起事件。
function downStart(event){if(event.offsetX > bird.x && event.offsetX < bird.x + bird.getWidth() && event.offsetY > bird.y && event.offsetY < bird.y + bird.getHeight()){backLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,downStart);backLayer.addEventListener(LMouseEvent.MOUSE_MOVE,downMove);backLayer.addEventListener(LMouseEvent.MOUSE_UP,downOver);}}先来实现下鼠标移动时候的,让小鸟跟随鼠标
unction downMove(event){var r = Math.sqrt(Math.pow((startX - event.selfX),2)+Math.pow((startY - event.selfY),2));if(r > 100)r = 100;var angle = Math.atan2(event.selfY - startY,event.selfX - startX);bird.x = Math.cos(angle) * r + startX - bird.getWidth()*0.5;bird.y = Math.sin(angle) * r + startY - bird.getHeight()*0.5;}解释下上面的代码,首先,计算鼠标位置和弹弓的中心位置之间的距离,当距离大于100的时候,使其等于100。接着计算鼠标拖拽的角度,然后通过这个角度来计算并设置小鸟的坐标。
接着,看一下鼠标弹起后的功能,上面的代码里并没有用到box2dweb,我通过将小鸟变为box2d刚体,然后给小鸟加上一个力,来让小鸟弹飞出去。
function downOver(event){backLayer.removeEventListener(LMouseEvent.MOUSE_UP,downOver);backLayer.removeEventListener(LMouseEvent.MOUSE_MOVE,downMove);var startX2 = bird.x + bird.getWidth()*0.5;var startY2 = bird.y + bird.getHeight()*0.5;var r = Math.sqrt(Math.pow((startX - startX2),2)+Math.pow((startY - startY2),2));var angle = Math.atan2(startY2 - startY,startX2 - startX);bird.addBodyCircle(bird.getWidth()*0.5,bird.getHeight()*0.5,bird.getWidth()*0.5,1,.5,.4,.5);var force = 7;var vec = new LGlobal.box2d.b2Vec2(-force*r*Math.cos(angle),-force*r*Math.sin(angle));bird.box2dBody.ApplyForce(vec, bird.box2dBody.GetWorldCenter());}上面代码首先计算了一下小鸟的被拖拽的距离,以及被拖拽的角度。
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游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
- html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
- html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
- html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
- html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
- html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
- html5游戏开发-愤怒的小鸟-开源讲座(二)-跟随小鸟的镜头
- html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力
- html5游戏开发-愤怒的小鸟-开源讲座(三)-碰撞产生的冲力
- 【iOS-Cocos2d游戏开发】仿愤怒的小鸟 场景缩放
- [Unity3D]Unity3D游戏开发之《愤怒的小鸟》弹弓实现
- [Unity3D]Unity3D游戏开发之《愤怒的小鸟》弹弓实现
- Unity3D游戏开发之《愤怒的小鸟》弹弓怎么实现
- 浅谈向HTML5移植“愤怒的小鸟”
- Unity5_仿愤怒的小鸟游戏
- 愤怒的小鸟
- vtune使用笔记
- 网易邮箱
- VTune工具使用心得
- 标准控制结构
- pojo 复合主键HQL serializable [java.lang.Object
- html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
- 如何把nokia 5320的记事本导入电脑
- Delphi TStrings取得Ini文件键值对
- QT :: Qwizard 用法
- 2012.7.20
- 【PHP】php 发送 Email
- 2012-7-20 周五 计划
- 一个用servlet实现导出csv文件的实例
- paip.asp 项目流程及管理工具总结