Développement de jeux html5-Angry Birds-Conférence Open Source (1)-Sauter dans l'oiseau pop-up

Angry Birds est un jeu de réflexion populaire. J'essaie maintenant d'utiliser la bibliothèque lufylegend et le moteur physique Box2dWeb pour voir comment créer un jeu de physique aussi classique en HTML5.

Préparation 1

Tout d'abord, vous devez télécharger la bibliothèque lufylegend version 1.4.1

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

box2dweb que vous pouvez télécharger ici

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

Concernant l'utilisation de la bibliothèque lufylegend, vous pouvez lire certains de mes articles et tutoriels précédents, ou lire la description de l'API ci-dessous.

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

Préparation 2

En raison d'une erreur de l'auteur, les fonctions de Box2dWeb n'étaient pas entièrement scellées. Si je veux créer un jeu de physique, je dois créer quelques extensions pour lufylegend-1.4.1. Vous pouvez télécharger ce fichier d'extension et attendre la prochaine version. 1.5 de la bibliothèque à paraître. Ces extensions seront ajoutées en temps voulu.

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

Après avoir terminé les préparatifs ci-dessus, suivons maintenant Laissez-moi l'essayer pas à pas.

Un, un oiseau qui tourne et s'envole

Construisez d'abord un petit oiseau

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

Avec cette classe , il nous est très simple de l'afficher à l'écran

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

Les amis qui ont joué à Angry Birds savent tous qu'au début du jeu, lorsque l'oiseau saute sur la fronde, il y a une rotation action. J'implémente actuellement cette fonctionnalité via la classe d'assouplissement LTweenLite de la bibliothèque lufylegend.

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

Comme vous pouvez le voir dans le code ci-dessus, la classe LTweenLite peut non seulement modifier certaines propriétés communes des objets LSprite, mais peut également modifier toutes les propriétés personnalisées. Ce qui précède consiste à modifier yspeed de -5 à. -5 via LTweenLite. Utilisez ensuite onUpdate pour modifier la coordonnée y de l'oiseau.

Ce qui suit est une connexion de test

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

Deuxièmement, l'oiseau pop-up

Ensuite, ajoutez une fronde à la position après que l'oiseau ait rebondi

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

L'effet est comme indiqué ci-dessous

Le code ci-dessus ajoute les branches avant et arrière de la fronde à l'écran.
Ensuite, faites glisser l'oiseau avec la souris, ajoutez d'abord l'événement de pression de la souris

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

Le code ci-dessus ajoute l'événement de la souris et enregistre la position du centre de l'oiseau comme position centrale du fronde.
Ensuite, lorsque la souris est enfoncée, déterminez si la souris a cliqué sur l'oiseau, puis supprimez l'événement de pression de la souris et ajoutez un événement de déplacement de la souris et un événement de souris vers le haut.

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

Réalisons d'abord le mouvement de la souris et laissons l'oiseau suivre la souris

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

Expliquez le code ci-dessus. Tout d'abord, calculez la distance entre la position de la souris et la position centrale de. la distance de la fronde, lorsque la distance est supérieure à 100, faites-la égale à 100. Calculez ensuite l'angle de déplacement de la souris, puis utilisez cet angle pour calculer et définir les coordonnées de l'oiseau.

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