html5 game development-Angry Birds-Open Source Lecture (1)-Jump into the pop-up bird

Angry Birds is a popular puzzle game. Now I am trying to use lufylegend library and Box2dWeb physics engine to see how to make such a classic physics game in html5.

Preparation 1

First, you need to download the lufylegend library version 1.4.1

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

box2dweb You can download it here

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

Regarding how to use the lufylegend library, you can read some of my previous articles and tutorials, or read the API description below.

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

Preparation 2

Due to the author's mistake, the functions of Box2dWeb were not fully sealed. If you want to make a physics game, you have to make some extensions to lufylegend-1.4.1. You can download this extension file and wait for the next version 1.5 of the library to be released. These extensions will be added in due course.

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

After completing the above preparations, let’s follow now Let me try it step by step.

1. A rotating bird

First, let’s build a bird

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

With this class, It’s very simple for us to display it on the screen

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

Friends who have played Angry Birds all know that at the beginning of the game, there is a rotating action when the bird jumps on the slingshot. I now use lufylegend The library's LTweenLite easing class implements this functionality.

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

As you can see from the above code, the LTweenLite class can not only change some common properties of LSprite objects, but can actually change any custom properties. The above is to change yspeed from -5 to LTweenLite, and then pass onUpdate to change the y coordinate of the bird.

The following is a test connection

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

Second, the pop-up bird

Next add a slingshot to the position after the bird bounces

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

The effect is as shown

The above code adds the front and rear branches of the slingshot to the screen.
Then drag the bird through the mouse, first add the mouse press event

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

The above code adds the mouse event, and records the position of the center of the bird as the center position of the slingshot.
Then when the mouse is pressed, determine whether the mouse clicked on the bird, then remove the mouse press event, and add the mouse move event and mouse bounce event.

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

Let’s first implement the mouse movement and let the bird follow the mouse

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

Explain the above code. First, calculate the distance between the mouse position and the center position of the slingshot. When When the distance is greater than 100, make it equal to 100. Then calculate the angle of the mouse drag, and then use this angle to calculate and set the coordinates of the bird.

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