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

做好了上面的準備工作，現在就來跟著筆者來一步步的試試看。

一，旋轉飛起的小鳥

#首先來建造一個小鳥

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游戏开发-愤怒的小鸟-开源讲座(一)-跳入弹出的小鸟的内容，更多相关内容请关注PHP中文网（www.php.cn）！