HTML5ゲーム開発～Angry Birds～オープンソース講座(1)～ポップアップバードに飛び込もう

Angry Birds は人気のあるパズル ゲームです。現在、lufylegend ライブラリと Box2dWeb 物理エンジンを使用して、このような古典的な物理ゲームを HTML5 で作成する方法を試しています。

準備1

まず、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

準備2

作者のミスにより、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);

Angry Birdsをプレイしたことがあるこのゲームの友人は皆それを知っていますゲームが開始されると、鳥がスリングショットにジャンプするときに回転アクションが発生します。今回は、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 から -5 に変更することです。 、次に、onUpdate を通じて鳥の y 座標を変更します。

以下はテスト接続です

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

2番目、ポップアップバード

次に、鳥が跳ねた後の位置にスリングショット

	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）！