간단한 물리 게임을 만드는 데 1시간이 소요됩니다(로프 원리).-H5 튜토리얼-php.cn

간단한 물리 게임을 만드는 데 1시간이 소요됩니다(로프 원리).

黄舟

풀어 주다： 2017-03-01 16:01:24

원래의

3606명이 탐색했습니다.

어제는 회사에서 파티를 해서 같이 게임을 했습니다. 게임은 매우 간단하지만 파티에 참석하는 사람들이 많기 때문에 이벤트에 아주 적합합니다. 회사에서는 일부 사람들만 플레이할 수 있습니다. 저녁에 집에 돌아온 후 HTML5를 사용하여 게임 중 하나를 복원하려고 했고 다음 날 모두가 플레이할 수 있었습니다. 회사에서 매우 인기가 많았고, 특히 여자아이들이 플레이하는 동안 "오로시로이!!"라고 외쳤습니다. , "어려워!"…

보통 여자가 좋아하는 걸 보면 무슨 게임인지 궁금해지겠죠? 게임 인터페이스는 다음과 같습니다.

게임 인터페이스를 보니 몇 명이 쓰러진 것 같군요. 물리 게임.게임이 시작된 후 마우스를 누른 상태에서 화면을 좌우로 슬라이드하면 주인공이 그네를 타는 것처럼 보입니다. 가장 멀리 있는 사람이 승리할 것입니다.

사실 게임이 간단하고 짧을수록 파티 등의 활동에 더 적합합니다. 특히 랭킹 시스템을 사용하면 누구나 더 높은 순위에 오르고 싶어할 것입니다. 그리고 플레이하기 위해 경쟁합니다.

게임 테스트 연결:

http://lufylegend.com/demo/box2dJump

참고: 이 게임은 순전히 회사 동료들의 오락용으로 만들어졌습니다. 그래픽과 효율성이 최적화되지 않았습니다. 모바일 버전에서는 실행 시 멈춤 현상이 발생할 수 있습니다.

제작 시작

1. 준비

게임에는 두 가지 엔진이 사용됩니다

하나는 HTML5 오픈 소스 엔진인 lufylegend.js입니다. 다음은 제 블로그에 있는 lufylegend-1.7.0 게시물로, 간략한 소개가 있습니다

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

다른 하나는 Box2dWeb, 다운로드 주소는 아래와 같습니다

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

2. 게임 개발

게임 인터페이스에서 볼 수 있듯이 게임 개발의 초점은 밧줄입니다. HTML5에서 로프를 구현하는 방법은 무엇입니까?

box2d에는 로프가 없지만 box2d에 익숙한 친구들은 회전 조인트 세트RevoluteJoint에 익숙해야 합니다. 로프를 구현하려면 일련의 강체를 회전으로 연결할 수 있습니다. 관절. 이 강체는 흔들릴 때 거의 밧줄과 같습니다.

아래 코드를 보면 정적 강체 1개와 동적 강체 20개를 회전 조인트로 연결했습니다.

코드 목록 1

var bx = 250,by=40;
    var box01,box02;
	box01 = new LSprite();
	box01.x = bx;
	box01.y = 30;
	backLayer.addChild(box01);
	box01.addBodyCircle(10,0,0,0,1,10,0.2);
	linelist = [box01];
    for(var i=0;i<20;i++){
	    box02 = new LSprite();
	    box02.x = bx;
	    box02.y = by+i*10;
	    backLayer.addChild(box02);
	    box02.addBodyCircle(10,0,0,1,1,10,0.2);
	    LGlobal.box2d.setRevoluteJoint(box02.box2dBody, box01.box2dBody );
	    linelist.push(box02);
    	box01 = box02;
    }

로그인 후 복사

마지막으로 게임의 주인공으로 약간 더 큰 강체를 추가하고, 이전 강체를 연결한 상태에서 회전 조인트도 사용합니다.

코드 목록 2

rree

그렇습니다. 이제 주인공의 스윙을 제어하고 날아가는 방법만 남았습니다.

코드 목록 3

hero = new LSprite();
	var bit = new LBitmap(new LBitmapData(imglist["chara03"]));
	bit.x = -25;
	bit.y = -20;
	hero.addChild(bit);
	hero.bitmap = bit;
	hero.x = bx;
	hero.y = by+i*10;
	backLayer.addChild(hero);
	hero.addBodyPolygon(30,50,1,2,10,.2);
	joinline = LGlobal.box2d.setRevoluteJoint(hero.box2dBody, box01.box2dBody );

로그인 후 복사

위 코드에서 onframe 함수는 타임라인이고, ondown과 onup은 각각 마우스를 눌렀을 때 호출되는 이벤트입니다. 마우스를 눌렀을 때 팝업되는 것은 비교적 간단하며, 코드는 다음과 같습니다.

코드 목록 4

backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
	backLayer.addEventListener(LMouseEvent.MOUSE_DOWN,ondown);
	backLayer.addEventListener(LMouseEvent.MOUSE_UP,onup);

로그인 후 복사

onframe 함수에는 기본적으로 게임의 모든 논리적 부분이 포함되어 있습니다.

먼저 앞서 만든 "로프"에는 스킨이 없으므로 디버그 모드가 아닌 이상 표시되지 않습니다. 그러면 로프를 만들 때 다음을 따라야 합니다. 강체는 곡선을 그려서 로프로 바꿉니다.

코드 목록 5

function ondown(event){	
	if(out)return;
	monseIsDown = true;	
	mouseObject.x = event.offsetX;
}
function onup(event){	
	if(out)return;
	monseIsDown = false;
	LGlobal.box2d.world.DestroyJoint(joinline);
	hero.bitmap.bitmapData = new LBitmapData(imglist["chara04"])
	hero.bitmap.x = 0;
	hero.bitmap.y = 0;
	out = true;
}

로그인 후 복사

다음으로 로프를 스윙하게 하고 마우스가 왼쪽 또는 오른쪽으로 흔들리는지 판단하고 강체 왼쪽 또는 오른쪽에 힘을 추가합니다. 강체를 움직이게 하려면 코드는 다음과 같습니다

코드리스트 6

backLayer.graphics.clear();
	backLayer.graphics.drawRect(1,"#000000",[0,0,LGlobal.width,LGlobal.height]);
	for(var i=0;i<linelist.length - 1;i++){
		backLayer.graphics.drawLine(2,"#000000",[linelist[i].x,linelist[i].y,linelist[i+1].x,linelist[i+1].y]);
	}

로그인 후 복사

마지막으로 마우스가 튕기면 주인공이 튕겨나오기 때문에 게임 창이 따라옵니다. 그냥 함께 움직여 주세요.

코드 목록 7

if(monseIsDown && !out){	
		if(checkIndex++ > 10){
			checkIndex = 0;
			if(LGlobal.offsetX - mouseObject.x > 50){
				var force = 50;
				var vec = new LGlobal.box2d.b2Vec2(force,0);
				hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());
			}else if(LGlobal.offsetX - mouseObject.x < -50){
				var force = 50;
				var vec = new LGlobal.box2d.b2Vec2(-force,0);
				hero.box2dBody.ApplyForce(vec, hero.box2dBody.GetWorldCenter());
			}
			mouseObject.x = LGlobal.offsetX;
		}	
	}

로그인 후 복사

이렇게 하면 전체 게임이 먼저 디버그 모드에서 미리 볼 수 있습니다. 우리가 만든 "로프"는 실제로는 강체의 문자열입니다