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

原创 2012年07月23日 10:27:16

注:文章中很多链接已经失效了,愤怒的小鸟的demo在lufylegend.js引擎下载包中有源码,需要源码的请自己下载。

lufylegend.js引擎官网:http://lufylegend.com/lufylegend


愤怒的小鸟是一款人气火爆的益智游戏,现在我试着用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


本次就写到这里,在下一讲中会加入碰撞功能,并且让镜头时刻跟随小鸟,敬请期待。

JS版愤怒的小鸟Demo

  • 2013年01月05日 11:06
  • 54KB
  • 下载

java实现愤怒的小鸟游戏之Java swing图形界面开发游戏项目愤怒的小鸟源码及实现方式详解

今天给大家介绍一下Java swing实现游戏愤怒的小鸟的过程,完整源码下载地址在最下方,老规矩,先看运行结果: 下面我们来看看代码: /* * To change this template,...
  • llqqxf
  • llqqxf
  • 2016年07月13日 16:43
  • 4228

Cocos2d Box2d 物理引擎实现愤怒的小鸟

Cocos2d  Box2d 物理引擎实现愤怒的小鸟   这里我们修改HelloWorldScene场景,在这里实现 我们的思路是首先初始化一些刚体,,然后实现点击屏幕产生小鸟,松开小鸟,小...
  • wy_boke
  • wy_boke
  • 2014年12月20日 17:26
  • 841

Cocos2d-X 愤怒的小鸟的实现------开始界面(二)

1、头文件中 #include #include "cocos2d.h" #include "Scence.h" #include "DefineHeader.h" #include"...
  • u011269801
  • u011269801
  • 2014年09月28日 21:21
  • 1205

Unity2S 愤怒的小鸟教程

Unity 2D Flappy Bird Tutorial Foreword前言 In this Tutorial we will learn how easy it is to make...
  • u012132482
  • u012132482
  • 2016年01月05日 00:45
  • 1279

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

各位朋友,大家晚上好, 我是秦元培,欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。今天我们来做一个高端大气上档次的东西。我相信大家都玩过一款叫做《愤怒的小鸟》的...
  • qinyuanpei
  • qinyuanpei
  • 2014年05月04日 02:09
  • 7365

NOIP2016提高组 第二天第三题 愤怒的小鸟angrybirds 题解

题目描述 Kiana最近沉迷于一款神奇的游戏无法自拔。 简单来说,这款游戏是在一个平面上进行的。 有一架弹弓位于(0,0)处,每次Kiana可以用它向第一象限发射一只红色的小鸟,小鸟们的飞行轨迹...
  • u011056504
  • u011056504
  • 2016年11月28日 12:49
  • 1912

Cocos2d-x3.8.1制作愤怒的小鸟

//使用Cocostudio对拉弓动作进行处理 //设计很重要,设计的好可以事半功倍 //Cocostudio设计如下: //对主角bird可以作为右绳子的子节点 //并且各个节点的顺序我已经排好...
  • qq_33747722
  • qq_33747722
  • 2016年10月06日 16:39
  • 618

个性二维码,三分钟搞定,愤怒的小鸟!

具体调用的是一个api接口,传输的json数据。 接口演示地址: http://original-ad.com/qrCodeApi/qrCodeApi_Demo.html 以愤怒的小鸟作...
  • cheng110110
  • cheng110110
  • 2014年02月20日 12:07
  • 2062

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

欢迎大家关注我的博客,我的博客地址是blog.csdn.net/qinyuanpei。今天我们来做一个高端大气上档次的东西。我相信大家都玩过一款叫做《愤怒的小鸟》的游戏,这款游戏之所以能够受到玩家的喜...
  • weini_xiong
  • weini_xiong
  • 2014年05月09日 06:28
  • 1107
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟
举报原因:
原因补充:

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