html5 게임 개발 - 앵그리버드 - 오픈소스 강의(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

위의 준비를 모두 마쳤으면 이제 따라해 보겠습니다. 단계별로.

1. 회전하는 새

먼저 새를 만들어 봅시다

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를 사용합니다. easing 클래스는 이 기능을 구현합니다.

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 객체의 일부 공통 속성을 변경할 수 있을 뿐만 아니라 실제로 모든 사용자 정의 속성을 변경할 수 있습니다. 위의 내용은 yspeed를 -5에서 LTweenLite로 변경하는 것입니다. 그런 다음 onUpdate를 전달하여 새의 y 좌표를 변경합니다.

다음은 테스트 연결입니다

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

둘째, 팝업새

다음, 새가 튕긴 후 위치에 새총을 추가

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