HTML5-Spieleentwicklung – Angry Birds – Open Source-Vorlesung (1) – Springen Sie in den Pop-up-Vogel

Angry Birds ist ein beliebtes Puzzlespiel. Jetzt versuche ich, die Lufylegend-Bibliothek und die Box2dWeb-Physik-Engine zu verwenden, um zu sehen, wie man so ein klassisches Physikspiel in HTML5 erstellt.

Vorbereitung 1

Zuerst müssen Sie die Lufylegend-Bibliothek Version 1.4.1 herunterladen

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

box2dweb können Sie hier herunterladen

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

Zur Verwendung der Lufylegend-Bibliothek können Sie einige meiner vorherigen Artikel und Tutorials lesen oder die API-Beschreibung unten lesen.

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

Vorbereitung 2

Aufgrund eines Fehlers des Autors wurden die Funktionen von Box2dWeb nicht vollständig versiegelt. Wenn ich ein Physikspiel erstellen möchte, muss ich einige Erweiterungen für lufylegend-1.4.1 vornehmen. Sie können diese Erweiterungsdatei herunterladen und auf die nächste Version warten 1.5 der Bibliothek wird veröffentlicht. Diese Erweiterungen werden zu gegebener Zeit hinzugefügt.

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

Nach Abschluss der oben genannten Vorbereitungen folgen wir jetzt. Lass es mich versuchen Schritt für Schritt.

Einer, ein Vogel, der sich dreht und hochfliegt

Baue zuerst einen kleinen Vogel

function Bird(){
	base(this,LSprite,[]);
	var self = this;
	var bitmap = new LBitmap(new LBitmapData(imglist["bird1"]));
	self.addChild(bitmap);
}

Mit dieser Klasse , es ist für uns sehr einfach, es auf dem Bildschirm anzuzeigen

backLayer = new LSprite();	
addChild(backLayer);
bird = new Bird();
bird.rotate = 0;
bird.x = 200;
bird.y = 430;
bird.yspeed = -5;
backLayer.addChild(bird);

Freunde, die Angry Birds gespielt haben, wissen alle, dass zu Beginn des Spiels, wenn der Vogel auf die Schleuder springt, eine Drehung stattfindet Aktion: Ich implementieren diese Funktionalität derzeit über die LTweenLite-Easing-Klasse der lufylegend-Bibliothek.

LTweenLite.to(bird,1,
	{ 
		x:100,
		yspeed:5,
		delay:1,
		rotate:-360,
		onUpdate:function(){
			bird.y += bird.yspeed;
		},
		onComplete:function(){
			start();
		},
		ease:Sine.easeIn
	}
);

Wie Sie dem obigen Code entnehmen können, kann die LTweenLite-Klasse nicht nur einige allgemeine Eigenschaften von LSprite-Objekten ändern, sondern tatsächlich alle benutzerdefinierten Eigenschaften ändern. Das Obige dient dazu, yspeed von -5 auf zu ändern -5 bis LTweenLite. Verwenden Sie dann onUpdate, um die y-Koordinate des Vogels zu ändern.

Das Folgende ist eine Testverbindung

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

Zweitens der Pop-up-Vogel

Als nächstes fügen Sie eine Schleuder an der Position hinzu, nachdem der Vogel abprallt

	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);

Der Effekt ist wie unten gezeigt

Der obige Code fügt den vorderen und hinteren Zweig der Schleuder zum Bildschirm hinzu.
Ziehen Sie dann den Vogel mit der Maus und fügen Sie zuerst das Mausklickereignis hinzu.

backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,downStart);
startX = bird.x + bird.getWidth()*0.5;
startY = bird.y + bird.getHeight()*0.5;

Der obige Code fügt das Mausereignis hinzu und zeichnet die Position der Vogelmitte als Mittelposition auf Schleuder.
Bestimmen Sie dann, wenn die Maus gedrückt wird, ob die Maus auf den Vogel geklickt hat, entfernen Sie dann das Mausklickereignis und fügen Sie ein Mausbewegungsereignis und ein Maushochereignis hinzu.

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);
	}
}

Bewegen wir zuerst die Maus und lassen den Vogel der Maus folgen

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;
}

Erklären Sie den obigen Code. Berechnen Sie zunächst den Abstand zwischen der Mausposition und der Mittelposition des Schleuderabstand: Wenn der Abstand größer als 100 ist, machen Sie ihn gleich 100. Berechnen Sie dann den Winkel des Mausziehens und verwenden Sie diesen Winkel, um die Koordinaten des Vogels zu berechnen und festzulegen.

接着，看一下鼠标弹起后的功能，上面的代码里并没有用到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）！