Home Web Front-end H5 Tutorial html5 game development-Angry Birds-Open Source Lecture (1)-Jump into the pop-up bird

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

Mar 02, 2017 pm 01:49 PM

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);
}
Copy after login

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);
Copy after login

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
	}
);
Copy after login

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);
Copy after login

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;
Copy after login

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);
	}
}
Copy after login

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;
}
Copy after login

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());
}
Copy after login

上面代码首先计算了一下小鸟的被拖拽的距离,以及被拖拽的角度。

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


Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Table Border in HTML Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

Nested Table in HTML Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML margin-left HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

HTML Table Layout HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles