1 時間かけて簡単な物理ゲーム (ロープの原理) を作成します。-H5 チュートリアル-php.cn

1 時間かけて簡単な物理ゲーム (ロープの原理) を作成します。

黄舟

リリース： 2017-03-01 16:01:24

オリジナル

3606 人が閲覧しました

一昨日、会社の飲み会があり、みんなでゲームをしました。非常にシンプルなゲームですが、社内の飲み会には参加者が多いので、一部の人しか遊べません。遊んでください。夕方帰宅後、HTML5を使ってゲームを復元して翌日みんなでプレイしてみたところ、社内で特に女子たちから「面白い！！」と大評判になりました。、 "それは難しい！" ！"…。

一般的に、女の子がゲームを気に入っているのを見ると、それが何のゲームなのか知りたくなりますよね?ゲームのインターフェースは以下の通りです。

ゲームのインターフェースを見た後、何人かの人が地面に落ちたと思います。ゲームが開始したら、マウスを押したまま画面を左右にスライドさせます。、そして主人公はブランコでスイングするようなもので、より高くスイングするほど、適切なタイミングでマウスを放し、最も遠くまで飛んだ人が勝ちます。

実際、ゲームはシンプルで短いほど、パーティーなどのアクティビティでのプレイに適しています。特にランキングシステムでは、誰もが上位にランクされ、競い合いたいと思うでしょう。

ゲームテスト接続:

http://lufylegend.com/demo/box2dJump

注: このゲームは純粋に会社の同僚を楽しませるために、画像や効率などを目的として約 1 時間作成されています。最適化されていません。モバイル版は実行中にフリーズする可能性があります

1、準備

1 つは HTML5 オープンソースエンジン lufylegend.js です。以下は私のブログの lufylegend-1.7.0 の投稿で、簡単に紹介されています

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

もう1つは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

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

ログイン後にコピー

あとは主人公のスイングを制御して飛び出す方法だけです。この時点で必要なイベントは3つです。

コードリスト3

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

ログイン後にコピー

上記のコードのonframe関数はタイムラインで、ondownとonupはそれぞれマウスが押されたときとポップアップされたときに呼び出されるイベントで、マウスが押されたときとポップアップされたときのコードは比較的単純です。次のように。

コードリスト 4

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

ログイン後にコピー

onframe 関数には、基本的にゲームのすべての論理部分が含まれています。

まず、先ほど作成した「ロープ」にはスキンがありません。つまり、デバッグモードでないと表示されません。そして、ロープが揺れるときに、これらの剛体に沿って曲線を描くと、それがなります。がロープになっている場合、コードは次のようになります。

コードリスト5

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

ログイン後にコピー

次に、ロープを揺らして、マウスが左右に揺れているかを判断し、剛体に左右の力を加えて剛体を動かすコードです。以下の通り

コードリスト 6

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

ログイン後にコピー

最後に、マウスが跳ね上がると主人公は投げ飛ばされるので、ゲームウィンドウも一緒に移動させてください。

コードリスト7

if(!out)return;
	backLayer.x = LGlobal.width*0.5 - hero.x;
	if(backLayer.x > 0){
		backLayer.x=0;
	}
	LGlobal.box2d.synchronous();
	if(!hero.box2dBody.IsAwake() && out){
		backLayer.removeEventListener(LEvent.ENTER_FRAME,onframe);
		point = Math.floor((hero.x - 250)*0.1);

		var rank = new GameRanking();
		backLayer.addChild(rank);
	}

ログイン後にコピー

最初にデバッグモードでゲーム全体が完成しました。作成した「ロープ」が実際には剛体の列であることがわかります

。

デバッグモードではなく、以下のインターフェースになります。